Designing Websites

If you want to learn how to design a website, this page has everything you need to know.

How To Design A Website: 7 Essential Steps

There’s a great quote that says “good design is like a refrigerator—when it works, no one notices, but when it doesn’t, it sure stinks.”

This true when you’re learning how to design a website.

You might think you need to be a Silicon valley whizz-kid or have state-of-the-art tools to get great design. But the good news is that’s garbage!

What you do need is a proper step-by-step guide on how to design a website. Now that you’ve landed on this page, that’s exactly what you’ve got!

Here at Website Builder Expert, we know a thing or two about designing websites. We’ll run through the seven key steps you need to follow to design a website, from crafting a design plan to keeping your sparkling new site fresh.

Plus, we’ll highlight some of the hottest design trends for 2018.

If you’re interested in building a new site, or giving an existing one a makeover, then you’re in the right place.

So have your mouse at the ready and let your creative juices flow, it’s time to dive in.

Want to know how to build a website?

This guide focuses on how to design a website. If you want to know how to build a website, head over to our step-by-step manual.

1

Create a project plan

First things first: take a step back and create a design plan. Trying to learn how to design a website without a plan would be like painting straight onto a canvas without any rough sketches.

Before you start dreaming about video galleries and fancy call-to-action buttons, ask these four questions:

  1. What kind of brand do you want to build? Grab a pen and paper and write down adjectives that describe your brand.
  2. What would success look like? Are you trying to make sales? Promote a brand? Or just have a bit of fun?
  3. What kind of features do you need? These could be newsletter sign-up and social media buttons. When you choose a website-building platform (step 2), you need to know it has the features you want.
  4. Who is your site for? Think about your future audience. What will they want to find?

Your site should reflect the answers to these questions. For example, if you need a formal and professional site, you’ll want serious colors like white and grey. We’ve got more on this later.

Going through this process also helps you avoid designing in the wrong direction.

Next, conduct competitor research. Look at sites similar to your’s. What do you like? What do you not like? Get some inspiration. This is a key step in learning how to design a website.

2

Choose your platform

Before you start designing your website, you need to pick a platform to build your site.

The typical choice is between a hosted website builder like Wix or an open-source, code-it-yourself option like WordPress.

Here’s who each option is good for:

Website builder Code it yourself
You’re building your first website and need an easy-to-use tool to help get you online. You have coding skill and want access to the code to build an advanced website. You also don’t mind looking after the technical maintenance of your site, like hosting and security.

 

You’re not the most technical person and don’t want to take care of the backend maintenance of running a website. You have budget to hire technical resource to create a customized site for you.
You want to build a website and have all the backend maintenance taken care of for a set monthly fee. You don’t mind trading less predictable costs for greater flexibility and personalization potential.

 

To save you a bit of time hunting for a platform, here’s a table comparison of our top-three rated builders:

Best All-Around
Top Choice

4.8 out of 5

Ease of Use

5 out of 5 stars

Template Design

4.5 out of 5 stars

Features & Flexibility

4.5 out of 5 stars

Popularity

5 out of 5 stars

Mobile ready

5 out of 5 stars

Pricing

5 out of 5 stars

Best Design Oriented

4.6 out of 5

Ease of Use

4 out of 5 stars

Template Design

5 out of 5 stars

Features & Flexibility

5 out of 5 stars

Popularity

4.5 out of 5 stars

Mobile ready

4.5 out of 5 stars

Pricing

4.5 out of 5 stars

Easiest to Use

4.4 out of 5

Ease of Use

4 out of 5 stars

Template Design

5 out of 5 stars

Features & Flexibility

5 out of 5 stars

Popularity

4.5 out of 5 stars

Mobile ready

3.5 out of 5 stars

Pricing

4.5 out of 5 stars

3

Homepage: decide on layout and menu navigation

Once you’ve picked your website-building platform, it’s time to focus on your navigation and layout. This is the first creative step of how to design a website.

Your homepage is like your shop window, so it’s pretty important you take the time to get it right. It should leave visitors in no doubt what your site is about.

Good websites are more than just a pretty face. They have to work. A good website delivers style, but also substance.

An effective homepage makes it easy for visitors to navigate around your site. It should be clear what action you expect the visitor to take. In this section, we’ll cover two aspects of the homepage: the layout and menu navigation.

Homepage layout

On a simple level, a homepage has two parts: above and below the fold. When laying out your homepage, you need to think about what to put in each section.

  • Above the fold = the top half of the page. Content placed here should be important because your visitor will not have to scroll down to see it. For example, one sentence summarising the value your site adds and a bold call to action linking through to your top conversion point (a newsletter sign-up, for example). Make the language on your CTA very specific and action-driven.
  • Below the fold = More in-depth content that supports the above-the-fold material. For example, a ‘benefits list’. If you’re an artist, this list explains why a visitor should use you. Other secondary content could be trust indicators like reviews.

A word of warning: often with learning how to design a website, less is more. Don’t let your site become cluttered or overly complicated. Communicate the core message of your site.

What about logo positioning?

If you’ve got a logo, you have several options when choosing where to put it. If your site is focussed less on brand and more on products or services, place your logo on the same line as the menu bar. If you’re more focussed on brand, try placing the logo in the centre below the menu bar. You’ll get more space, but risk distracting from the commercial messages in your navigation.

If you don’t have a logo, here’s how to make one.

Homepage navigation

The navigation bar is the menu visitors use to navigate your site. Here’s one we made earlier on Shopify:

how_to_design_a_website_-_menu_navigation_example

Knowing how to design a website navigation that works involves:

  • Only adding necessary pages.
  • Building categories of related links
  • Making sure page titles are short and clear
  • Ensuring the navigation bar is easily visible

Each section of your navigation needs to have a clear end goal for the user. Be specific in your titles. For example, ‘shop retro socks’ instead of ‘our products’. Don’t overload your visitors with too many options. This will lead to choice paralysis.

Most websites place the navigation bar at the top of the page. We recommend you do the same. You don’t need to reinvent the wheel. This is where web users expect to find the navigation.

Make sure you include links to Contact and About Us pages and an FAQ page. This will also save you time answering one-to-one inquiries.

When you’re finished, show your homepage to your friends and family. Ask them what they think. If they find your site confusing, go back to the drawing board.

You design your layout and navigation by moving elements around your template. We’re discussing templates next in step four.

In-depth homepage help:

The ultimate homepage layout guide

how_to_design_a_website_-_homepage_example_shopify
4

Choose a theme / template

To populate your homepage you will need to choose a template (also known as themes).

Website builders have a great range of stylish templates for you to choose from.

Plus, they do a lot of the selecting for you by filtering templates by category. You can select a theme that matches your industry.

Most platforms offer a range of free and paid templates. Experiment with your chosen template by adding different features and elements.

With some paid templates, you may not be able to customize, so view the demos of multiple templates before picking one.

Remember, you’re unlikely to find the perfect template, but a systematic approach can help you whittle the choice down from hundreds to a small selection.

Most templates will come with a pre-designed header. They can contain images, galleries and even videos. Don’t jump for the flashiest option. Select a header you can work with, that will communicate your site’s core message. There are lots of different types of header. Each is good for different types of site.

For example, static headers with no content are good for sites that rely on high-quality images to attract visitors.

But static headers take up space, so don’t use one if you rely on text to explain what you do.

The safest choice is a static header image with content. You get key elements including:

  • Headline
  • Main paragraph
  • CTA (buttons or text links through to a main conversion point, for example a checkout).
  • Supporting image.

More complex sites that advertise multiple products or services might want a slideshow header.

how_to_design_a_website_-_wix_template_examples
Website builders provide awesome templates for you. Look at these examples from Wix!
5

Choose a color scheme

We bet you didn’t know that 85% of shoppers say color is a key reason they buy a particular product, according to KissMetrics.

So it’s no surprise that choosing a color scheme is a big step in how to design a website.

This step is all about helping you come up with a winning color strategy for your site. A good color strategy involves three things:

  1. A dominant color combined it with a complimentary color
  2. A background color
  3. A consistent color scheme across the site

Your dominant color should be the one you want people to remember. If you have a logo, use a primary color from your logo as your dominant color. High-value parts of your site should be designed in your dominant color.

Understand the meaning of colors before choosing one. Red, for example, evokes passion and urgency. It attracts impulsive shoppers and is effective for fast food and clearance sales. There’s a full breakdown of different colors’ personality in our full-length color guide.

Learn what each color represents and make sure the one you choose reflects your site.

Picking a kaleidoscope of bright, happy colors if you’re an online mortgage advisory service would be like turning up to a funeral in bright Hawaiian shorts. It’s just not appropriate.

Keep your background color simple. You don’t want to distract from your site’s content. It’s why information-heavy sites, or sites that promote products or services, often go for a white background.

Complimentary colors can be used across your site to jazz up key areas. Experiment with different colored outlines to make buttons and subtitles pop out.

Whatever color palette you choose, it’s very important to remain consistent. Don’t have different color schemes on different pages. Your visitors will just get confused.

6

Add your content: fonts, images and content

Let’s talk about your site’s content. Fonts, images and copy are the nuts of bolts of learning how to design a website. In this step, we’ll tackle them one by one, starting with fonts.

Fonts

The golden rule of fonts is: never sacrifice readability for style. What’s the point in a great font if no one can read the words?

Like your color scheme, your font choice also has to be consistent. Make sure page headings across the site are in the same font.

Here’s a general typography rule of thumb: show restraint and use no more than two different fonts. It’s the same when it comes to font colors. One or two font colors will do fine.

You can be more experimental with CTA fonts. It makes sense to draw your visitor’s eye to your core buttons.

And again, like your color scheme, your font has to reflect the tone of your site. Different fonts represent different things. Times New Roman is traditional. Calibri, clean and uncluttered. So don’t pick Comic Sans if you’re a professional services site.

It’s not just about the font, it’s also about the space between lines of text. The perfect line height is 150% of the font size you’re using.

Content

Your site’s content should be more than just window dressing. It has to serve a purpose and encourage your visitor to complete an action.

Make your prose snappy and eye-catching. There are few things more unattractive on a website than large blocks of text. If you want to make a section of content stand out, try surrounding it with white space.

Also keep SEO in mind. SEO stands for search engine optimization. It’s the practice of getting traffic from search engines like Google. A big part of SEO is writing targeted content.

So if you’re selling socks, for example, you would add content targeting people typing sock-related terms into Google.

Use Google Keyword Planner as a basic entry point to SEO. Also use Google Trends. Make sure keywords you want to rank for (this could be a product, for example) are included in H1s and H2s, body content and meta descriptions.

Top Tip: When adding contact information, use Schema Markup. This is what Google uses to pull your business into local search results. Don’t worry if you’re not a coder, scheme generators can help create the right code for you.

Lastly, make sure there are no sloppy spelling or grammar mistakes in your site’s copy. Write in clear language rather than thinking about keywords for SEO.

Images

Images are how you turn a modest website into a visual feast.   

Visual content increases clicks and engagement. Plus,images stick in the mind. If we hear a piece of information, we’ll only remember 10% of it; but if you add a picture, you’ll remember an incredible 65%, according to one study.

But, be careful not to overload your site with images. Lots of high-quality images might look great, but it can slow your site down. Web users are impatient and will vote with their mouses if your site doesn’t load quickly.

how_to_design_a_website_-_adding_images_in_wix
Adding stylish images to your site is easy in a platform like Wix!
7

Test, publish and update

OK, so now you’ve mastered color schemes and the homepage, themes and fonts, what next? Step 7 is where learning how to design a website hots up. It’s time to think about publishing your website.

Woah, hold your horses!

Before you publish, you need to test that your designs actually work. Your site needs to function just as well on a mobile as it does on desktop. It needs to be as enjoyable to browse on Google as on Firefox.

This is another area where website builders come into their own. You can preview your store on different devices at the click of a button. Here’s a preview snippet of our test Shopify store on desktop and, inset, on mobile:

how_to_design_a_website_-_mobile_preview_shopify

Check that all your CTAs work and that your site’s buttons take a visitor where they should. Re-read all the text on your site and correct any spelling or grammar errors.

Don’t rely on yourself to be designer, writer and editor all at once. Ask friends and family to test drive your website before it goes live.

Once you’ve dotted all your i’s and crossed your t’s, then you’re ready to publish!

Time to put your feet up, have a cup of tea and bask in the positive reviews of your site?

Not quite…

Update your website regularly

Learning how to design a website doesn’t end when you hit ‘publish’. It’s a constant process of refinement.

The online world doesn’t stand still, and neither should you. Visitors will punish a site that feels static and outdated. And so will Google. Regularly updating content gives a green light to search engines that your site is fresh and relevant and should be rewarded with higher rankings.

When you update your site, make sure:

  • Content is up-to-date, including contact information, product lists and photography and copy.
  • The content navigation is clean and easy-to-understand.
  • CTAs are placed in prominent positions on the page, with eye-catching color schemes and fonts. Experiment by updating the buttons on your site.

All of this is good practice. It’s website renovation stripped back to the nuts and bolts. But how do you go beyond the nitty-gritty and take your site to the next level?

That’s exactly what we’re going to discuss in the next section…

8

Hot design trends in 2018

The seven steps above are timeless. If you want to know how to design a website, treat them as a constant reference book of best practice.

But the landscape of website design is constantly shifting.

Once you’ve mastered the basics, you might want to push the design boat out. So we thought we’d include some of the hottest website design trends of 2018.

These are straight from our own design team. Incorporate one or two and if your site was a person it would be a 6ft 2 model dressed head-to-toe in Armani, strutting down a catwalk in Milan.

 

1. Video elements

Adding video to homepages and product pages is increasingly popular. It’s far more stylish than Gifs, which can appear clunky and low-quality.

If you’ve used a website builder, check for video functionality. Wix, for example, offers a range of free and paid videos you can add to your site.

how_to_design_a_website_-_video_element_wix_homepage
Adding a video to your homepage in Wix is easy...and effective!

2. Daring color schemes

More complex color palettes are the latest fad. Web designers are no longer playing it safe. Supersaturation, afterimages and jarring combinations are all in.

This is NOT an excuse to hurl the entire virtual paintbox at your site.

But explore using more vibrant and even clashing colors on your site. It can be a great way to make important parts of your site pop out.

 

3. Mobile, mobile, mobile

This isn’t so much a trend as a seismic shift in how we all consume information online.

Between April and June in America, 41% of website browsing took place on a mobile. This was up from 23% for the same months in 2015.

You can tell the way the wind is blowing. And if you can’t, Google can! The search giant now favors ‘mobile first’ sites. Make sure your designs look and feel good on mobile. Be prepared to ditch unwieldy full-screen images in favour of burger menus and icons.

If you want to know how to design a website that works for people, you have to think about mobile.

 

4. Drop shadows and depth

Designers looking to draw the visitor’s eye to the navigation are opting for drop shadows.

This is where you give the illusion of a space behind your element (an image, or a CTA, for example), by adding faded shapes to create a 3D-effect.

It can be a really effective way to add depth to your site.

A simple way to experiment with drop shadows is to add a hard-edged shadow on title text to make it leap out from your homepage’s background.

Be careful, though, flat and minimalist designs are also in fashion. Don’t overuse drop shadows or your site will feel behind the times.

 

5. Grid layouts

If you’re feeling confident in your designing skills, try jazzing up your grid layout.

Broken and mismatching grid layouts are some of 2018’s hottest design trends. Sure, they’re a bit jarring, but it’s also what makes them attention-grabbing.

It’s a nifty design technique if you want to images and text elements to overlap.

Having an avant-garde layout is risky. It’s why it tends to be established brands, or those trying to set themselves apart, that go for it.

how_to_design_a_website_-_wix_grid_layout_example
Experiment with your layout to find a cutting-edge style
9

Conclusion: how to design a website

You’re now armed with the essentials of learning how to design a website.

Bookmark this guide as your website design manual. Revisit it if you’re unsure about best practice or basic design ‘do’s’ and ‘don’ts’.

To take your site to the next design level, experiment with some of 2018’s freshest design trends.

Keep an artistic eye on your competitors and don’t be afraid to learn from the best.

Follow the steps in our guide and, instead stinking like a bust refrigerator, you’ll have a cool, fresh-looking website.