Smarter ideas worth writing about.

Wireframes, Pixel Perfect Mockups… Ain't Nobody Got Time for That

 

In today’s digital world we need a flexible design process that allows efficient development, maintenance and sustainability.

The waterfall method of wireframe to mockup and then development used to work because the client knew what they were getting, and the time-to-market was not as aggressive as it is today.  Flat comps were looked at as a sign-off for development. Today we work in an agile world with quick-to-market solutions and responsive design.  A static pixel-perfect mockup is no longer sufficient. We need to show prototypes and interaction.  The Photoshop design mockup – when developed – may look different in each browser or device, which means we need to be more flexible in how we present our designs. 

The ideal process is one that fits both the client needs and the user needs.  You also have to know the capabilities of the internal team. Explaining the process up front and coming up with a solution that works for the technology, budget and time frame is key.

Ask yourself:

  1. What can my team do? What is in their toolbox?
  2. What is the feedback process? What do we need for signoff?
  3. What are our constraints? What is the technology, the timing and budget?

We have to meet the needs of both the business and the user. A great design comes from communication and problem solving. When I say "great design," I mean it from a UX standpoint, not just the GUI.

There are some great design and prototyping tools are out there and clients may need to adapt to new processes, with the end result being the same great product yet quick-to-market delivery.  It's a win/win. 


Design the aesthetic of the site before any full page comps

We need to get on the same page with the client and understand what it is they are looking for in order to design comps. Help them define a look by taking screenshots of other sites and establish the definition of good and bad.  Moodboards and style tiles are also good ways to make quick decisions about the design style they prefer.  Moodboards provide a way of exploring the personality of an organization while giving stakeholders a sense of ownership in the design process. Now is your chance to educate them on fonts, design styles and imagery.  Other tools like element tiles and style prototypes take things one step further into the medium of the web. Element tiles can help us show interaction and key interface elements before coding it ourselves. A style prototype shows them a responsive HTML/CSS prototype and illustrates how content will be served at different views (different browsers and devices), while also showing the discrepancies of certain elements like fonts and colors. Who wants to develop a separate PSD to show the rendering differences in Safari, Chrome and IE8? Not me! By using style prototypes you can eliminate this work and decide how to compromise on certain design elements. Your developers will thank you too because they will save time on known bugs.
 

All of these tools are fabulous but I am not saying we no longer need Photoshop. Photoshop is our number one go-to tool, but now we have a better idea of what the client wants when we sit down to design a full-page comp. Full-page comps can take a long to time to create. With more conversations up-front and the use of these styling tools, we can cut that time in half – or more. Our client will have a better feel of the entire site rather than just the home page and sidebar. Development can begin while the designers continue on any other specific components and design elements.

To be a better designer, you have to get familiar with more efficient processes. If it's flat mockups they want then by all means go to town with Photoshop, but if it's a responsive website that needs to be launched in a short time, you may need to rely on some newer tools and processes. It's just as important to keep sharpening your front end skills.

Some more useful resources that we love:

http://getuikit.com
http://paulrobertlloyd.com/about/styleguide
http://clearleft.com/styleguide
http://webstiles.namanyayg.com
http://sparkbox.github.io/style-prototype/

 

Share:

About The Author

Practice Manager
Michelle manages Cardinal’s User Experience and Design practice nationwide.