How The Role Of The Graphic Designer Must Change On The New Web

by 5 07/02/2012

Design aesthetics are important but when they compromise usability, it’s customers and ultimately your bottom line that will suffer.

For those who have been working with the web since the nineties, you’ll remember that in its infancy, building ‘web pages’ was to many a dark art, and afforded those versed in the practice some respect…

Usability pioneers

In those early days, building web properties was different. People appreciated that websites suffered some inherent constraints. Subsequently, if you were tasked with building a website, there was an understanding between designer and developer (if those two jobs were actually fulfilled by separate people) that things wouldn’t (and couldn’t) be identical to a graphic composite.

Despite being at the vanguard of a new medium, even at that point, good web developers understood that they were in many ways UX designers too. They knew what would work well, or not, for the user attempting to use and critically interact with the site in question on this new fangled worldwide web.

The double-edged sword of CSS

After high profile CSS based layouts for Wired (2002) and the CSS Zen garden (2003) appeared, it opened the door for more ‘print like’ designs. In the years since, graphics designers have become accustomed to designing a fixed width composite of a website, getting it signed off by a client and then handing the Photoshop files over to a developer (often outsourced) to achieve a browser wide pixel-perfection conversion of their graphical rendering.

This paradigm has been failing us

It’s easy to understand how this has brought about a comfortable process between design agencies and their clients; what the client sees is what the client gets. This has, in a great many instances, led to us failing our users. Graphical design has trumped other, more important considerations, namely usability and testing.

Hands up

Many developers, myself included, have at some point built web sites that they consider to have compromised usability considerations. It’s not that they didn’t air their grievances to relevant parties along the way. It’s just that aesthetics were given higher priority than they should have. Consider a typical exchange between developer and designer:

Developer: “Font size looks too small. 9px will be difficult for some people to read.”

Designer: “Leave it – any bigger and the sidebar doesn’t look even.”

Obviously, in retrospect, it’s easy to know that when you compromise your values, you only have yourself to blame for a poor end product. However, these are lessons we often learn for ourselves along the way.

The new paradigm: content everywhere

Whether you are a business owner, designer, strategist or developer, when you think of the web, if you’re still presuming a default 960px wide canvas, connection speeds measured in the order of Mbps instead of Kbps and a modern desktop browser, pretty soon you’ll be in for a rough ride.

I’ll state the obvious; mobile phones, tablets, TV’s are all being used increasingly to access the web. And while I’m at it, here’s another obvious point that bears repeating: a fixed width design, presuming a mouse and keyboard as the primary input devices, won’t cut the mustard in the future.

If that’s all you’re offering your customers, you will fail them as they struggle to get the most out of your web property using the smartphone, tablet or future device of their choice. If they can’t do what they need at your site but can at your competitors, guess who’ll be enjoying more business?

Obvious frustrations

How many product based sites do you see (fashion stores are typical offenders) with the option to hover your mouse over an image to get a zoomed view of the product? Did the graphic designer ever try that interaction on an iPad, Kindle or smartphone? Maybe they should? Maybe, tablets weren’t around when the site was built? If not, maybe it’s time to re-design?

That’s just one obvious example of why in the current climate, employing a graphics designer alone to create ‘desktop’ mock-ups in Photoshop before handing them to a developer to build and then hand to the client (or use yourself) with no user and device testing along the way, would be a mistake.

Ultimately, from a design perspective, there should be no holy cows. The questioning of any design decisions should be encouraged from all involved. Furthermore, when it’s evident designs are lacking from a usability perspective, there should be no qualms in changing the design. If the content is ever being changed to fit the design, you’ll know something has gone wrong.

Stop pointing the finger

We can’t merely blame graphics designers for the current situation, their job is to create beautiful visuals and the best ones can realize interfaces that look like art. However, we need to harness their skills and use them appropriately. Making a 960px wide ‘desktop’ composite for a web design, often without any real indication of the content or context associated, is not the most effective use of their talents.

In many ways, we have also reached a point where a graphics designers tools are failing them. Photoshop and Illustrator can’t deal with a dynamic canvas. At present the only true reflection of the flexible canvas we work on, is a browser window itself. But a designer isn’t necessarily a developer too, and can’t easily test their design(s) in a browser on multiple devices. The way forward is therefore probably more collaborative, designing more iteratively in the browser (with the help of a developer if needed) much sooner in the processes.

More on that shortly…

Focus on needs

Hopefully you would agree that usability is what users care about most. How easily can they achieve what they need to? Whether that is find information, buy products or contact you.

We should always think about fundamental questions before worrying about the aesthetic considerations (the size of logos and colors of sidebars for example):

  • What are my customers here to do?
  • How can I simplify their process of doing that?

Apple, currently the world’s most valuable company, has arguably triumphed primarily by simplifying tasks for its customers. How to mute phone calls, how to launch applications, how to unlock a phone screen. They obviously haven’t skimped on aesthetics either but you rarely get the sense when using their software that form has triumphed over function. It’s important that when we envision, design and test web properties we give usability the level of respect it deserves. On a web property it should be of paramount importance.

Back to processes

Currently, for many SME’s it’s typical for web projects to be created and launched through a process of:

  1. Visual design (graphics designer makes Photoshop composites)
  2. Visual designs are signed-off by client
  3. Build starts (this is the first point at which the developer gets involved)
  4. Testing (developer is told to make it look and work the same in every (desktop) browser)
  5. Handover to the client.
  6. Client fills site with their ‘real’ content (unbelievable but many times we build sites without even knowing what content will actually go in them!)
  7. Users on other devices struggle with X, Y or Z as they weren’t considered.

On the web, a user can change font size, interact by touch, mouse and stylus, switch to a different browser, change their screen orientation, size or device and we should be doing everything we can to test for and embrace these possibilities, not work against them. If the prior process looked familiar, perhaps consider something more like:

  1. Establish what users need; what are their core goals/needs when using the site?
  2. Establish/test the optimum way of achieving that goal (everyone can input here, as any user might do things differently).
  3. Get a low-fidelity version working in the browser and USE/TEST it with as many different people/devices as possible! Developer involved here if not before.
  4. Refine process with developer on multiple devices until the basic user experience is honed.
  5. Graphics designer adds their expertise: colors, design patterns, typography – perhaps creating composite ‘Style Tiles’ (http://styletil.es) rather than full-blown composites to reach a suitable aesthetic.
  6. Developer layers on the designer’s aesthetics.
  7. Re-test with as many users/devices as possible.
  8. Users enjoy site as their devices and way of interaction has likely been considered and catered for.

Admittedly, changing established processes takes courage and a surrender of some control; the process probably won’t be perfect first time out. There must also be understanding from everyone involved that the ‘design’ will adapt and change and appear differently on different devices but this is no bad thing and ultimately, the users will thank you for it; hopefully evident from an increase in sales, readership, subscriptions etc.

Let go of print

Until recently, the comparatively limited disparity of Internet capable devices has allowed us to create web properties that have hidden behind the rigid conventions of print; fixed, static and predictable. Now however, the proliferation of disparate devices has brought back into sharp focus the truly flexible nature of the web.

We must therefore rise to this opportunity of meeting many more customers wherever they are and however they connect to the Internet with an emphasis on their needs. In turn that means it’s now more important than ever that usability is considered appropriately when creating for the web.

Print Friendly

About 

Ben Frain is a technology writer and web developer living in Cheshire, UK. His book, 'Responsive web design with HTML5 & CSS3' is available now. You can follow him on Twitter @benfrain.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

5 COMMENTS

Joseph Putnam

Hi Ben,

I love most of what you have to say in this article but do have a question: Why do people approach web design so much differently than print (even though in this article you say they don’t). For example, print is mostly about laying words out properly to get articles and content read, but online people often try to cram everything possible onto every page that they can. This leads to clutter and no logical reading progression. Would it make sense to consider websites more like a print design in order to consider how to get things read than treating it like an entirely different medium (even though it is) which causes people to quite often sacrifice readability and thought progression? Not sure if I’m making sense, but I feel like there are times when people should think more like closely to print design and less closely to web design in order to create something readable and logical and to limit the amount of content they put on a single page. I’d love to know what you think about this.

p.s. Great post, and I’m going to be checking out your portfolio for a website design that I’m working on. Also just followed you on Twitter and Google+.

July 2, 2012 Reply

    Russ Henneberry

    Good points Joseph. For the most part, I think that print design has created a set of conventions that have been adapted to web design. Size and location of headlines, sub-headlines, captions and images. Typical location of ads, branding, etc. It seems like second nature to us today but these are all conventions that had to be invented at some point.

    For me, one of the dangers presented by the web is that it allows us to do so much more than print design. I think what Ben would say is that just because you can do something doesn’t mean you should.

    Would love your thoughts Ben.

    July 3, 2012 Reply

      Ben Frain

      Hi Russ, I’d replied yesterday but I must have replied to the post, rather than Joseph and it hadn’t threaded the response. All fixed now so I’ll delete my replicated content from yesterday…

      July 3, 2012 Reply

    Ben Frain

    Hi Joseph,

    Thanks for taking the time to comment. Well, I think there are a few things going on and as ever there are people doing things well and others not so much.

    One thought is the dirty subject of money; I would argue that with print, generally, the consumer has already paid for the content. From a transaction point of view, the ‘contract’ with print is that you buy the item first, then consume the content. The publisher has a simpler model in that if they sell enough units and have enough advertisers, it’s profitable.
    For the web, the majority of web properties don’t have a ‘pay wall’ system so they are reliant on advertising clicks (or associated sales) from the content to make things worthwhile and so sadly in some cases, revert to the maxim that ‘white space is wasted space!’. The danger in adopting that thinking comes from Read it later, Instapaper and the like; if you have quality content littered with too many adverts, people will find a means to ‘de-clutter’ themselves.
    However, just like print publications, the cream rises to the top and the ‘better’ web properties show the most class when it comes to providing a good experience and still selling enough adverts.
    However, ultimately in this post, I’m alluding to the instances where a site may be beautifully visually designed but just isn’t usable! When users are interacting with a site, the ‘wow!’ of initial beauty soon fades if they can’t do what they need to do.

    July 3, 2012 Reply

      Joseph Putnam

      Hi Ben, I’m totally with you on over-the-top designs. Some sites are gorgeous, but once I get over the initial “wow” moment, I realize the site is confusing and hard to use. The goal is to have a beautiful and useable site, but it’s never acceptable to sacrifice usability for aesthetics, in my opinion.

      July 10, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>