How To Design An Amazing Website in 2019

How To Design An Amazing Website in 2019

A nice landing page

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 process 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 understanding of both HTML and CSS coding.
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 web design packages (including hosting, email, logo design and domain name) from £495.
A section of The Web Designer Group

Create a rough plan.

A picture of a rough plan of a websiteWhether 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 web design uk plan doesn’t have to be meticulously detailed (unless, of course, that’s how you roll).
A basic plan might include how many pages you want on your site, (tip – most web design packages offer 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 thinking about the layout of important pages like the home and about pages for example.
Another image of rough plan website
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 layout 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 offer you (the visitor)? The example below does this brilliantly:
A picture of a website
Freshbooks messaging is crystal clear. At a glance, it’s easy to see what they offer (accounting software for small business owners) and what the benefit 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:
An image of a landing page for a website
Notice how the language has a strong emotional appeal? Promoting ideas of understanding 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 offer 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 offer a free trial if that doesn’t suit your purpose, but it helps 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:
An image of a websites homepage
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 layout 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 layout, 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:
A picture of what is important for a website being above the fold and not as important being 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 helps 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 Experience (UX)

An image of a User Interface experience
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 offer a great user experience too.
These two aspects of your site, the look and the user experience (often referred to as UX) are absolutely crucial. In fact, in the web design industry, good web page design is pretty much defined by the interactive experience 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 experience 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 web design 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 experience of your web design. Fine-tuning your user experience is actually quite involved.
While there are lots of good web hosts out there that can help you to design a beautiful looking site, creating a streamlined user experience 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 experience 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 web design company to improve your overall user experience.

How to create a consistent design.

An image of a website selling party items and fireworks
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 Experience and how to make your website inviting and easy to use.
Now it’s time to start thinking about the fun stuff, like colour palettes and text styles.
But first, a quick note on the importance of consistency in your web design.

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.

A picture of a jellyfish with different colour schemes
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 web design decisions you will ever make, and one that can massively influence your bottom line.
In web design, color is extremely 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 sales 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 understanding 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 sales 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!
An image of a design conference artworkPink – Pink has positive connotations associated with compassion, nurturing and romance. It’s also reassuring and calming. You might use pink in your web design to create a nurturing space where your visitors will feel valued.
An image of a landing page called "love notes"
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 web design.
A laptop with various different colour schemes around it
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.
different colours on a page
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).
A green picture with a tree
Blue – Light blues are associated with peace and tranquility, whereas darker shades can be used to stimulate deep thinking. Blue is commonly used in the financial and tech industries to promote ideas of stability and trust.
A colour scheme which is predominantly blue
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.
A colour scheme of a landing page which is predominantly purpleWhite – 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.
A landing page with the number 50 onBrown – 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.
An image of a landing page with a man lying down
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 web design. 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.
A predominantly black background with red colours
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 creative 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 web design solutions.
To save you the time and trouble of finding them, I’ve put together a list of 10 of the best web design resources and tools to help you create the right colour palette for your needs.

Top 10 websites to visit for colour palette inspiration and tools:

1. Canva (50 inspirational web design 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. – 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.

A blue background with white text which reads "Typography"
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 web design 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 web design to be proud of.
So, what are you waiting for, go build that website with a professional design team!