Figma prototype how to#
So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title." How to Markup a wireframe Wireframe #4: Add Other Wireframe Components like Header, Menu, and Footer Note that Markup doesn't have to literally explain what the content will eventually be – just what it represents. In our example, let's markup the homepage and label each part of the content with red text.Īspects you want to markup include items such as sections, titles, contact forms, and what images might be. I usually do this at the end of completing a page. This can help guide people viewing your wireframe for the first time. So it's useful to add some markup to each part of the content. The wireframe is often viewed not just by designers, but by developers, clients, and management. Creating additional page elements in our wireframe Wireframe #3: Using Markup in Wireframes We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more. Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).Īs we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate. Creating a wireframe for the body of our home page This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer). We'll also give it a few labels to show what each item is.
Figma prototype full#
Watch the full video course with the step-by-step process in the YouTube embed below for free: Step #1: How To Make a Wireframe Preparing the user interface from the wireframeĬompleting the design from the prototype with color, image, etc This article will cover how to build a full website design from scratch following the process of user experience and user interface.