Tag Archives: wireframes

UX Deliverables: wireframes

VCA Wireframe for Travel Sheet

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.

Creating Wireframes for Dashboard Development

Jennifer Blatz Design UX

 

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.

Wireframes and deliverables by Jennifer Blatz UX
Wireframes can be created in a variety of programs. I chose Adobe Illustrator to create these first drafts of the dashboard.

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
  • Print

Create UX Deliverables to Build up your Portfolio

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.

Jennifer Blatz UX design deliverables
Use all levels of fidelity to show your progress through the UX design process.

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.

UX deliverables like performing a competitive analysis can show progress in a project.
UX deliverables like performing a competitive analysis can show steps in a project.

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.

Jennifer Blatz design UX deliverables
Creating a mood board helps set the tone of a project and informs you of what designs already exist in the same arena.

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:

  • User Stories
  • Personas
  • Competitive Audit
  • Sketching
  • Stakeholders Interviews
  • Brainstorming Sessions
  • Moodboard
  • Prototypes
  • Annotated Wireframes
  • Storyboard
  • Information Architecture (Taxonomy)
  • Task Analysis
  • Interviews
  • Ethnographic Observation
  • Heuristic Evaluation
  • Examine Business Goals
  • Examine Customer Goals
  • Content Audit
  • Sitemap Creation
  • User Flow
  • Usability Testing
  • A/B Testing
  • Card Sorting
  • Pattern Libraries
  • Site Map and Architecture
  • Whiteboard and Sticky Notes
  • Functional Specifications
  • Interactive Mockups
  • Style Guide
  • Surveys
  • Market Research
  • SWOT Analysis
  • Use Case Scenario
  • Creative Brief
  • Diary Study
  • Navigation Model
  • Web Analytics
  • Persona Empathy Map
  • Affinity Diagrams
  • Ideation Workshop
  • Task Model
  • 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.