How will the elements of this page be put together? Hierarchy What will exactly be displayed in this page? Structure Once you have an idea of the elements, you can now start creating your wireframe.Īll elements in the wireframe are usually displayed and organised to consider the following: Content Then, think of additional elements: navigation bars, widgets, buttons. Think about general elements when you plan every webpage: header, footer, sidebar and content areas. (Source: Elements of a Wireframe What to Include in a Wireframe Here’s a nice table that shows wireframe, prototype & mockup differentiation. Mockups are more easily understood than abstract wireframes while being quicker to create than prototypes. MockupsĪ mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Prototyping allows you to test the final product before spending time or money on code.
Prototyping means building a model of the website before you build the actual website. PrototypeĪ prototype is a more detailed interactive representation of the final product. Once it starts becoming interactive, it becomes a prototype. They are not interactive, and do not show much detail, but create a simple design that guides the project. WireframesĪ wireframe is a low fidelity representation of a web page that shows the basic elements of the page. Wireframes, mockups and prototypes are often used interchangeably, yet they are not the same. Mockupsīefore going any further in details, let’s get things straight. You can clarify exactly what needs to be on the different pages of your website, even if it’s a quick sketch on a scratch paper. Here’s the problem, you started off on the wrong foot.īy laying out a simple website structure, you can quickly change any element placement to meet your client’s needs. You’d have to make the corrections, move every layer, one by one, which requires lots of work and time. Also, he didn’t like how the navigation bar - that you’ve been working on all weekend - looks like. The client liked it in general, but he didn’t like how the “about” section is on the left side, he wants it on the right side. Instead, you jumped into Photoshop and created a nice well designed homepage. Let’s suppose you didn’t start with wireframes. They want something clean and readable to quickly get up to speed on what they’ve missed. Remember, clients are usually busy running their own businesses. The main purpose is to show the client how the website will be structured before designing. They actually save time.Ī wireframe is the blueprint of your website. Some people think they’re time consuming, why bother create more work? But in fact, it’s the complete opposite. I do, and throughout this post I’ll explain why you should do too. Uses of Wireframes Why should I use wireframes? Most successful designers wireframe their project in one way or another, whether by sketching it on a piece of paper or laying out detailed structures.
Developers use wireframes to get a clear picture of the elements that they will need to code, architects present plans before building a house, business analysts use wireframes to visually support the business rules and interaction requirements, business stakeholders review wireframes to ensure that requirements and objectives are met through the design. Wireframes are invaluable in keeping everyone on the same page. "A basic visual guide used to suggest the layout of fundamental elements in a web interface." This guide will cover what you need to know about wireframes, why and how you should use them in your workflow. I will thoroughly go into detail with the 3rd step: wireframes.
Following up on my tutorial 5 steps for a successful website design that walks you through 5 essential steps of a website design process to boost your productivity.
0 kommentar(er)
