Ever wondered how professional websites are built? Here I list the web design process that works for me. Whilst the exact web development and design process will vary slightly from designer to designer, the basic steps are generally the same.
Mine is a 4step web design process involving:
- Plan & Research
- Design & Develop
- Test & Launch
- Maintain & Upgrade (depending on the client and project)
Step 1: Plan & Research
The first step in creating a successful website is to gather information. I will do this through my project planner which is essentially a series of questions for the client to answer. Here I am typically looking for answers to the following:
- who is the client and what do they do
- who is their target market
- who is their competition
- what type of site (and additional services) they want from me
- timeframe and budget
This information then allows me to go ahead and develop a sitemap and wireframe. The sitemap is a list of all main topics (and sub-topics) of the site and essentially becomes the menu/navigation system which should be easy to use for your visitors. The wireframe helps to visualise the layout of the site’s structure and main elements.
Step 2: Design & Develop
Once the client is happy with the sitemap and wireframes, it is time to open Photoshop to determine the look and feel of the site. The benefit of this web design process is that I now have a wireframe to build the design over. The key things I keep in mind whilst designing are:
- staying consistent with brand, colours and mood
- keeping the design appealing to the target audience
- ensuring elements are kept structured to a grid system
I will then allow the client to revise the site mockup to ensure it matches their needs and tastes before development begins.
Step 3: Test & Launch
Following design and development of the system, testing the website is of the utmost importance. Here I’m testing for things like
- browser-compatibility (ensuring the site displays properly in all the major browsers e.g. Firefox, Chrome, Safari, Internet Explorer)
- device-compatibility (ensuring the site displays properly on all the major devices e.g. iPad, iPhone, PC, Laptop)
- ensuring code validates to the most current web development standards
- functionality of emails, forms, shopping carts, databases, scripts etc.
Upon successful completion of testing, it is time to launch the site for the waiting world to see. With domain name and web hosting accounts setup, I now upload the website files to a server (a large computer which is always on so your website is available 24/7) using an FTP (File Transfer Protocol) program. The website is now available to the public.
Step 4: Maintain & Update
One great way to bring repeat visitors to your site is to offer new content or products on a regular basis. I (like most designers) will be more than happy to continue working with you to update the information on your web site.
However, if you are computer-savvy and prefer to update your own content, there is something called a CMS (Content Management System) that I implement on 90%+ of websites I build. You are given access to a back-end administrative area, where you can use an online text editor (similar to Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself.
Other maintenance tasks include SEO (Search Engine Optimization). This is the optimization of your website with elements such as title, description and keyword tags which help your website achieve higher rankings in the search engines like Google, Bing and Yahoo. The previously mentioned code validation is also something that plays a vital role in SEO. This is a very important task because for a website to be successful, you need to make sure that people can find it.
Social Media integration has become another great method for helping your website to increase it’s search engine rankings. Websites like Twitter, Facebook, YouTube etc are a free and generally easy way to gather a following and keep your audience informed of changes to your business and/or website.