Before you read any further, please realise that this post is in no way a dig at graphic designers! I have the upmost respect for talented graphic designers, some of the pieces they produce are truly amazing and I only wish I could be as creative and as talented as some of them. Now that the “disclaimer” is out the way…

There is an overlap between the skill set of a graphic designer and a web designer – creativity, colour theory, creating unique and visually appealing designs etc. However when it comes to web design there are an abundance of extra skills and knowledge needed by the designer.

I have recently taken on a project where the client told me that they had a graphic designer who they wanted to design the site and that they only needed me to code the site – sounded good to me at the time. It was only after looking at the mock-up of the site that I actually realised the big differences between the two trades. There was a lot in the design that I proposed we would have to change in order to make it usable, accessible and updatable via CMS with minimal pain. Here are just a few of the issues I found.

Screen Size and Browser Size

Before a graphic designer plots their layout do you think they consider screen size or browser size? If they do, they have either done a massive amount of research or have designed web layouts before – making them a graphic/web designer.
In my case, the mock-up consisted of a “floating window” of the site’s content in the centre of the browser window. The “floating window” effect was the aspect of the design that client liked best.

Floating window effect

Now that is all well and good, providing that the site was to never have more content added and the existing content was minimal enough so not as to appear cramped inside the window. The design was for an ecommerce site – a site that would be updated regularly and new content added.

On the plus side, the width of the mock-up was based on a 960px grid – I’ll be honest I was surprised.
Maintaining the floating window effect was my major issue with this design, I almost cried when I saw it – being the guy who was building the site, I was fully aware of the problems this could cause, problems that a graphic designer probably wouldn’t have even considered.

The height of the window would have to depend largely on the end user’s browser and screen size in order to maintain the floating effect and to keep the base of the frame above the user’s fold line. As web designers we would be aware that there are massive differences in not just user screen sizes but also browser sizes, for example the fold line in Google Chrome is a lot lower than it is in say Internet Explorer.Add any toolbars to the user’s browser and the fold line moves again. Would a graphic designer have considered these things when designing the site?

Now this floating effect could be done using CSS and percentages, but what then happens to the content inside the window? This will need to change in size depending on the size of the window, will a much smaller window result in an unreadable font size, will content become too cramped etc? My big issue was that this is an ecommerce site – which tend to contain a lot of content, and new content added regularly. It would be almost impossible to maintain this floating effect for this type of website – ensuring the base of the window was always above the browser’s fold line.
However we came to a compromise on the window effect, we would include the frame in the site but not worry about the “floating” effect – as after all if you are building an ecommerce site some pages will invariably be much longer than others and fall way beyond the fold.

Usability & Accessibility

When a graphic designer is planning their latest piece of artwork, their greatest concern is how the piece looks and potentially any message it conveys, they don’t have to worry about whether it is usable. When a web designer is planning their latest design, as well as considering the look and feel of the site, they also have to consider usability and accessibility.
Fonts

A web designer will view the content of the site as the most important aspect and will generally design the site around the content. They will consider typography carefully, everything from font size, line height and line length to ensure the content is as readable as possible. They will tend to stick to web-safe fonts and are fully aware of which are the best to use.

It is unlikely that a graphic designer will be aware of web-safe fonts, or even consider them. In my experience, I find that graphic designers will tend to adjust the content to fit their design as opposed to designing the site around the content.
In my case, the graphic designer had used non standard fonts for all headings across the site. This left me with a choice – change them to a safe font or use images for all the headings – meaning larger file size and longer downloads plus an accessibility issue for visually impaired users.
Links

Does a graphic designer consider how hyperlinks stand out from content and headings within a site? I’m sure a lot would, but do they also consider the active, visited and hover states of links?
Updateability

Does a graphic designer consider any potential future updates to a site when designing a web layout? In my case, they had clearly not. The front end of the ecommerce store had allowed for four product categories, each with an image link to the relevant pages. I asked the client if it was likely they would be adding anymore categories to the store in the near future. Their answer was yes. Now based on the graphic designer’s layout, they would have had to have redesigned the store homepage completely to add any new categories – which they wouldn’t be able to do themselves via the CMS – meaning they would have to rehire me or another developer every time they wanted to add a new category.

This is not a Dig! As I mentioned at the very beginning of this post, I am in no way whatsoever having a dig at graphic designers or the designer I worked with on my project, just simply trying to point out some of the major differences between the two trades. The designer I worked with was clearly very talented, his work did look great; it just wasn’t great for the web.

In my case, the client absolutely loved the graphic designer’s layout – meaning I had to play the “bad guy” by picking apart the aspects that wouldn’t work online – this whole process in itself took more time than it would have done had I designed and coded the site myself.

I guess the point of the entire post was to not only point out some of the differences between web and graphic design, but to act as a note of caution to designers/developers who agree to code somebody else’s design before seeing it first.