Graphic and Web Designers – working in harmony!

No Comments

I saw a comment on Twitter the other day and it made me think ‘Wow, that’s a great blog idea and it’d be easy to do too’. After I started writing it I was still thinking ‘Wow, that’s a great blog idea’ but I was also thinking ‘this is actually a bit of a bugger to do’.

(un)Fortunately(for me) I had already messaged the Twitter’er and well, committed to writing it. So here’s my effort and his Tweet that made me do it!

“Trying to find a good blog article for a mate which explains how a graphic designer and web designer work together on a site project.” @ThirdSectorForum

First of all, I’m making an assumption with the original request and assuming that it’s more  a web developer than a web designer and that it’s a graphic designer for web we’re discussing (ie the developing and passing over of a design into a functioning website).

This article is based on my experience of working in design teams and although this will vary from one company to the next, very briefly, the steps in developing a website can be summarised as below (I have omitted the to-ing and fro-ing for feedback and assuming it’s all running smoothly!):

The ebb and flow of a website design

Design Meeting

The client will have a meeting with the design team (usually the graphic and web designer) to discuss ideas, likes, dislikes and aims of the website to give the design team a good grasp of what’s required. This also lets the designers get a feeling for the client in order to design a look and feel that is hopefully, more than just a stab in the dark!


Generally after a meeting with the client, we will go off and develop a sitemap based on their requirements. While the designer is included in these discussions the flow of the site is generally down to the developer. Particularly with a highly functional website where navigation and communication between sections is of paramount importance.

Layout agreed

Grey box diagrams will be given to the customer for feedback to show where the navigation, logo etc could be placed (but with no actual graphics involved at this stage). Keeping the layout as simple as grey boxes allows us to all concentrate on the element that will make up the site rather than worrying about whether the correct colours have been used etc.

Design mock up

This is the stage where the graphic designer has the most input, they will draft a sample design based on the discussion with the client and consideration of the company branding.

Design finalised

After several rounds of feedback and adjustments, the design will be finalised and signed off. Once signed off the designer will pass over the design to the web developer to be cut into sections (such as logo, menu background etc) which leads me nicely into…

Design incorporated into website structure

Once the design is cut up, the developer will be able to incorporate the design into the skeleton website that he will have been working on. By skeleton we are referring to a functioning website that will have been devoid of graphic design up until this stage i.e the site will work functionally but not look as it should.

Tweaks and Finish

When the design is incorporated into the site the developer will send the site back to the developer for any final design tweaks or for any additional graphics that are required. Maybe get the designer to alter the CSS or alter images etc until it’s perfect.

Working in sweet harmony

That’s the brief description of how the build could go but as per the original question, I’ll explain a little more about the way the designer and developer actually work together in the first place.

I once worked on one site that had been designed by a company who had previously only designed for print. The design had a different layout for each page, navigation was in a different positions on each page and the design itself was inconsistent. Don’t get me wrong, it looked amazing but it was verging on not being very user friendly what with the navigation flying around the monitor at a rate of knots!

For an effective build, communication between all departments is the key – from sales, to design, to admin. It is crucial that the designer has a grasp of how websites (and users) work, what the common elements of a site are and an idea of how a site is built as much as it is important that the programmer understands that design adds value to a website and isn’t a waste of time!

For example, with an e-commerce website you need among other things categories, the boring bits (terms, delivery etc) and probably a search. While a design could look pretty without cumbersome categories, it wouldn’t be a particularly friendly shopping experience. On saying that a designer who doesn’t also build can be a breath of fresh air as they are not designing while also thinking “well, if I put that there it could be a nightmare to build” (well, we’ve all thought that at some point haven’t we!?)

To play Devil’s advocate, a developer needs to ‘get’ that the design is important and refusing to style something as it was intended because it doesn’t alter the output is not the point. For example, on another project I worked on with lots out tabular results, the developer huffed and puffed when he was made to follow the design because it was irrelevant to the actual results. He was unable to see that it was affecting the feeling of the website and was making it look less professional and complete.

I’m trying to show that as with all domestics, there are two sides to every story. The most important factor in completing a website in  as smooth a process as possible is communication and an understanding of the previous and following steps that happen around your particularly phase of the development. A website doesn’t end with the design any more than it is only about the programming. Communicating, respecting and working in sweet harmony – well, that’s the idea at least 😉

On a similar thread, how about an article on how designers and SEO’s work together…I think that’s a post best written by Calum…just prepare yourselves for a rant…

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Fields marked with an * are required

More from our blog

See all posts