August 09, 2021

Design A Website From Scratch In 7 Steps

Reading Time: 9 mins

Designing an entire website can seem like a big challenge. You need to think about all the pages, the content on each page, how it’ll be designed, what colors to use; the list is pretty long.

While this can seem daunting, designing an entire website from scratch is highly achievable even if you are a beginner.

The secret?

Breaking it down into small, manageable chunks. Then working on each chunk one at a time.

Let’s look at how you can design a website from scratch in 7 steps.

1 Create A Color Palette

Color is what brings a website to life.

The colors you use throughout the website combine to create a particular aesthetic or theme.

The easiest way to pick colors for your website’s color scheme is by picking the colors of the company’s logo or branding material.

Quite often when you’re designing a website for someone’s business, they will already have a color or set of colors for you to work with.

If that’s not the case and you’re working without any branding materials, you’ll need to dig a little harder to pick a suitable color.

I highly recommend you read up on color theory to understand the meaning behind various colors so you can make an informed decision.

In either case, here’s what I recommend to create your color palette:

Here are some tools to help you pick out colors for your color palette:

2 Pick 1 - 2 Fonts

Font choice is the next most important consideration after color palettes.

The fonts you choose for your website will determine how easy or difficult the content will be to read.

It will also contribute to the aesthetic of the website.

Here is my advice for selecting fonts for your website designs:

3 Create Rough Designs On Paper

Now that you have picked out a color palette and font(s), it’s time to actually start designing.

Don’t worry, we aren’t going to think about design tools just yet. We’re going to start with paper and pencil.

I find graph paper works really well for designing web pages but you can also use lined paper or even blank a4 pages.

Now the fun begins… start sketching!

Start by writing down a mind map of the different pages your site will need.

Once you know what pages you need, start with the homepage and create a rough draft of what it should look like.

The homepage or landing page is often the first impression a user has when they visit your website so it’s the most important place to start.

Don’t worry if you’re not good at drawing. Use simple shapes like squares, circles, and squiggles to convey what you’re thinking in your head.

At this point you’re just focusing on the content blocks you need and where they should be placed. Think of it like putting together Lego bricks.

Work through the same process for each page until you have some rough designs of your website.

4 Build The Wireframes

Now that you have some rough sketches of each page of your website, it’s time to create wireframes.

Wireframes are essentially a slightly more refined version of the sketches you’ve made on paper.

They use simple shapes to outline the content structure and placement but are created in a digital format so you can tweak them as required.

Work through each page using your sketches as a reference until you’ve created wireframes for your entire website.

I used to use a tool called Balsamiq mockups to create wireframes but now I just use Figma as it’s free and I’m pretty familiar with it.

It’s important to note here that you’re still working in black and white. Introducing color too early in the design process will be a distraction.

You’ll be more focused on the color of the buttons than on the content placement which is much more important at this point.

If you want to learn more about building wireframes, I’ve linked a helpful video below you can check out:

5 Create The Mockups

Mockups are the next step in the web design process. These are more detailed versions of wireframes where you actually start to see what the finished product will look like.

Instead of using shapes and squiggles to represent content, you’ll be designing the content as it will look when the website is live.

Figma is the tool I use for mockups and I highly recommend it but you can work in any design tool that suits your workflow.

I would also recommend you continue to work in black and white for your first round of mockups so you can get the content and placement just right.

Work through each page of the website, using the wireframes you created from the previous step as a reference. When you’re done, you’ll have a set of black and white mockups of your entire website!

For more of an insight into how you can create mockups in Figma I found a more comprehensive video on the topic which I’ll link below:

6 Add Color

We’ve been waiting all this time I know.

But, once you have a finished set of black and white mockups ready to go you can finally start to add some much-needed color.

By this point you have the content and placement finalized so you can start to think more about the finished product in terms of color.

It’s important to note here, depending on your process or the client you’re working with, you may not have the finished website copy ready to include in your mockups. This is why Lorem Ipsum text is a designer’s best friend in the early stages of the design process.

With that said, you should try to get this “live copy” as early as possible so your client will have a more realistic preview of the website when you show them your mockups.

Let’s get back to the colors!

If you remember back to the first step in this process, you created a color palette. Time to dig that out.

Use the main color and experiment with adding it to your components. Add it to buttons, headings, backgrounds, links etc., and see what works.

If you’re stuck, think of it like this: color is an effective way to make content stand out. Find the content on your page that’s most important and work from there.

If you’ve included more colors in your color palette, for instance, different shades of the main color, do a second pass and incorporate that color into your designs.

There’s no one right way to add color to your designs so you need to experiment based on your knowledge of design and what looks good. Keep at it until you’re happy with the result.

7 Tweak Your Designs Based On Feedback

Congratulations! At this point, you’ve successfully designed an entire website!

BUT you’re not out of the woods yet.

Feedback is an often overlooked but highly important part of the web design process. After all, if you’re dealing with a client and they don’t like the mockups you’ve shown them, you’ll have to go back to the drawing board.

While this item is technically step 7 in the process, you should be getting feedback at each step along the way.

If you’re designing a website for a client you’ll want to stay in regular contact with them to keep them up to speed on your progress and to get feedback from them.

If you’re designing a website for yourself for fun or a project, consider sharing your designs with friends, family, work colleagues or even with others online.

How you take on board feedback and incorporate it into your designs can make you a great designer or a bad designer.

If receiving feedback is something you’re not used to or you’re afraid to try, take a look at this mini-essay I wrote about how to receive constructive feedback:

Next Steps

By this point, you should have a 90% designed website! Well done 🥳

The last 10% comes with a few more passes of feedback and design tweaking until you are happy with everything.

You can then either sign off on the project with your client or start building the website for yourself depending on the project and your skill-set.

TL;DR

  1. Create A Color Palette
  2. Pick 1 - 2 Fonts
  3. Create Rough Designs On Paper
  4. Build The Wireframes
  5. Create The Mockups
  6. Add Color
  7. Tweak Your Designs Based On Feedback

If you found this article helpful, please consider sharing it on social media so others can find it.

Anything you would add or remove from this process? Let me know over on Twitter.

P.S.

This article was inspired by a Twitter Thread I wrote. You can check it out here:

Design