Chorgox Mongox: Photoshop’s Role in a Web Design Workflow

The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the “go-to” tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why.

What is it Good For?

Technically speaking, Photoshop is an application for manipulating imagery (forgive me for stating the obvious there) but it’s also packed with tools for building graphics from scratch. Shape, vector, type, fills and effects, all of these (and more) lend themselves very well to constructing graphic layouts.

Not too long ago, web browsers were incapable of directly generating these kinds of effects themselves, but they could display bitmap images perfectly well. In order to explore graphic design within a browser it was only logical to reach for Photoshop, create your visuals, save them as images and use them within a web page.

Gradients, shadows, patterns, angles; all easy to create with Photoshop’s tools – not too easy to create with anything else.

Building for the web was also relatively complex (far less streamlined than nowadays) so mocking up a layout in Photoshop was always going to be easier and quicker than battling with Dreamweaver. Why wouldn’t you design in a graphics application, get approval from the client, then actually build for the web? Today’s designers have grown up using Photoshop because it offered the quickest way to visualize a hi-fidelity design concept.

kuhboom.com: Densely textured web designs will have you reaching for the slice tool.

The Legacy of Print Design

Back when the web was an emerging medium there were no “web agencies”, so the task of crafting it fell to print designers. These guys did what was logical; they took their digital print design experience, values, techniques, processes and tools, then applied them to this brave new world. They effectively ported print design to the screen, so the workflow already existed:

All that needed altering was the final output. As such, Photoshop witnessed the changes and went along for the ride, further rooting itself as the graphic designer’s best friend.

What are its Limitations?

Times they are a-changin’ (as Bob Dylan said). The web is a different place these days and Photoshop’s role in the process of designing for that web is also changing. Why?

A big part of the issue lies in technological advancements which have driven huge change in web design over recent years. We’ve seen the internet grow from a library of static documents to an interactive pool of services and applications. Network providers have spread their fingers into almost every corner of the globe, bandwidth and speed have increased to science fiction-like levels. Internet enabled devices such as smartphones, tablets, even watches, are manufactured affordably and rapidly. All of this has revolutionized the way in which we use the web – and it’s drastically altered our perception of how we should be designing for it.

A Fluid Web

Print designers begin with constraints (the fixed dimensions of a page) then design within them. When first designing for the web this was also a logical starting point; establish a fixed canvas and work inwards. To figure out what those fixed dimensions should be, designers had to make assumptions about end user screen sizes. Very early on 800x600px was most common. Later, 1024x800px was the norm. Working to a grid of 960px made sense because it fit most screens (larger screens were rare, owners of smaller screens would just have to upgrade eventually) and was divisible by a range of column widths.

These assumptions were wrong then (forcing a user to adjust their browsing to your design?!) and are even more so these days. How big is a web page today?

From Brad Frost’s This is the Web

Back in May 2010 a chap called Ethan Marcotte wrote about a brilliant idea he’d conceived. Taking existing technologies and methods he proposed an approach “Responsive Web Design” which utilized fluid layouts (not fixed), flexible images (which grow and shrink with the layout) and CSS Media Queries (which allow layouts to change depending on the screen size and other factors).

With these ideas the web changed, irreversibly.

Thanks to Ethan’s concepts, web designers have come to realize that they should be thinking from the content outwards, not the page boundaries inwards (though it should be noted that this approach isn’t compulsory). We don’t know how big a web page is, so we need to design our content to fit into whatever boundaries it’s faced with. Think of web content as being like liquid; capable of being poured into all manner of vessels.

Herein lies a problem for Photoshop. Photoshop inherently works to fixed boundaries. Shapes, type and objects within its layouts are fixed, whereas web pages increasingly aren’t. Producing a comp to present to a client used to be quickly achieved in Photoshop, but how can you effectively present a fluid layout as a static snapshot?

The Next Web as presented by mediaqueri.es

The Problem With Pixels – I

Typography is another great example of print designers trying to force constraints onto end users. Every user’s browser gives them the power to set their default type size; after all, some people prefer smaller lettering, whilst others might prefer an easier reading experience with larger type. By default, browsers usually set type at 16px, so unless a designer states otherwise, or a user alters the default, that’s how big body copy will be.

Print designers, however, have real difficulty in relinquishing this control. “How can you let the user define the size of the type?! Have you any idea what that will do to the rest of the layout?!”

Locking down the font-size within a web design (through CSS) will go a long way in preventing anything unpredictable from happening, but it’s hardly user-friendly. These days, it’s considered best practice to size page elements and typography using ems instead of pixels; relative units of measurement which are based on the default font-size. Therefore if a browser happens to have a different default font size the whole design can flex in response to that.

This flexibility, again, highlights the limitations of designing static comps in Photoshop.

The Problem With Pixels – II

Browsers are developing very quickly these days and images are no longer needed for many effects on the web. CSS is capable of producing accurate gradients, curves, skewed objects, shadows, alpha transparency (the list goes on) and this is just as well given the dawn of Retina screens. Retina displays (or more accurately: high pixel density screens) have really thrown a spanner in the works for web designers. Retina screens have twice as many pixels as normal screens, allowing them the luxury of rendering everything super-sharp. Anything pixel-based, however, is simply blown up twice as wide, twice as high, resulting in comparatively lower quality.

In order that websites retain their sharpness, designers are having to rely as much as possible on what the browser can render itself. In fact, the recent trend towards “Flat Design” is (in part) a reaction to this purely CSS-based web design.

All this takes an enormous chunk of what Photoshop does (producing bitmaps) out of the equation.

Designmodo’s Flat UI kit

Performance Based Design

As we’ve mentioned, the web has gone truly global thanks to the spread of mobile devices. It’s forced us to realise that we can’t know the circumstances under which our content is being accessed. We don’t know whether our end user is sitting on the couch with a Kindle, paragliding with an iPhone or running through the Gobi Desert with a MacBook Pro. We don’t know how big their screen is, what their processor is like and, equally, we can’t assume to know how fast their connection is.

We’re starting to realise that performance is a fundamental part of designing for the web. Again, images play a role in this. Every individual asset (be it an image, a script, a document, whatever) which is pulled from a web server is costly.

Instead of keeping files like images and fonts in a folder called “assets”, I’m going to rename the folder “liabilities”.

— Jeremy Keith (@adactio) February 18, 2013

Not only should they be optimized to be as small as possible, but they should also be as few as possible. Browsers are limited in the amount of assets they can simultaneously download, often to just two at any given time. If your web page holds hundreds of individual images they’ll form a bottleneck, ultimately delivering a negative experience to the end user.

This can be helped, by combining image files into single sprites, but (again) retina screens force some kind of backup plan.

Instead, effects are better achieved with CSS, icons can be embedded through web fonts, logos can be implemented as scalable vector graphics, all of which spells the end for the slice tool.

Doubling of Efforts

Back when the web designer’s workflow was effectively the same as print with the internet tacked onto the end, designing layouts in Photoshop was an integral part of the process:

Familiar tools meant relatively quick layouts.

Presenting static comps to the client was much the same as presenting print layouts.

Pixel-precision meant that measurements could be directly applied to the browser equivalent.

Actual assets were sliced from layout comps for use in the web page.

These days, with less of the final result relying on assets built in a graphics application, designing a whole layout in Photoshop effectively means doubling your efforts. Build it once to get an idea of what it will look like, then build it for real. Then throw the PSD away because it’s no use to anyone.

Adding to the Toolkit

Adobe were either resisting change, or simply trying to be accomodating, when they introduced a few web design features in CS6. The CSSHat-like CSS output panel enables you to grab code from your visually created page elements. They also made it possible to paste a hex color (copied from the browser) including hashtag (#ffffff for example) into Photoshop’s color picker without throwing an error.

Paragraph styles (a bit like in InDesign) were introduced to give more global control over typography. Lorem Ipsum found its way in as a standard feature and now you can even choose common device dimensions as document presets!

But we’re in denial here – there’s a big blue elephant standing in the corner of the room.

It’s Time for a Modular, Flexible Workflow

What we’re actually looking at here, isn’t an application which fails to fit web design, but a workflow which is no longer appropriate. In fact, even before the web went all fluid and squishy there were fundamental flaws in the Photoshop web design process as we’ve described it. There was a tendancy to create pixel perfect renderings of web pages before building could even begin. And then, because of the obsession with getting everything 100% perfect in Photoshop, there’d be a similar fanaticism for achieving identical results in all browsers. It’s taken us a long time to realise that web pages don’t have to appear identical in all browsers!

One serious issue with aiming for perfection in Photoshop arises when the client gets involved. This workflow makes it all too easy to become stuck in an infinite loop of clients making pixel–pushing suggestions, inevitably losing sight of the big picture.

What’s needed is a more modular approach to web design and Photoshop can absolutely play a part in that. Consider first the planning stage; gathering of information and content, sketching relationships between areas of the website as a whole – a crucial part of this modular process, but best carried out away from Photoshop.

Wireframing takes the process further; laying out rudimentary interface elements, establishing visual relationships, hierarchy and basic interaction. Again, this isn’t a task Photoshop carries out very well, instead making way for applications such as Omnigraffle and Balsamiq, even Illustrator (and there are many more).

Photoshop lends itself far better to aesthetics. It can’t describe layouts fluidly, but it can explore colors, textures, individual element styles, typography, atmosphere and mood. Style Tiles is a concept suggested by Samantha Warren. They’re essentially Photoshop mood boards, but highlight a way of isolating and presenting the aesthetic phase to the client.

The next module in this workflow is prototyping; building basic, but functional layouts for the browser. And no, this isn’t Photoshop’s cup of tea either. In fact, Adobe is busily working on an alternative line of applications to help out here. Their Edge Tools aim to offer a familiar canvas interface, which outputs fluidly for the browser; ideal for rapid prototyping, but still very much a work in progress.

Each of these modular stages takes an aspect of the design process, isolates it and heavily involves the client, giving them plenty of opportunity to sign off on each stage without affecting the others.

Do note that this is a suggested workflow, nothing is written in stone where design is concerned and there’s often more involved than these general stages. Which leads me to my closing point.

photoshop-and-web-design-modular-workflow

Whatever Works!

Any design process is extremely personal and what works for someone else won’t necessarily work for you. There are plenty of people calling for an end to web design in Photoshop, campaigning for a browser-based workflow instead. The fact is, if Photoshop works for you, use it! At the end of the day, we’re designers – if we want to spend hundreds of man hours pushing pixels and polishing our Dribbble portfolio, let’s allow ourselves to luxuriate in that!