Website design has come along way since the early days of the internet , when getting online and having a website presence was the thing of the day.
Nowadays, it’s no longer enough to think in terms of visual design. A website that performs goes beyond aesthetic style and the way things look. Website design addresses business goals and solves user problems. In a nutshell, it’s about tailoring the website design to the needs of the business and the user.
Our website design process is made up of 3 stages:
- Discovery
- Visual design
- Development
Let’s take a look at each of these stages.
1. Discovery
Here we gather information from our client during our first meeting.
1.1 Client and user goals.
1.2 We establish the Questions that the user is going to need answers to and provide solutions.
1.3 Finally we consider the Emotions that we want to evoke from the user such as confidence, assurance and trust.
For further information on web design processes please see UX Design Process: How To Sketch Wireframes—Web Design Pt 1 from The Futur.
1.1 Client and user goals
Client goals will generally fall into any of the following categories. I’m sure there are more so go easy:
- Sell products.
- Improve conversion rates.
- Provide information.
- Brand awareness.
- Improve mobile offering.
- Becoming more discoverable through search.
- Drive more enquiries.
- Improve mailing list sign ups.
- Provide ability to download a document or digital product.
Be specific about the client goals and set measurable targets.
For example, ‘Sell 1000 more cars in the month of August’ is more specific than the goal to simply ‘Sell more cars’.
Your client may also have secondary goals to the primary goal so get an idea of these too.
Before defining User goals think about who the website audience is.
You will need to know your clients’ customers:
- Who they are?
- What they like?
- What their pain points are?
- What problems they have?
For further information on website audiences and segmentation please see my article on ‘The importance of buyer personas and how to target them based on behaviour’.
When you have an idea of who your audience is you will be able to tailor your design solution to their needs.
A not in-exhaustive list of user goals:
- Purchase products.
- Enter a competition.
- Find out some information about a company.
- Sign up to a mailing list.
- Search for a product.
- Compare prices.
- Make an enquiry.
- Be entertained.
- Connect through social media.
- Download a digital product.
Let’s look at an example of a company that wants to reach out to first time users by capturing email addresses.
Too many people are coming to their website, leaving without making a purchase and never returning.
By capturing their email address the website can re-engage with the user and persuade them to return, with a discount on their first order.
The client’s goal is to capture email addresses to drive future conversions.
The goal of the user is to provide their email address for free and receive a 15% money off code.
Please take a look at a subscription popover example that can be used to target this user group.
There are intersecting goals here in respect of the ability to capture email addresses for the client and the discount the user receives.
The form should therefore be prioritised within the web page design.
Additional page content will help provide solutions for other problems a user may have such as summarised content and videos.
Users may also need to be reassured that the website will not use their email address other than for the stated purpose and can be trusted.
These are examples of emotions that we will want to evoke during the user’s interaction with the page: trust, confidence and reassurance.
Planning involves looking at how a user interacts with the website in order to achieve their goals. We create sitemaps, user flow’s and get feedback to make adjustments and improve results.
Sitemap
A sitemap is the outline of website pages, at a top level, showing page hierarchy and relationships between pages through links.
The sitemap helps visualise the scope of the project in one or two pages.
You can sketch your sitemap using pencil and paper or you can use online tools such as draw.io or gloomaps.
An example sitemap
User flows
User flow refers to the typical path that a user takes on a website or app in order to achieve a task.
The user flow takes them from their entry point through a set of steps towards the completion of their intended goal, such as purchasing a product.
By considering the user flow we are ensuring that we deliver an experience that is the most effective for the user when designing a website.
User flow example of a user buying a product on a website.
Feedback
Design is tricky and difficult to navigate so its essential that communication and collaboration with the client is open and available.
Tangible feedback is essential to the successful development of a website, after all most ships need course correcting at some time or other!
Furthermore, getting feedback is not always easy.
Stakeholders can have different ideas about design or objectives and their feedback can be vague.
The solution is to determine who the stakeholders are from the get go and who has authority to sign things off.
Be honest and be open to feedback whether positive or negative it goes hand in hand with the design process!
2. Visual design
When all the website information has been gathered from the previous stages of understanding and planning we will then use this in the creation of wireframes, mockups and prototypes.
Wireframes
A website wireframe, schematic or blueprint, is a simple black and white line drawing of your website pages that shows the outline of page content, where images, video and copy will be placed.
It is necessary before any page mockups are created.
Wireframes do not include imagery and colours. If they do you begin to create mockups and prototypes which are part of the visual design of the website.
Wireframes can be sketched initially and once the direction of the wireframes is approved can be designed in hi-fidelity on the computer.
It’s easy to go straight into the visual design of a website but creating wireframes first will make the design process so much easier, so don’t skip this step!
Hand drawn wireframe
High fidelity wireframe
Steps I take when creating wireframes:
- Setup my workspace with a 12 column grid and 1440 pixels wide.
- Block out with sketches.
- Bring in actual copy if you have it or use filler text.
- Are there the right number of visuals? Are they positioned correctly on the page?
- Does the copy reveal any missed opportunities?
- How does the flow of the page feel?
- Can the composition be improved?
Once the wireframes have been designed I add checklists to my wireframes that show when users goals and business goals have been addressed.
Mockups and Prototypes
Mockups and prototypes are part of the visual design of a website and have been covered in my article Understanding visual design.
A word on your content strategy…
When planning a website always keep in mind what assets you may have.
These include photography, illustrations, videos, sounds and logos that will help with the website build.
Make sure these assets are available as you sketch and design your wireframes.
You may design a thing of beauty but after realise that of the 20 images you used in your design only 2 are available…
Just be mindful 😉 Website content (photography, illustrations, written content) is important to the success of your website and arguably is more important than the design.
Take a look at your competitors and see how similar their designs are.
To differentiate your client’s website from their competitors you need to focus on creating great content.
Great content will help you to build trust and authority with your website visitors.
Your site’s visitors have objectives when they come to a website and content should be presented in such a way to remove obstacles so that they can achieve their goals.
Your content should be delivered to meet your business goals by fulfilling your customer needs.
Your content should assist them in solving their problems and answering their questions.
Considering website content
Content should also be deliberate.
Written content, as an example, will need to be considered with SEO in mind so that your website will be seen by search engines.
DO YOU HAVE A PROJECT WE CAN HELP YOU WITH?
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
