{"id":7554,"date":"2017-03-28T11:13:14","date_gmt":"2017-03-28T10:13:14","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7554"},"modified":"2020-11-18T14:50:31","modified_gmt":"2020-11-18T14:50:31","slug":"getting-started-wireframes","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/getting-started-wireframes\/","title":{"rendered":"Getting Started with Wireframes"},"content":{"rendered":"

This guide will cover what you need to know about wireframes<\/strong>, why and how you should use them in your workflow.<\/p>\n

What does wireframe mean?<\/h2>\n

Wireframe (n.)<\/strong>
\n\u201cA basic visual guide used to suggest the layout of fundamental elements in a web interface.\u201d
\n(Source: Wiktionary<\/a>)<\/span><\/p>\n

Wireframes are invaluable in keeping everyone on the same page. 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.<\/p>\n

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.<\/p>\n

\"Drawn<\/a><\/p>\n

Why should I use wireframes?<\/h2>\n

In short, everyone uses. I do, and throughout this post I\u2019ll explain why you should do too. Some people think they\u2019re time-consuming, why bother to create more work? But in fact, it\u2019s the complete opposite. They actually save time.<\/p>\n

It is the blueprint of your website. The main purpose is to show the client how the website will be structured before designing. Remember, clients are usually busy running their own businesses. They want something clean and readable to quickly get up to speed on what they\u2019ve missed.<\/p>\n

What happens if I don\u2019t use wireframes?<\/h2>\n

Let\u2019s suppose you didn\u2019t start with wireframes. Instead, you jumped into Photoshop and created a nice well-designed homepage. The client liked it in general, but he didn\u2019t like how the \u201cabout\u201d section is on the left side, he wants it on the right side. Also, he didn\u2019t like how the navigation bar\u2014 that you\u2019ve been working on all weekend\u2014 looks like. You\u2019d have to make the corrections, move every layer, one by one, which requires lots of work and time. Here\u2019s the problem, you started off on the wrong foot.<\/p>\n

By laying out a simple website structure, you can quickly change any element placement to meet your client\u2019s needs. You can clarify exactly what needs to be on the different pages of your website, even if it\u2019s a quick sketch on a scratch paper.<\/p>\n

Wireframes vs. prototypes vs.\u00a0mockups<\/h2>\n

Before going any further in details, let\u2019s get things straight. Wireframes, mockups and prototypes are often used interchangeably, yet they are not the same.<\/p>\n

<\/div>
<\/svg><\/div>

\"Wireframes, mockups and prototypes are often used interchangeably, yet they are not the same.\"<\/p><\/span><\/blockquote>\n

A wireframe is a low fidelity representation of a web page that shows the basic elements of the page. They are not interactive, and do not show much detail, but create a simple design that guides the project. Once it starts becoming interactive, it becomes a prototype.<\/p>\n

Wireframes vs Prototype<\/strong>
\nA prototype is a more detailed interactive representation of the final product. Prototyping means building a model of the website before you build the actual website. Prototyping allows you to test the final product before spending time or money on code.<\/p>\n

Wireframes vs. Mockups<\/strong>
\nA mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Mockups are more easily understood than abstract wireframes while being quicker to create than prototypes.<\/p>\n

<\/p>\n

\"wireframe<\/a>

Here\u2019s a nice table that shows wireframe, prototype & mockup differentiation. (Source:www.quickfocus.com)<\/em><\/a><\/p><\/div>\n

<\/h2>\n

What to include in a wireframe<\/h2>\n

Think about general elements when you plan every webpage: header, footer, sidebar and content areas. Then, think of additional elements: navigation bars, widgets, buttons. Once you have an idea of the elements, you can now start creating your wireframe.<\/p>\n

All elements in the wireframe are usually displayed and organised to consider the following:<\/p>\n

Content
\n<\/strong> What will exactly be displayed in this page?<\/p>\n

Structure<\/strong>
\nHow will the elements of this page be put together?<\/p>\n

Hierarchy<\/strong>
\nHow will these elements be displayed in positioning, labelling and size?<\/p>\n

Functionality<\/strong>
\nHow will these elements work together?<\/p>\n

Behavior<\/strong>
\nHow do these elements interact with the user?<\/p>\n

\"0-uhhbg2sqrxv-ea3q\"<\/a>

The above graph shows the layered elements of a web page.
(source: Jesse James Garret, The Elements of User Experience)<\/p><\/div>\n

What not to include in a wireframe<\/h2>\n

Graphic elements
\n<\/strong> Wireframes are not supposed to include design elements, as this will distract the purpose of the wireframes. This is why they should be created without the use of colour, graphs, or typography.<\/p>\n

Lorem ipsum text
\n<\/strong> Dummy text should not be used in a wireframe. Instead, use real text for clarity.<\/p>\n

Actual design
\n<\/strong> It shouldn\u2019t define the final look of the page. It should show how the site will work, not how the site will look like.<\/p>\n

Types of wireframes<\/h2>\n

So what types of wireframe should you build? Do you need a hand drawn sketch on a piece of paper? Or a somewhat more formal, cleaner plan? It all depends on the purpose of your wireframe.<\/p>\n

Basically, there are two types:<\/p>\n

Sketchy<\/h2>\n

Some people think a sketchy type of wireframe is somehow more attractive to the client, it shows them that this is an ongoing process, that they can criticize and freely manipulate the elements and placements.<\/p>\n

\"0-ebnkxtlpyvbqqq2e\"<\/a><\/p>\n

Digital<\/h2>\n

The digital type gives a more formal and sophisticated look. This one goes one step further by using some basic design elements through the wireframe. It\u2019s close to a level of mockups, where it shows the client a sense of what the website will look like, especially for the clients who might have a hard time imagining the finished product with a sketchy wireframe.<\/p>\n

\"digital<\/a><\/p>\n

Wireframe tools<\/h2>\n

There are dozens of techniques to create a wireframe ranging from simple sketches to a high fidelity almost finished wireframe.<\/p>\n

The tools you decide to use will depend on personal preference and project requirements. Some look for simple fast techniques, other prefer high fidelity mockups, even if it takes a little more time from the project scope.<\/p>\n

<\/div>
<\/svg><\/div>

\"There is no 'best' tool for wireframing. It\u2019s whatever you\u2019re comfortable using and whatever works for you.\"<\/p><\/span><\/blockquote>\n

Every tool has its pros and cons, there is no \u201cbest\u201d tool for wireframing. It\u2019s whatever you\u2019re comfortable using and whatever works for you.<\/p>\n

Illustrator and inDesign<\/h2>\n

Illustrator is created for drawing, and InDesign is a program for page layout and documentation. So technically, these two combined together can make a great wireframe tool.<\/p>\n

Why both? First, Illustrator doesn\u2019t support multiple pages and master pages, but InDesign does. Also, InDesign doesn\u2019t offer drawings and icon libraries, but illustrator does.<\/p>\n

Therefore, by using Illustrator for the majority of the screen illustrations, you can use InDesign to pull everything together and add behavior notes.<\/p>\n

\"wireframe<\/a><\/p>\n

Wireframes vs. Sketch<\/h2>\n

If you use Sketch to design your mockups, then wireframing on Sketch will save a lot of time. You can start withdrawing your wireframes and use symbols throughout. When the wireframes are approved, you can design a style guide then edit your wireframes to become design mockups.<\/p>\n

Using Sketch\u2019s symbols in the process will make your work faster and more efficient, as you can edit the symbols that you previously created in the wireframes, which will convert the wireframes into mockups instantly. You can even make your wireframes (and mockups) interactive by using Marvel App plugin<\/a>.<\/p>\n

\"wireframes<\/a>

Sketch App<\/p><\/div>\n

HTML\/CSS<\/h2>\n

If HTML and CSS are in your skill list, then you can set up some code and link up your images. It\u2019s an inexpensive tool to outline your website and even offers a range of frameworks.<\/p>\n

Creating HTML outlines may add time to your process from the time you begin wireframing to the point when you have client approval. However, it may well reduce additional communication and work after your wireframes are approved, since the blueprint has already been done.<\/p>\n

\"0-6u9v4lsisbkce48m\"<\/a><\/p>\n

Conclusion<\/h2>\n

No matter which technique you choose to, you\u2019ll learn that wireframing is a crucial part of your design workflow. As long as you give your client a visual structure from the beginning, any discussion or misunderstandings that might happen during your project scope can be solved by referring back to the wireframe. You\u2019ll present a professional image to your client.<\/p>\n

<\/div>
<\/svg><\/div>

\"No matter which technique you choose, you\u2019ll learn that wireframing is a crucial part of your design workflow.\"<\/p><\/span><\/blockquote>\n

Also, by starting with wireframes, you\u2019ll be much more confident when you actually open your photoshop file and start designing.<\/p>\n

This article was originally published on Nicole's Medium Page<\/a><\/em><\/p>\n

Further reading:<\/h3>\n