Design mock-ups have always played a major part in web development. Clients are very focussed on visuals and look hard at these designs to make sure you’re about to deliver the website they want. This means that design mock-ups, like in a print project, become part of a solid sign-off process.
This method worked fine when everyone surfed the web on their desktops.
The problem with applying this delivery process today is that the functionless, flat mock-up you’ve spent a week designing represents what the visitor will see in only a fraction of user cases.
Let’s be honest, you can’t create a visual for every device and screen type out there, so that mock-up can no longer be seen as part of the sign-off process. Instead it is now relegated to becoming - at best - a concept; a general direction; an idea.
Now we could spend weeks amending this concept, tweaking gradients and font weights until we have a pixel perfect piece of artwork to place in a folder and forget about. Or we could find a more productive use of our time.
Do Mock-ups Actually Work Nowadays?
Web pages aren’t really pages anymore. They’re a collection of content groups that are prioritised, omitted and swapped around depending on what device or user situation it’s being viewed in. With that in mind, we could sit and stare at our shiny mock-up for years before we had any practical idea of how that layout would perform in the wild.
Maybe the best way to test the layouts would be to build them in the rough and see how they actually behave at certain screen sizes. Instead of spending days creating and refining a flat piece of artwork, use that time building the different page elements and modules and refining the layouts.
Get Prototyping
Up until quite recently, the prospect of building layouts as part of the design phase would be quite a difficult change for most designers.
Designing “in browser” has become more popular recently, however, hand-coding multiple responsive layouts just to see how they behave may only be practical for a handful of designers. But don’t boot up Photoshop again just yet. It seems some software developers have also seen this problem.
Responsive WYSIWYG editors such as Adobe Edge Reflow, Gridset and the soon to be released Macaw enable designers to create living breathing layouts nearly as easily as our flat mock-ups.
After you’ve set some breakpoints you’re able to drag elements onto a grid and define their appearance and behaviours relative to each device width. Once in place, each breakpoint can be quickly clicked to switch between prospective screen sizes and tweak the layouts as you see fit. As far as image editing is concerned these programs work very similar to Photoshop so the entire aesthetic can be developed in tandem with the working layouts.
The layout can then be staged to the client in the browser to kick off a different kind of iterative process. A process where they are scrolling, navigating and resizing a working model of their new website and providing much more valuable feedback which can then be incorporated into the proper build.
Not only does this method involve the client more in defining the information architecture and user journey of their website (after all, they know their customers better than we do), but it also helps to identify potential snags much earlier on. All of those “looks terrible on a Nexus” moments get looked at within the design phase instead of cropping up in a post-development QA.
At the end we publish a website that has actually been ‘lived with’ before it has gone live, which can only result in a more refined and focused product.
Want to know more about our approach to web design? Get in touch to find out.
