web design process in 7 steps
Web design is a bit like running a marathon. You are constantly perfecting your design until you reach the finish line and are greeted with a happy client.
The design’s success depends on how well you combine elements — lines, fonts, colors and textures — to communicate a company’s mission. The attention to details is extremely important during each part of the process!
These 7 steps demonstrate exactly what you should pay attention to while racing to the finish.
Detail 1 – the design brief
To understand client expectations, first look at the website examples they give in the brief — a picture can be worth 1000 words.
But don’t forget the client’s words as they are just as important. I look for key sentences in the brief describing the company’s intentions:
- We’d like a design that has an artistic feel but is still easy to use and won’t be difficult to make it work with other future elements of the website.
Then, write keywords that will help keep me on track:
- artistic feel
- easy and fast to use
- won’t be difficult to edit
- elements that attract your attention
- “typical” navigation that allows you to quickly get to the content
- most content on the home page
Detail 2 – technical requirements: programs, dimensions and usability
The program you use depends on the visual results you want to achieve. In Fire Exit Theatre, I was going for a rough textural feel with imperfections.
For these types of projects I always choose Photoshop as it’s best for creating patterns, using various overlay methods and painting using masks.
After I’ve chosen my program, I look at the client’s technical requirements from the brief:
- We would like to create our web site using the 1140px grid. Meaning the design should have room to compress to 960 (for 1024 x 768 monitor).
Check out 1140 CSS Grid for some awesome web design grid resources!
The grid helps with usability and readability which are top priorities of your web designs. In this design, I created usability by:
- creating structure with big headers
- using a newspaper-like grid divided by dotted lines
Detail 3 – balancing personal with client expectations
It can be difficult to create a design that pleases you as well as your client. It is (usually) a mistake to design a site that is too personal. But there is one rule you should follow — if your design pleases yourself then there’s a good chance others will like it too.
As a professional designer, it’s important to like the specific elements we choose like textures, photos, icons, web fonts and the like. The trick is implementing these elements so the client’s goals and expectations are met as well. There are many times you will come up with an awesome graphic, but if it does not blend with the overall site feel then store it away for another project.
If you can’t bring yourself to get rid of the graphic, then play around with it until it fits. For example, I bought a photo of a burning match on iStockphoto and separated parts of the image from the background then added shadows and transparencies.
Luckily for me, the client liked it but had he not, I would have told my great idea, “see ya later.”
Detail 4 – creating multiple versions of your design
You are not just designing for yourself and the client but for a number of viewers — be mindful of the target audience and overall site function. For example, Fire Exit Theatre is an organization for different types of people thus it should have some kind of cultural neutrality. It’s basic function is to share performances, sell tickets and show posters.
A great way to achieve the right design is by creating multiple versions of it. I often design different mockups that range from fun to subtle. In the first version for Fire Exit Theatre, I went for a “unique” quality, then resigned a few elements to make it more subtle.
After a day or two with my first concept, I saw its weaknesses and worked to improve them. I removed the seats which allowed me to extend the page vertically. I used a newspaper-like grid to improve information flow and used a more ergonomic solution for text (dark on light).
As you can see, the final design gave the company’s mission more clarity which made for a happy client.
Again, it was important that I didn’t attach myself to the first design but I also didn’t abandon it.
Detail 5 – create surprise effects and contrast
Look for ways to create surprise effects and contrast as you push your final design. Most viewers stay on sites that incorporate simple tricks — intriguing concepts, surprise visuals and nice contrast.
In Fire Exit Theatre, I combined paper with fire because it created dramatic tension – similar to a dramatic movie. This combination gives the impression that the paper will catch on fire while the fire leads the viewer’s eye to the company’s name — EXIT. Your effects should be clear, expressive and surprising. In this case, the huge match gave the design a wow factor.
But you don’t have to “catch your design on fire” to create a surprise effect — you can add smaller effects. In this case, I added a light effect to the spotlights.
And for contrast, I played with textures like on the bird.
Detail 6 – stay moderate
As the saying goes, after a storm there comes a silence. You’ve created solid design mockups and now its time to calm things down and bring it all together. It’s likely a client will not identify with every element you incorporated. What should you do? Take the elements out.
For example, the theater spotlights and match were dramatic enough so I decided to keep other design elements more subtle.
Detail 7 – care about the final touches
As you can see, I care a lot about the details from selecting the right fonts to selecting the perfect background. Just when I’m seeing the finish line, there is no reason to slow down — it’s important to tweak and finalize the overall design.
For example, I felt it was necessary to fade the background into darkness.
I also improved the horizontal bar by softening gray shades of the city and strengthening contrast around the “tickets” text.
And when all seemed finished, I took 3 steps back and looked at my design thinking, “what is missing here?”
And yes, I found something missing – in this case it was the nails. 🙂
You can have these rewards too if you practice, practice, practice these 7 detailed steps. 🙂
Do you have any tips or questions? Post your question.