Wireframes are a good step between touch sketches and final design. There are times that sketches on a napkin just aren’t polished or sophisticated enough to communicate the design. And there are times you are just not ready to mock pages up in Photoshop or Sketch because the design still needs some tweaking. That is why wireframes are a great intermediate step between sketch in higher fidelity mockups or diving straight in to code.
There are several benefits or wireframing your designs:
They are easy to produce. You can be created quickly once you get the hang of it. You are skilled in the software to produce wireframes, and there are many, then and experience UX designer can usually create them with great ease.
Wireframes allow for design exploration and easy iteration. You can change and update designing without being too invested in the design.
They allow for focusing on what’s important. Instead of focusing on fonts and colors, the user can function on the layout and placement of items on the page.
Gives an idea of the design without being fully invested. This makes adjustments and changes low cost and without be too committed to the code or design.
Clients understand the designs are not fully baked. They see that the designs are rough. There’s no color or images. There might even be squiggly lines or other clues that it is in a rough state. But being in this preliminary state the user or stakeholder is more comfortable making suggestions or providing feedback for changes.
Wireframes help developers understand relationships. Without requiring the developers to create things in code, a wireframe can help them easily understand the page, the design, and how things relate to each other. In that way, wireframes are a great communication tool.
I understand there are cons for wireframes. And not everyone is onboard with the concept of wireframes. But I wanted to highlight some of the benefits of working wireframes in to your work flow.
Wireframes are not for everyone. I understand there might not be time to create wireframes. Some people don’t see the value of this middle step. “Just sketch out some ideas. Once you like something just code it up.” Others may not have it in the budget to create some deliverables.
I have to admit, I am guilty of not always creating wireframes. To me, they can be a luxury. There are times I don’t really have the time or the patience to go beyond sketches (if I have even created those) to going to the middle step of creating wireframes.
I strongly suggest that if you do have the time, and the budget, that you should make the effort to create some static wireframes. Here are a few advantages of creating wireframes:
Get the concepts out of your head and on to a page/layout
Visualize how your designs might work
Get early feedback on your designs before it goes in to code
Allow for quick changes before too committed to design
Facilitate discussion across the team and with stakeholders
Provides clarity for communication
For developers to understand the functionality of the site
To show the information architecture and navigation structure of websites
Cost-effective level of fidelity for quick changes
There are many people trying to figure out how to make the jump in to the UX field. I too, not too long ago, was trying to transition (or to use the buzz word “pivot”) in to the field of UX. Thankfully, I made the transition and I am now a UI Designer. However, it took a lot of hard work, networking, self discipline, education and pushing myself to learn more about UX every day.
One way I went about getting experience about UX was to learn as much as I could about the deliverables in the UX field. I would hear a term like “personas” or “wireframes” and decide that I was not only going to learn as much as I could about these topics, but I was also going to put it in to practice.
Here’s an example. Say you are a web designer for a flower shop. Sure, you could just design the website per the shop owner’s request. But why not take it a step further? Why not do a bit of discovery and research before starting the design project? You could interview the owners and customers to find out what the business goals and customer goals are. You could do a bit of ethnographic research by observing people shopping for flowers or employees performing a transaction. Sketch our a few concepts before diving in to the code.
If you are trying to get experience in UX, and want to build up your portfolio, use some or many of these methods to show that you are so much more than a visual designer or developer. Show off your analytical skills and how they are applicable to a career in UX.
Here is a brief list of UX deliverables to get you started:
Information Architecture (Taxonomy)
Examine Business Goals
Examine Customer Goals
Site Map and Architecture
Whiteboard and Sticky Notes
Use Case Scenario
Persona Empathy Map
Cognitive Walk Through
Now take all of these deliverables and practice creating them. Then, use the most important UX skill of all: Tell us Your Story.
Jennifer Blatz explores the world of UX through words and imagery