Design Presentation, a Departure from Photoshop

Wednesday July 09, 2014 Tagged with: , ,

Responsive web design continues to evolve but the process of presenting and developing those designs is struggling to keep up. High fidelity mockups, lovingly crafted in Photoshop are a landmark of a time when websites existed in a static space, a fixed width. A time when visual effects like drop shadows, gradients and rounded edges were cut from a Photoshop file and placed on a webpage.

Today’s web users demand a smarter internet, one that functions well on a mobile and is aware of the available dimensions. A site that puts information first and utilises the languages of the web to present that information in a pleasant and adaptable manner.

Of course, Photoshop, like Illustrator, still has a place in the process of web design. Many graphical elements still need to be constructed with specialist tools, however these are specific pieces of imagery as opposed to large images representing an entire web layout.


Let’s get to the point, why is presenting a static, web mock-up to a client an unintuitive method in the current era of web design

Getting the obvious out the way, sending a series of static PDFs or JPGs to a client for review
fails to communicate the adaptable aspect of your design. Your client has her tablet and mobile phone present because they’re eager to see their proposed design work on the devices they use most frequently. the images are simulated and based on an ideal result which doesn’t use the technology present in the final design.

It is difficult to communicate scale in the absence of a web browser context. Some designers place a static image within a basic html frame to provide an insight into the dimensions of a web design. By providing a series of images you have no control over the environment (more specifically screen size) those images are being displayed, which can lead to a false indication of how large or small the elements of the design are.

High fidelity mock-ups take time, on average you can be looking at 3 hours to construct an initial homepage and 1-2 hours for additional pages. The mindset is that the designer is trying to answer all the questions in this design as to get a quick sign-off, naturally. If you are presenting multiple designs then this time can be multiplied, additional time can be contributed to the client requesting further alterations and we can all agree that tweaking a design in Photoshop can be fiddly.

Assumption vs Accuracy
A static mock-up is a fiction, an assumption that the end result will look like this, when viewed on a most/all web browsers on a screen size this big. In reality though, the creative environments offered by Photoshop and the web browser are worlds apart, simple things like type rendering and drop shadows take on different appearances. The development process can also highlight issues which were not confronted or needed to be confronted in the realm of Photoshop. Do we sacrifice quality code for the sake or validating a Photoshop mock-up, which has the priority?

A new workflow has emerged which seeks to resolve the above issues, transitioning to this new method will prove taxing at first but the rewards are great, streamlining the process and alleviating the pain of amending high fidelity mock-ups.

Separate Style from Layout

Style Tiles ( ), introduced by Samantha Warren, can be thought of as a digital brand board but with an emphasis on actual interface elements, patterns and hierarchy.

An example of a Style Tile as featured on the Style Tile website

An example of a Style Tile as featured on the Style Tile website

A style tile will present the colour schemes, type treatment and atmosphere of a design without the burden of being applied to a defined layout. the visual aesthetics can exist independently which significantly reduces the time needed to make amendments.

“Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
 An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?”

~Samantha Warren,

By their design, style tiles provide no indication of layout, how do we present crucial user experience information?

With the wealth of powerful, front-end development frameworks available, a responsive wireframe can be employed to present the skeleton of your design. Tools such as Bootstrap or Skeleton can quickly flesh out a wireframe without committing to the finer details that styling would burden it with.

Skeleton has been around for years and remains a popular choice

Skeleton has been around for years and remains a popular choice

The wireframe crucially provides a realistic structure that moves and responds to the client’s many devices. The client can witness the hierarchy of information and how elements fall underneath or alongside other elements. Optionally, upon approval the wireframe can be revisited to form the building blocks of the final build.

Selling these two fragments of a design as a genuine proposal can be met with confusion so it is important to inform your client in what they are going to see in the design process. A client who is expecting to see high fidelity mockups might struggle to envision their design from a series of colours, fonts and black rectangles. A little client education will go a long way and explaining the benefits of time and cost should help them adapt to this new method of design presentation.
Keeping your client in the loop throughout the process will also give them confidence that they’re retaining control of the product, they’re not expected to sign off two separate puzzle pieces without seeing the picture build over time.

Changing a process that has worked for so many years is extremely difficult. The Style Tile/Wireframe process may also be overkill for the majority of your clients needs, or the client may specify absolutely that they be presented with a best-guess visual. The methods above are but an emerging workflow to tackle a time consuming problem, why not dabble in the world of style tiles with a client and see if it works for you?

Copyright © 2014 Cirtinion | About