Learning The Web Design Process

How to create the best for your client and stop a lengthy feedback process.


Having worked in the web industry for quite a long time, I often find myself training up young designers fresh from college. They have lots of flair and enthusiasm but there comes a point when it is time to move up to larger jobs that I realise they haven’t been taught the creative process from a commercial perspective. Although this does come with experience I find that learning this process early jumps them up to the next level faster. As I was training a very talented junior designer recently at our agency I thought it worth sharing my thoughts with others, it’s not a bad thing for us all to revisit once in a while.

So…

1. Do the quant

Quantitative research; or collecting all the factual data available to you.

Such as if there has been a current website audit, proposal or technical specification of what the website is to do and what it is to achieve, architecture and wireframes or prototype, personas or customer profiling, any current marketing statistics, check google analytics; look at the bounce rates, the heat map and get a feel for what people are doing, a design brief, brand exploration. Don’t worry if all this doesn’t exist it is dependent on agency process and size or budget of the project.

It may be that you were instrumental in taking the design brief so make sure you have the information you need, I have my crib sheets (Design Brief, Customer Profile*) that I fill in when I meet a client.

*courtesy of V Ryan. World Association of Technology Teachers.

The same with brand exploration, if possible have a workshop with the client, go to their premises, have access to their brand guidelines, photography (discuss if they will be commissioning new photography) and printed material. Find out what makes them tick; to get them to open up it is good to introduce gut tests or demonstrative tasks such as bodystorming.

Note: Bodystorming is about role-playing the lives and relationships the end user has with your client/clients website and translating this to relationships with the website to be. However this article takes it a step further putting the designer in-situ for much deeper observation and findings.

2. Next comes the qual

Carry out qualitative research; or exploratory research. I call it the 3'i’s.

Immersion. Read, write and immerse yourself in all the data you have collected above as well as combing through their current website and checking competitor and peer sites. Basically get your hands on anything you can and if you don’t feel you have enough, now is the time to do something about it as it will show in your design.

Inspiration. However you want to be inspired be it a mixture of in your head, in the garden, down the cafe, on your computer, get doing what designers do best. Being creative. Having carried out the immersion technique your inspiration will be shaped by the values of your client, not your own.

In-situ. Get out, don’t feel confined to your desk, that cliché is very true… ‘Inspiration is everywhere’, and you may understand your client’s audience better if you hang out where they hang out, buy what they buy or experience what they experience.

3. Then the work begins

Ideas. Usually it’s good to move away from the computer and scribble down some ideas, but do it however you feel comfortable and don’t hold back.

Style board. Having immersed yourself in the quant and qual create some parameters; what fonts represent this client, what colours, what style, what imagery. This is more than just a mood board as it translates the brief into tangible elements. This style board shapes your design, if not adhered to you end up designing something in your own style not theirs.

Concepts. Then start on the initial concepts in whatever is your software of choice. These are rough drafts so try out a couple of ideas, work them up far enough until you have a clear direction. Don’t worry about the wireframes at this stage, you did immerse yourself in them originally, right now you are going for an emotional engagement.

Wireframes. It may be worth noting that if you do not have wireframes or prototypes perhaps if the website is based on a pre-built system for example, then it is up to you to plan the elements from the specification into your designs. These don’t have to be more than hand drawings but make sure you know each different page type that needs to be designed and that each of these page types draw the user to the right conclusion.

It’s worth remembering the marketing technique AIDA:

· Attention — what is attracting me to the page
· Interest — what is this site informing me
· Desire — what makes me want to know more
· Action — how and where should I act

A web designer touches on a heap of different aspects of the whole design process, visual design of course, but if you do not make yourself aware of the whole user experience from the interface to interaction, to outcome then you may as well be designing a print page.

Ok,

I would generally say you need to give yourself time and headspace to carry out points 2 and 3 together, then if you need to take a break do so before you start point 4.

4. Finally start on the layout of a design for presentation

Although I’ve glanced at the wireframes previously I now study them and cut them up to lay out in different responsive variations, remember you are not just colouring in wireframes, you are in charge of exactly how best to engage your user with each element to gain the required action. Numbering the elements is often a good way to make sure you keep the hierarchy.

So what are you waiting for… Get designing.

What to present. The homepage is a good page to present as it encompasses a lot of different elements all on one page but also work up an inner page making sure that you use this a little like a style guide, ie; showcasing further elements and as many text and interaction styles as you can. This will allow the client to experience in more depth how you are interpreting their brand and cut back on unwanted surprises further down the line.

Depending on the working method of you company and client you may be asked to present more than one design, however if you have carried out the process above it shouldn’t be necessary, you should have come to the best possible solution. By all means provide a few variations of your design if they present themselves and be clear that you are presenting the look and feel, and that the next stage will show the different device sizes and exact page types.

It’s always good to run your designs past your marketing and development teams for them to provide constructive feedback from their positions prior to presentation.

Whether you are handing your work over for someone else to present, meeting in person or sending designs to a client and having a conference call make sure you have fully written up the ‘Raison d’être’; go back through each point of the process and document exactly why you did what. What was the inspiration behind it, why did you use the particular fonts, colour and style? What are the reasons behind the layout, why are the elements positioned and styled as they are? How will the user feel and ultimately how does this design translate all the requirements and values of the company into a working design that will meet the required outcomes and goals? Yes, it’s really that serious!

5. Feedback

So, you have the feedback from the client and hopefully it isn’t too much. If you went through the process and clearly explained it then this will have narrowed things so get on and get the changes signed off.

Page types. Now you need to go back to the drawing board a little. Bring in all that quant, immerse yourself again and start on each different page type. These are just as important so do keep your attention to detail and UX eye up.

Style guide. Continuity across your page types is imperative and using your style board throughout should keep this consistency. However once you have finished all the page types create a fully up to date ‘style guide’, documenting to the client and developer every style, font and colour you have used. From what menus and their drop downs look like, to what the heading and sub heading styles are (H1 to H5), text styles for optimum usability and engagement, links, quotes, buttons, etc. Make sure your fonts are web fonts and you have set a colour palette, covering solid and tints. I sometimes keep this as an extension of the inner page I initially designed so that it can be seen in context with header and footer.

Finally, take absolute pride in your work right through to launch, you are obviously a great designer or you wouldn't have been chosen for the job so remember:

You are the style guardian
· So don’t let it go until you are happy
· Hand over tidy files; remove waste, group and label correctly
· Check the site against your designs once it has been built
· Check the content has been added to make best use of the styles provided
Job done!

Of course we don’t live in an ideal world and who hasn't had a client wanting to ruin their design, but I promise, the more experienced you get at this process the less frequently this will happen.

6. Some Post notes

To code or not to code. Some time ago I built websites in HTML & CSS and have a good working knowledge of it but still prefer to design not code. There has been a big debate about whether designers should dive in and code up their designs to give all involved the best understanding of what is to be achieved, although I agree this is a good idea and it does stop any ‘Photoshop fantasy’ don’t beat yourself up about it. The importance is to understand the parameters and flexibility of the web page from a coding perspective to make sure that you are providing buildable designs.

Learning to be responsive. It is more time consuming designing layouts for each different break point so reflect this in your time quote. However software has at last come onto the market to help us. Take for example Sketch, Macaw, Froont or Adobe Edge Reflow part of the creative cloud package, although tricky to learn once you get the hang of it, it’s like a resizable Photoshop in fact it’s an epiphany! As finally there are software tools out there for designers that mimics the pages of the web, not the static pages of print.