Part 3: Wireframes – Roots Before Roses
This is Part 3 of a 4 part series written by the talented UX design team here at Charity Dynamics. To learn more about their awesome nonprofit focused design work, visit our portfolio!
With the necessary evil of defining your personas, goals and site architecture out of the way, you’re now fully equipped to brave the exciting world of wireframes! So go ahead and take a deep breath, pull your hands to heart center, reach up and high five your team for all that hard work so far! Wait for it …
While its tough, and at times a tedious exercise, the value and importance of laying this groundwork will all become realized during the wireframe process. The best way to explain wireframes is with a home building analogy. Think about it. You start with a vision, determine your goals and then approach an architect to draft a blueprint plan for your dream home where each nook and cranny is strategically configured exactly where it should be. You don’t start painting walls and hanging curtains first without a clue where the walls and windows are even going to be. A wireframe is no different. It defines each and every component on your website, where its placed and how your users will interact with it. So leave subjectivity at the door and let’s base the decisions on the data.
1 – But it’s all black and white!
You can and you will (wait for color and style that is). I’m sure you’re stakeholders sound like a broken record at this point in asking, “when can we actually see a design?” And while you’re answer will still be a resounding “not yet,” never fear. It won’t be much longer at this point in the process. Keep calm (and the wolves at bay a little longer) and carry on.
Just as you wouldn’t start pouring a foundation without a plan, you won’t start slapping things into a layout without rhyme or reason. Remember those pesky personas and user scenarios we defined during strategy? Yeah, those. We need those. Now we are actually going to visualize how every persona will complete each of those tasks on your new website. Granted, it will be with gray scale components, but we have a good reason for keeping it so nondescript. No, it’s not because we’re lazy and we don’t care! By maintaining a certain level of vagueness, we can focus on the inclusion of each component on a page rather than get caught up in a particular aesthetic choice.
P.s. No, your final website design will not be black and white boxes. And no, you will not have to learn Latin with Rosetta Stone to be able to read it…
2 – If everything is important, then nothing is
Once each user scenario has been accounted for within the wireframes, the next task is evaluating if the hierarchy of said components makes sense. Just as your users were placed into primary and secondary groups, the components on your homepage, let’s say, should be categorized in the same way. Who is most important and what they are looking to accomplish on the site definitely gets more priority than someone lower on the strategic audience totem pole. This is another great place to rely on the data when difficult stakeholder feedback comes in (and it will). Being able to clearly state why a certain component resides above another based on a user experience centered approach will hopefully ward off any departmental and board politics. These decisions can be new and uncomfortable at times, but absolutely necessary to keep from repeating the same pattern that most likely led you to go through this process in the first place.
3 – Stick to a grid
Chances are if the last time your organization went through a redesign was before the year 2000, it doesn’t make the most of the space on a typical webpage. Designing on a structured grid will allow you to expand your site while maintaining visual alignment. This also will allow the development team to get a head start in the coding process (YAY!). Keeping each component on a page aligned with a grid will inherently please your viewers and enable them to focus on the actual content of the site rather than getting hung up on distracting, uneven components. A grid approach also keeps each page structurally sound throughout the entire site and lends very nicely to responsive design. Speaking of responsive design…
4 – Responsive, responsive, responsive
Long gone are the days of a desktop-only design. Users access information on all types of devices and your design needs to be able to accommodate ALL of them. That’s right, ALL OF THEM. Sound like the things nightmares are made of? Grab your blanket and relax. It’s not. Now, I’m not saying it’s easy-peasy, but with a bit more thought and planning, your new site design can look and function beautifully across the board. Wireframing layouts for smaller AND large format screens will allow you insight into how users will digest and experience your content. Again, this is where priority plays a huge role in deciding what content carries more weight than other content. Put yourself in your user’s shoes and envision what would make sense in how your information is presented. A rule of thumb on how to transition from large to small viewports and vice versa is: top to bottom, left to right. The natural way you digest content on your own. Keep it simple and when in doubt, TEST!
5 – If at first you don’t succeed
I leave you with this final piece of advice. Please, please, please TEST your site! I’ll say it again. TEST YOUR SITE. Test the hell out of it! Before moving on to putting aesthetics to wireframes, grab some potential users and evaluate all the decisions that have been made to date with simple tasks. If your testers can’t perform basic functions, its time to go back to the drawing board and try again. This is why it is so important to wireframe your design. Can you imagine putting in all kinds of effort into finalizing a gorgeous design only to find out later it doesn’t make sense or in’t even unusable? Luckily, by performing testing at this phase (and every phase!), you can make tweaks and save time in the long run to course-correct if need be.
Happy wireframing!
Be sure to look for Part 4 coming soon! If you missed Part 1 or Part 2 go back and read it now!