Web Design Process
A Tried and Tested Web Design Process
Here I will attempt to explain the reasons behind great web design, and why you will get what you pay for. I treat the web design process in the same way that I treat graphic design, which is to plan the design first, investigate ideas and implement them using the right software.
Adding content into a theme is not web design, it is simply facilitating. There are many web building packages around with hosting companies, these have been made for people who won’t or can’t afford a pro designer. If you want to do web design as a profession, you should be shying away from pre-formed templates as you are simply filling in the spaces into someone else’s design. If you want to create great web design then you need to think about a web design process.
(I am speaking to two kinds of people here – web designers who are new to the job and also to potential clients who are thinking about using a professional service.) Web design doesn’t have to break the bank, and any outlay you have should soon be reaped back by increased sales.
Or:
If you are thinking about moving on from your DIY site and want to use a pro designer, then you will need to expect to pay a professional rate. Below is a list of steps that I employ and why professional web design and indeed your branding in print too does not cost 50p.
1. Take the brief from the client, investigate ideas and plan a layout
I will ask questions about your business, your target audience and the feel you may want. I will investigate ideas ready to plan a layout.
2. Sketch a layout and include areas for navigation menu, key text, logo and images. Visualise.
My web design process can hardly begin without a sketch.
A layout will be sketched for desktop, tablet and mobile views. With a plan, you can be sure that all your requirements are included.
3. Understand human interaction and web usability, create graphics that are eye-catching and aid the message of the site – not there just to look pretty
Everything on the page will be there for a reason. A good read is “Don’t Make Me Think” by Steve Krug
4. Lay out the site design in Photoshop, Fireworks or Illustrator, using colours that work together
Using the sketch as a guide, a photoshop design will be created, illustrator graphics designed and put into the layout for the client to see and approve.
5. Build the homepage design in a powerful, flexible programme using your design as a plan
A choice is made whether the website is created using powerful tools like Dreamweaver. If WordPress is going to be used, then your theme needs to be created to match the digitised design. Now the web design process is coming into its own.
6. Responsive web designs need more work to be sure they work on a variety of devices.Add more media queries where necessary
A Responsive Website can be created in any web building software such as NotePad++, Dreamweaver and others. Or you can create a site with a responsive theme in WordPress. Extra CSS is needed to make sure the site displays correctly on smaller devices.
7. Test the site on a variety of browsers, both PC and Mac and mobile phones and tablets.
As you build your website, you need to regularly test it’s performance on as many devices as possible. Browser software is free to download, so there is no excuse not to test your site in at least the big 4. If you can afford to buy a Mac and a PC, then this is recommended. Speaking nicely to friends and asking them to test on Macs and other devices you don’t possess is a good idea.
8. Verify the site on Google, Yahoo and Bing, and write good copy that makes sense to humans, and fits SEO criteria
If you are not good with words, then you will need to educate your client to write good copy. Better still, go to a professional web copywriter.
9. Complete the site by launching it and give it a final test while live.
The last part of my web design process is not to be rushed. Launch the site and give it a final check over. Then market it on social media.
10. Continue to update the site and monitor SEO performance
Google in particular update their search criteria regularly, checking search terms and rank performance will help keep the site coming up high. Updating a site regularly is also key to raising a site’s profile. You or the client will need to do this.
11. Online presence is enhanced by using social media in an intelligent way with header images consistent with the brand.
Finally, my web design process is not complete without integrating my sites with Social Media. Discussions with clients has got to be paramount, your client my hate social media and not have anything to do with it. It is their call. However, if they are moving along with current trends, then giving their brand a seamless presence online and in print is just as important.
PS: One of my ‘Golden Rules’:-
Test drive your web design skills on yourself first. Any major learning of new technology is safer tried out on yourself.
I have had many conversations with other web designers on Linked In who employ a similar approach. I hope you found my web design process useful.
By Soo Smart
25+ years experience in Graphic Design
15+ years experience in Web Design
9 years teaching at Colchester Institute BTEC National Diploma – 2003-2012 (Web Design, Photoshop Skills, InDesign)
If you are interested in branding or web design for your company, please contact me here >.
