In my last post on web design essentials, I explored sitemaps which are useful in defining the organization and structure of your overall website. Now it’s time to dive a little bit deeper and focus on the structure of individual pages with wireframes.
Like architectural blueprints, wireframes depict the structure of a webpage but not the visual design elements of it. You can learn the layout of content blocks on a page, the types of content a page will contain, and some of the basic functionalities of a page from a wireframe. You will not, though, learn about the color palette of a website or the inclusion of more complicated elements like animations from wireframes
To help focus on structural elements, wireframes are generally created in grayscale with different shades or shapes representing different types of elements. The only exception may be the use of color to indicate hyperlinks.
Wireframes are also not required to contain the actual content or written text for a page, even though they deal with the placement and hierarchy of headings, subheadings, body text, images, and other media. If you already have the actual text for a page, then including it is fine but using placeholder text such as Lorem ipsum is just as good. Don’t stress out over details like this. Just choose whatever direction is the easiest for you.
tHE fUNCTION OF wIREFRAMES
Now you may be reading this description and thinking that wireframes sound a lot like prototypes. Well, they are. Sort of. In the video above, Nielsen Norman Group explains that all wireframes can be prototypes, but not all prototypes are wireframes. Most notably high-fidelity prototypes that look closer to screenshots in design detail than blueprints cannot be considered wireframes.
Wireframes are most closely categorized as low-fidelity prototypes. I’ve previously posted about the advantage of using low-fidelity prototypes to start user testing early in your design process. So, if you’re interested in doing this you could do so by making your wireframes interactive in some way. Interactivity is the key differentiator between wireframes and prototypes. If you make areas of your wireframes clickable using a piece of software or by just laying other paper elements over them in a paper prototyping situation then you could use them for testing.
Otherwise, wireframes function as the first step in visualizing the different page templates your website will have before you enter the design phase. By working in this low-fidelity mode you can quickly and more cost-effectively consider different structural versions of your pages and make changes before committing to move forward with a certain direction. Using this iterative process will result in a more refined and focused product in the end. Plus, you will be less likely to identify big, structural problems late in the process, which could waste resources.
You can use wireframes to communicate your intended design direction early to get feedback, align with others on your team about functional requirements, or attain approval from internal or external stakeholders. The simple nature of wireframes can help these other parties focus better on the structural purpose of this step in the process rather than getting distracted by details like color or font selection. Many important decisions in the design process can be sidelined by getting too in the weeds about these topics too early.
Wireframe Examples
You can create wireframes by sketching, using graphic design software like Illustrator or InDesign, or using user experience (UX) software like Adobe XD or Sketch. I’ve created the following wireframes using Adobe XD for my redesign of Scratch Baking’s website.
This first wireframe is the desktop view of the site’s homepage. I was able to use my previously created sitemap to inform me of what needed to be in the header, footer, and in the navigation for this page. Then to decide on the remainder of the layout and content blocks I considered the content strategy of this page: to enthusiastically yet briefly introduce the brand and its products, enticing users to learn more or order. This is why I included a place to share the brand’s mission, a place to feature product photos, and a place to highlight customer reviews.
This second wireframe is the desktop view of the lunch menu page. I followed a similar process for creating this wireframe as I did for the homepage one. For example, I wanted to include pictures for each menu item because we really do eat with our eyes. I also included “Order” and “Add to Cart” buttons under each item should a user be prompted enough at any point to want to commit to ordering something rather than just browsing the menu. This functionality would, of course, have to be vetted with engineers first to be sure the integration was possible with Scratch’s e-Commerce system.
This last set of wireframes are mobile views of the homepage as it would appear on an iPhone X. You can get very comfortable thinking of a website only in terms of the desktop view because during a project you probably spend most of your time working on a desktop device. It’s important, though, to remember that we live in a mobile world.
When creating wireframes, you should consider how you want your pages to be structured on desktops, tablets, and phones. Doing so can make sure your base design is compatible with all of them and help you work on problems or needs related to responsiveness before you start visual design and build. If you think there could be a problem, you can quickly sketch or build a wireframe of a different view, like I’ve done above, to work it out.
Wireframes are Only the Beginning
Once you have your user research and information architecture design done, wireframes are the first step in seeing what your new site will look like. This is always an exciting transition point in a project but be sure to also keep your focus on the purpose of this tool. Remember that a wireframe is meant to clearly communicate your initial user interface and user experience design ideas, not to resemble a piece of art or the finished product.
MORE IN THE WEB DESIGN ESSENTIALS SERIES
References
Babich, N. (2017, October 30). Everything you need to know about wireframes and prototypes. Adobe Blog. Retrieved from https://theblog.adobe.com/everything-you-need-to-know-about-wireframes-and-prototypes/
Duffield, C. How to read a wireframe. Fuzzy Math. Retrieved from https://fuzzymath.com/blog/how-to-read-a-wireframe/
Hannah, J. (2019, August 1). What exactly is wireframing? A comprehensive guide. Career Foundry. Retrieved from https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#6-website-wireframes-vs-mobile-wireframes
Mrozek, K. K. (2018, January 4). Why create sitemaps and wireframes before the visual design? Windmill Strategy. Retrieved from https://www.windmillstrategy.com/insights/why-create-sitemaps-and-wireframes-before-the-visual-design/
