Want to design your own website but have no idea where to start?
If so, you’re definitely not alone.
Most people find web page design a little scary at first.
Don’t worry though, you’re in the right place.
We’re going to walk you through the of designing your very own shiny new, fully functional website.
When you’re done reading this guide, you’ll be ready to take your first steps towards building a website you’ll be proud to call your own.
Ready to learn some of the best tips and tricks to create a stunning website?
Then let’s get started!
Decide how much work you want to take on
Ok, the first thing you need to do is to decide how much work you want to put into creating your site.
If you truly want to create your website from scratch, you’ll need some coding skills. Most website creation requires detailed knowledge and HTML and CSS coding. of both
If the idea of coding far from appeals, don’t panic.
There are a large number of online website creators to choose from. The easiest way to walk this road is to set up your website through a popular hosting provider like Bluehost, Wix, WordPress, or Google Sites.
If you want to build an amazing website with the absolute minimum amount of effort, your best bet will be to employ a web designer.
Freelance designers will typically charge anywhere between £25 and £80 per hour, so it’s always best to know exactly what you want so that you don’t end up with a huge bill.
There are plenty of design companies that specialise in website creation for small to medium-sized businesses and freelancers. These companies usually provide the best value for money.
The Web Designer Group offers packages (including hosting, email, logo design and domain name) from £495.
Create a rough plan.
Whether you’re going it alone or working with a website designer, you’re going to need a rough idea of what you want.
Notice I used the word “rough” there. That’s because your plan doesn’t have to be meticulously detailed (unless, of , that’s how you roll).
A basic plan might include how many pages you want on your site, (tip – most packages a basic 5 page site), and what type of content you’re going to put on each of those pages.
It’s also a good idea to spend some time about the of important pages like the home and about pages for example.
Creating a web page design sketch like the one above, showing how you want your key pages to look, will not only help you to better visualize your website, but it will also give web designers a better idea of what type of you’re looking for.
How to design your home page – some useful tips.
Your home page is hands down the most important page on your site. You won’t get a second chance to make a first impression, so it’s important to get it right.
The most crucial function of your homepage is to clearly communicate what your business or brand is all about. The best homepages answer key questions like who am I? what do I do? and What can I you (the visitor)? The example below does this brilliantly:
Freshbooks messaging is crystal clear. At a glance, it’s easy to see what they (accounting software for small business owners) and what the is to the client (saving time and stress).
Your design should appeal to your target audience. It can be tempting to design something that you like, but the best designs focus on fulfilling the audience’s or target market’s expectations.
The visuals, as well as the language that you use on your homepage (and throughout your site), should resonate with your core demographic. Check out the example below:
Notice how the language has a strong emotional appeal? Promoting ideas of and trust is likely to resonate strongly with those looking for employment In the field of child therapy.
Give people a reason to stick around. Ever noticed how many home pages have a big button on them offering a free trial? That’s because if you people something of value they’ll be more likely to go deeper into your website.
Include a strong call to action. You don’t need to a free trial if that doesn’t suit your purpose, but it to have a highly visible call to action button on your homepage that clearly tells your visitors exactly what it is that you want them to do next:
In the above example, the call to action is asking visitors to watch a video. Your call to action button might say something like “Browse our Menu”, “Apply Now” “Learn more” or Take the quiz”.
Homepage and navigation.
To effectively communicate your message, your website has to balance both form and functionality. So not only does it need to look appealing, but your site must also be easy to navigate.
When it comes to , your homepage has two main sections. Above the fold refers to everything your visitors see when they first land on your page. Below the fold refers to everything they see once they scroll down further.
You can probably guess that what you place above the fold is far more important than what you place below the fold:
Above the fold is usually where you will find the navigation menu, logo, value proposition and call to action button(s).
Below the fold is where you will put additional content that further explains your business or you to sell your products or services. Content like features, testimonials or free resources is typically found below the fold.
With web page design, less is often more. Try to keep both the design and the navigation as simple as you can.
Only add pages if it’s absolutely necessary, as presenting too many options can overwhelm your visitors.
Use specific descriptions rather than general ones for your navigation menu, (i.e use “shop retro tees” rather than “view products”) and make sure that your descriptions are clear, concise and appealing.
Your navigation menu should be placed in a prominent position (above the fold) where it can easily be seen and interacted with.
The importance of User (UX)
You want to build a website that looks and feels professional. Creating a site that looks good will get you pretty far, but it’s only half the battle.
The best websites have designs that a great user too.
These two aspects of your site, the look and the user (often referred to as UX) are absolutely crucial. In fact, in the industry, good web page design is pretty much defined by the interactive it offers to the end user.
Creating an appealing design might be enough to make your visitors want to know more, but if they can’t find the information that they are looking for quickly and easily, all the clever design tips and tricks in the world won’t stop them from going elsewhere.
To provide the best possible for users, what you are offering should fulfil the following 7 criteria:
● Useful – Does what you’re offering help users to solve a problem or achieve a goal?
● Accessible – How easy is it for users to access your product or service via your site?
● Usable – How easy is your site to navigate? Have you optimized the placement of your menu/buttons etc?
● Desirable – Does your make your company desirable to work with or buy from?
● Findable – How easy is it for users to find what they’re looking for? How many clicks do they need to make or pages do they need to scroll through?
● Credible – Does your site look credible and professional? Do you make it clear why users can trust you?
● Valuable – Is the value of your proposition made clear?
As you can see, there are multiple factors that influence the user of your . Fine-tuning your user is actually quite .
While there are lots of good web hosts out there that can help you to design a beautiful looking site, creating a streamlined user that will keep visitors on your site for longer (as well as coming back time and time again) is a little more tricky.
Creating an optimised user to your overall user . is something that all good web designers are trained to do. Even if you decide to build your site using a web builder, it might be worth working with a
How to create a consistent design.
Ok, so you’ve decided how many pages you want and what you want on those pages. You’ve also created a rough plan which lays out the core elements to be included in your web page design.
You‘ve also thought a little bit about User and how to make your website inviting and easy to use.
Now it’s time to start about the fun stuff, like colour palettes and text styles.
But first, a quick note on the importance of consistency in your .
Consistency is key.
Whatever text style, colour palette or other design elements you choose, it’s important to keep those elements the same throughout the whole site.
It makes no sense, from a design point of view, to have one page filled with bold bright colours and the next filled with muted soft tones.
Nor does it makes sense to have too many competing font styles (which can look messy and confusing).
You should aim to make your website as consistent as you can throughout, which means using the same colour palette (4 to 5 complimentary colours max) and font styles across the whole website.
Choosing a colour scheme.
Did you know that the colour of your website has a huge impact on people’s buying decisions?
According to the tech moguls over at Business Insider, a whopping 93% of consumers make their purchasing decisions based on a website’s colour and appearance.
It’s one of the most important decisions you will ever make, and one that can massively influence your bottom line.
In , color is powerful. It can affect your visitors mood and perception, stir up emotions and even influence behavior and decision making.
Colors represent ideas and communicate messages to consumers. Red for example, is associated with energy and a sense of urgency, which is why this colour is often used in promotions.
It’s a good idea to do a little bit of research into colour psychology (you don’t need to go to too deep into it, a basic is enough to get you by) in order to ensure that your chosen colours are sending out the correct message.
Since your choice of colour says a lot about you, it makes good business sense to be aware of the impact that your chosen colours might have on your visitors.
To get you started, here’s a basic list list of 10 colors and what they represent:
Red – As mentioned above, red is often used to promote a sense of urgency in promotions. Red is a great color to use for call-to-action buttons because it stimulates high energy levels. Red is also associated with danger which makes it difficult to ignore!
Pink – Pink has positive connotations associated with compassion, nurturing and romance. It’s also reassuring and calming. You might use pink in your to create a nurturing space where your visitors will feel valued.
Orange – Associated with adventure and confidence, orange promotes feelings of optimism and enthusiasm. Use it to create a cheerful and energetic vibe, or in moderation to highlight important elements of your .
Yellow – Yellow is an attention-grabbing color associated with happiness. Use it sparingly to draw attention to key areas/buttons or to create an uplifting vibe. Yellow is often thought of as a lighthearted whimsical and even a childish color, which may make it more suitable for playful brands.
Green – Green is a relaxing colour that’s closely associated with nature. It’s useful for promoting ideas of growth and safety. You can also use it to communicate ideas of stability and endurance as well as environmental friendliness. Be careful with dark green (which is associated with envy and jealousy) and also with some yellow-greens (can be associated with sickness).
Blue – Light blues are associated with peace and tranquility, whereas darker shades can be used to stimulate deep . Blue is commonly used in the financial and tech industries to promote ideas of stability and trust.
Purple – Purple communicates wealth, power and luxury. Because of its association with ambition and extravagance, It’s often used in the websites of high-end brands. Purple is also a favourite colour among children, making it an ideal choice for products and services targeted at a pre-teen demographic.
White – White is associated with purity, cleanliness and simplicity. In business, white is often used to promote ideas of fairness, organization and equality. Because of its association with doctors and hospitals, white can also be used to get across a message of safety.
Brown – Brown is a great colour to use if you want your company to come across as dependable, reliable and down to earth. After all, what’s more “down to earth” than the colour of earth itself?
Brown encourages introspection and contemplation. Use it to suggest your company is both solid and dependable.
Black – If you’re a fan of bold colours or monochromatic design, you’re going to want to include a good dose of black in your . Black communicates sophistication and authority. Black Is a great choice of background if you want to use bold colours to really make your message pop.
It’s important to choose a colour palette that not only sends the right message to your consumers, but that also appropriately reflects your business.
A website for a children’s nursery would look unappealing in black and shades of grey for example, while using bright primary colours for your accountancy firm might make you look unprofessional.
If you are using a free theme or template provided by your web host, then you may not have much freedom when it comes to choosing a colour palette.
Paid themes offered by free web builders sometimes do include customisation options, but many do not. So it’s important to try out the demos of multiple themes before settling on one that you like.
If you are working with a web designer, however, the sky’s the limit. You can research how colour influences people to your heart’s content, and select any colour (or combination of colours) that you like, or any colour palette you like.
Perhaps you have a particular colour associated with your business that you need to work around. In this case, web designers will be able to suggest complementary colours to create a custom palette that works for you.
There are also plenty of websites that can provide colour inspiration for your .
To save you the time and trouble of finding them, I’ve put together a list of 10 of the best resources and to help you create the right colour palette for your needs.
Top 10 websites to visit for colour palette inspiration and :
1. Canva (50 inspirational examples).
2. Design Shack. (50 best colour Schemes – 2019).
3. Quick Sprout. (10 trending colour schemes – 2019).
4. Huesnap – An app that lets you take a picture and extract a colour palette from the image.
5. Khroma – An AI colour tool for designers.
6. Coolors.co – Free color scheme generator.
7. Adobe colour CC – A free tool. You can browse other people’s creations or create your own.
8. Egggradients – Offers beautiful gradients (all in egg shapes) to use in your design.
9. Canva colour palette generator – does what it says on the tin.
10. Material design palette – select two colours and see full-colour palette suggestions.
Choosing text styles – A few tips and tricks.
The final aspect of web page design we are going to talk about today is text.
In the same way that colour can help communicate your brand message, so too can font styles. Your choice of font can influence your visitors, so it’s an important design decision to get right.
Font styles (or typography as they are sometimes referred to), can significantly impact your web page design and can be used, in the same way as colours, to signify important ideas like trust, stability, reliability, playfulness or elegance.
Perhaps the most important thing you should bare in mind when selecting a font is readability. Clear, legible fonts make life easier for your visitors and make your web content easy to digest, meaning that visitors will be more likely to stick around for longer.
You should also keep the number of fonts you use in your to a minimum, as using too many (more than 3) can make your site look disorganised and unprofessional.
As a general rule, 2 fonts is plenty, but it’s important that they compliment each other. You can see several examples of fonts that work well together in the image below:
Whatever font style or styles you decide to go with, it’s a good idea to check what the font looks like in a range of sizes. It’s important to select a font that works well in a variety of sizes in order to maintain good readability across a range of devices.
Don’t be tempted to capitalise full sentences or paragraphs, as this makes your text harder to read!
Another tip is to make sure that there is enough contrast between your text and background colour.
That’s it folks, you have reached the end!
You now have all of the information you need to create a stunning to be proud of.
So, what are you waiting for, go build that website with a professional !