{"id":17,"date":"2020-09-30T07:00:02","date_gmt":"2020-09-30T04:00:02","guid":{"rendered":"https:\/\/kitchen.co\/blog\/?p=17"},"modified":"2021-10-15T17:21:43","modified_gmt":"2021-10-15T14:21:43","slug":"website-wireframe-are-you-doing-it-right","status":"publish","type":"post","link":"https:\/\/kitchen.co\/blog\/website-wireframe-are-you-doing-it-right\/","title":{"rendered":"Website wireframe: are you doing it right?"},"content":{"rendered":"

What is it and why?<\/strong><\/p>\n

Put into the most basic terms a website wireframe is the skeleton of a website before you add the flesh and then the clothing. The outlined structure of what the website will become.<\/p>\n

There are definite benefits to the creation of a website wireframe. The wireframe clarifies conceptual elements, certainly helps you visualise the direction and structure of the site, helps refine elements such as navigation and overall saves time and need for redesign. It is especially useful to get you on the same page as your client and iron out any potential misunderstandings before embarking on the full scale project.<\/p>\n

Some would argue that wireframing limits design creativity and, whilst this is a valid point, surely the advantages outweigh this complaint. Afterall your site\u2019s functionality is imperative and this is absolutely helped by a good website wireframe.<\/p>\n

So, in our view it is advisable for all sorts of reasons to wireframe, and the process deserves your attention. This article is a useful guide to the steps of creating an effective wireframing.<\/p>\n

1. Find inspiration<\/h2>\n

Many people think that inspiration is about style and color, choice of images and illustration, fonts and textures. It\u2019s true to a certain extent but great art is well planned, from the essentials of materials, form, structure and websites shouldn\u2019t be any different. Without the foundations, it really doesn\u2019t matter how beautiful the house is decorated or furnished.<\/p>\n

Your design needs an overarching vision. The inspiration is all around you on the web, take some time, browse different sites (keep notes of ones you\u2019ve liked, they may be useful next time), and remember don\u2019t be drawn in by the fancy visual you are focusing on the structure. Some elements will work for your project, others won\u2019t, you don\u2019t need to base your site on another but elements of several.<\/p>\n

Collaborate on ideas and vision with the client, what are their favourites sites and why. Go through them together, it\u2019s not only an important step to get ideas but it also helps form a trusting, professional client developer relationship. Show you are listening and offer your experienced expert advice.<\/p>\n

Tools such as Wirify<\/a>, let you turn a site into a wireframe in one click. You can hide the content and see the bigger picture. Once you\u2019ve stepped back and seen the vision, it\u2019s time to move forward to the sketching.<\/p>\n

2. Grab a pencil and sketch<\/h2>\n

\"Grab<\/p>\n

Sketching isn\u2019t wireframing, but it\u2019s a vital step towards it. The sketch is the way to get your ideas out of your head and start putting them into physical form (paper or digital). We\u2019re not looking for perfection and accuracy here and neither is it a finished guideline of the eventual site. Play around with the ideas, see how they come out, experiment, push ideas, innovate.<\/p>\n

Encourage your client to do something similar, compare your joint visions, discuss, sketch some more. Offer and think through alternatives, share your thoughts and vision with colleagues or friends, get and listen to feedback. And then sketch some more. Happy now? So let\u2019s look at how we are going to get these sketched ideas onto more concrete ground.<\/p>\n

3. Choose your tools<\/h2>\n

Where there is a market, there are tools. Wireframing is big news, (we\u2019ve seen the benefits) and there are plenty of digital tools to choose from to help you. Famous names like Adobe Illustrator<\/a>, Axure<\/a> and Indesign<\/a>, online tools such as Mockingbird<\/a>, Mockflow<\/a>, Hotgloo<\/a>, free tools like Balsamiq<\/a> and Figma<\/a>. We are not here to take you through the pros and cons of each – not in this article at least, but suffice to say, you are not lacking in choices.<\/p>\n

The tools will enable you to create website wireframes, quickly and easily. There are of course various features to help you even more for example some tools offer collaboration features and application integration. Here is not the place to go into detail. You may already have a favorite but it\u2019s worth shopping around and looking at alternatives, they are getting better all the time. It\u2019s a competitive market, and the fierceness is driving these tools forward.<\/p>\n

4. Use a grid to start wireframing<\/h2>\n

\"Use<\/p>\n

You\u2019ve got the vision, put it on paper, and selected the tools of your choice. Everybody is onside and you\u2019re ready to wireframe.<\/p>\n

So use a grid. The grid will significantly help you arrange and align, structure and organize and size differing elements of your design. The usual way is to lay out your site in boxes and take the role of future content, images, text, navigation tools etc. Here you are following your agreed sketches, mapping out the design. Start with the bigger sections like text sections, headers, footers and images and work smaller to details such as logo, social media buttons , calls to action. There are placeholders, now is the chance to alter the sizes and get something more concrete. It is low-fi but it crystalizes your ideas.<\/p>\n

5. Play with the font sizes<\/h2>\n

\"Play<\/p>\n

Fonts will play a really important role in the eventual site and you don\u2019t have to choose the exact font type at this stage. However, using different fonts can give you real clues and a feel for what parts need to stand out, the feel for where the eye is going to be drawn to, a sense of relationship to various sections. Vary the font sizes for key primary sections and secondary sections. This creates a sense of the visual impact of the whole site. Don\u2019t make the final font decisions yet but be aware of the impactful nature of these elements.<\/p>\n

6. Leverage the grayscale<\/h2>\n

\"Leverage<\/p>\n

Whilst your website wireframe is sitting with empty placeholder boxes, or even example fonts, you are starting to get more a sense of where this is going. So let\u2019s up the realism a stage further. We need to create some feel for the colors, like the fonts, this is not the stage to make final decisions but a guide to increase your sense of contrast, consistency and atmosphere.<\/p>\n

By using the grayscale spectrum you can start to fill in darker and lighter areas, highlighting and creating depth without distraction of color. This allows you to give sections greater or lesser importance and gives the client a clear picture of what is to come. We are quite hi-fi but we\u2019ve moved to mid-fi, and things are coming along nicely.
\nThis could be enough, it could very well be the stage that you hand over your baby, if so do it with pride.<\/p>\n

But\u2026\u2026\u2026there is an optional further stage.<\/p>\n

7. Going hi-fidelity<\/h2>\n

\"Going<\/p>\n

Finally this is the stage to get (hopefully) to add the detail and raise our wireframing bar to the next level. It\u2019s been a smooth journey, so now let\u2019s put the icing on the cake. Menus, styles, actual text, fonts, colors and images\u2026\u2026we\u2019re in danger of going from wireframe to design, you and your client will decide where you draw the line.<\/p>\n

Final words<\/h2>\n

This a step-by-step guide, useful for sure, handy without a doubt but it isn\u2019t the whole story. Now you know the steps to follow, the roles assigned to each stage, follow them faithfully and the end product then only (ONLY is a big word here) depends on your qualities, ideas, vision and abilities. We\u2019ve given you the outline, now it\u2019s up to you to wireframe.<\/p>\n

You may also be interested in Website Methodologies: The Best Ways to Run Web Development Projects<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

What is website wireframing and how do I get it right? Everything you need to know about website wireframing including tips and tools to use is right here in our essential step-by-step guide to the process.<\/p>\n","protected":false},"author":2,"featured_media":507,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/posts\/17"}],"collection":[{"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":20,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":2001,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions\/2001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/media\/507"}],"wp:attachment":[{"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kitchen.co\/blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}