Discover how to build and deliver more successful websites by following our 8 phase web design process.
Web designers tend to focus on what a website looks like and therefore spend little effort in understanding if the website meets the overall business strategy. In the sections that follow, we explain the eight phases in our web design process and leave you with the information you need to succeed in building websites that not only look good, but meet the expectations of your clients.
A well-designed website will clearly explain the product, service and company while also attracting visitors who may purchase products and services. Additionally, it will include a variety of elements such as images, font, text, and user interactions (UX design), with the goal of converting the user from visitor to client.
1. Define the objectives and key results of the website
This is one of the most critical phases in the web design process. You will need to spend time with your client and list the objectives and purpose of the website. Building a website without understanding the objectives is like driving a car without knowing the destination. In short, make sure you set your project off in the right direction by taking care to obtain clear objectives.
A useful tool that can be incorporated during this phase is the objectives and key results (OKR) goal setting framework. It can be used to define measurable goals and track their outcomes.
To get you started, here are some questions you can ask your client:
2. Define the scope of the web design project
After you have a clear list of objectives, you should create a scope document that clearly outlines what functionality and web pages will be created to meet the objectives. You can also include the timelines for completing the website. Your goal here is to avoid scope creep where it results in more work at the same budget and timeline. If the client is willing to increase budget and timeline then scope creep is not a bad thing and can result in more work for the web designer. You can include terms and conditions in your scope document to avoid any potential disagreements at a later stage. We have also found it beneficial to include a mini project timeline that indicates milestones so that the team and clients expectations are aligned. In conclusion, make it clear to your client that if the scope increases, the budget and timeline will need to be reviewed.
3. Build a mock-up to showcase the website pages and flow
A mock-up is useful to help you and your client understand and think about the structure of the website. It provides the foundation of the website (blueprint) by illustrating the relationship between the various website pages and clickable elements like links and buttons. A mock-up (also referred to as a wireframe), can aid in exposing potential pitfalls in the overall web design. While the mock-up is not meant to contain the final design, it does give the client an idea of what the design will look like.
This phase will undoubtedly create changes in the scope of the project and you should be prepared for this. Either increase the scope or take note of additional functionality that can be added in subsequent iterations.
4. Create unique content that visitors will read
Now that you have clear objectives, a finalised scope document and mock-up, you can begin creating content for the website pages. Written content is an important source of information that can be used to educate not only users but also search engines about your websites purpose.
Content also drives user engagement and action. If website visitors take the desired action (like purchase a product), your website is achieving its objectives and purpose.
User engagement is impacted by the typography, structure, and written content. Content with long paragraphs of text without bold titles, font and images, will lead to lower user engagement. Likewise, short and engaging content will get users to continue reading for longer and increase the chances of them clicking links to other pages and content.
Carefully breaking up your content into shorter paragraphs and sections that include images, will help to increase user engagement and the time they spend on a particular page.
Reach out to your client as they will most likely have written content that can be re-used and you can then optimize the content for website visitors and search engines (SEO).
Content helps to enhance your websites visibility on search engines
Improving content to rank well on search engines is known as search engine optimisation (SEO). This process involves researching keywords (words that users type in search engine) that relate to the websites objective and purpose. The Google Keyword Planner is a great tool to identify keywords and will indicate average search volume and allow you to find new keyword combinations. Its imperative to compile a list of keywords and keep them handy as they will be required when writing text content.
Search engines are becoming smarter and they look for numerous indicators that signal to them your content is relevant to a users keyword search. That is to say, a search engines goal is to identify relevant websites and content and its critical you make sure your content is the most relevant.
Read our SEO checklist article for further insights on SEO.
5. Visual design of website and pages
Now that you have some content on your website pages, you can start to play with the visual design and brand. This is where a web designer has a chance to showcase their talent. Make sure you contact your client and ask for any logos or branding materials that they may have - You can incorporate their existing design into the website to ensure the website design aligns with the existing marketing strategy. If the client does not have any branding content, you can use mood boards, style tiles and element collages to help create a design from scratch.
Images play a crucial role in communicating messages to visitors without them having to read text. Chunking your content with images between the chunks is an effective method of making the content easier to read and digest. Images also assist in building trust, for example, where an image shows staff members or a companies delivery truck. More importantly, images let the visitor know they are dealing with a real company.
Visual content has been proven to increase user engagement and revenue. Visitors prefer websites with more images and will stick around longer on pages with the right balance of images and text. Lastly, images help to convey a websites objectives and can enhance the message that needs to be digested by the user.
When sourcing images, pay attention to their size as large images can slow down a web pages load speed (which can impact search engine ranking). We use GIMP (free imaging tool) to compress images and reduce their size.
Getting the visual design right will set your website project up for success. Not only will your client appreciate your awesome design, but they will also take note of the usability and function of the website.
6. Testing the website to reveal potential issues
While the testing phase is not the most fun aspect of the web design process, the importance cannot be underestimated. It's the only phase that gets you closer to the users perspective and it's this angle of attack that will help you uncover hidden bugs that you did not see before. Test, test and test some more!
You can start with simple functional tests like checking that website links work, the website displays on multiple devices and ensuring your contact form functions correctly.
Once your functional tests are complete, you can move to end-to-end testing, where you should test things like user experience from the point the user lands on the website to the point at which the user takes action. End-to-end testing can also include the entire shopping cart process from checkout to shipping.
Performance testing should also be incorporated. There is nothing worse than a good looking website that takes forever to load. If you don't do performance testing, there's a high probability your hard work will go unappreciated. There are a number of things under your control like a fast hosting provider, host caching (LiteSpeed Web Cache Manager) and cache plugins. Reducing the size of images can also have a significant performance impact.
7. Client Review and feedback
At this stage the website is ready for review by the client. If possible, try upload the website to a temporary domain so that your client can interact with the website. Its always best to get client feedback as soon as possible. We have found that its better to ask a client to review a website that's 80% complete as this gives you the opportunity to make smaller corrections without a complete website overhaul after the website is live. The goal here is to get client feedback as sooner rather than later.
Don't be surprised by negative client feedback. Discuss this with your client and talk through their concerns. More often than not, explaining to your client the thought process you took while implementing functionality gives them the opportunity to see your angle on the design.
8. Website Launch
Check with your client if there is sensitive timing around the go live date (launch) of the website. You will also need to consider things like website hosting account, email setup, domain DNS records and domain transfer (if applicable). We also recommend taking an offsite backup of the website in case the client breaks the website or the website is hacked.
When initiating a domain transfer, ensure you walk your client through this process. We have seen domain transfer durations take 24hrs right through to 5 days. This could mean that your clients email services are down for this period.
Conclusion
The web design process is all about finding the correct balance between the look and feel of a website and its purpose. While colours, fonts and images (form) are very important, the way users engage and experience a website (function) is just as important. Good web designers understand the sensitive balance between form and function and should strive to ensure the correct mix is applied throughout the website.
When is your next web project? - Did you find that our web design process works for you? - We would be interested to hear your comments below.
Download our 8 web design phases for free
We have provided a printable PDF version of our 8 web design phases below.
2 comments