Lesson 2: Sketching Wireframes


With your sitemap in hand, we can now start to visualize the look and feel of the website. It's important to get clear on the pages you need before doing this. You will also need to know the visuals you may want on your web pages. So before you do anything, make sure you’ve completed Lesson 1 to the best of your abilities and then come back over for the wireframes. 

For this lesson, you might need anywhere from 1-3 hours, so take your time! It’s not a bad idea to look at some websites you enjoy the look of as inspiration.

In this lesson we will:

  1. Find inspiration + create a mood board

  2. Learn about wireframes

  3. Sketch your own wireframes


Step 1: find inspiration + create a mood board

Before you can even think about designing a website, you need to know what it's going to look like. And, with your sitemap plans in hand, you already have a rough idea of what content needs to be on each page, which makes this step a lot easier already!

But what is it going to look like?

Well, to start getting an idea of what you want your website to look like, we suggest creating a mood board for yourself on Pinterest. if you'd prefer not to use Pinterest, we suggest looking at websites you love and bookmarking them for future reference. Just be sure you have the images you like on hand to gain inspiration from, be it a Pinterest board, a folder of images, or a mocked up mood board done on another program.

Look for websites that follow a similar look and feel to what you want to create and consider where the information is placed on each page.

Is it simple and minimal, with small chunks of text and large images? Or is it full of colour and detail?

Knowing how you want your website to look as a whole is key to developing the layout for each page. 

Once you've created your mood board, why not share it with us in the Facebook group? We'd love to look at it with you to get a stronger sense of whether the mood board will reflect your brand wholeheartedly. If you're feeling shy, feel free to show your mood board to a friend. A second set of eyes always helps to see if you've realized the vision you were aiming for.


Step 2: Learn about wireframes

So what is a wireframe? Essentially it's a sketch of one of your website's pages. However, to save time and energy, wireframes use lines and boxes to represent images and text. This example (straight from our sketchbook!) shows exactly what we mean: 

Step 2.jpg

Step 3: Sketch your own wireframes!

It’s time! Sketch your own wireframes! Practice makes perfect, and sometimes less is more. You don’t want your website to be a maze; consider even combining pages together (if it makes sense for your site). Feel free to be as creative or as minimal as you want in your wireframes. Just as long as your sketches have all the information necessary, then you’ve done what you need to do. And remember, wireframes are guides. They can change and that’s ok.

Now that our wireframes are laid out, you’ll get a better sense of the kind of information you’ll need to plan for. So let’s get on writing our content!

Salt Design Co.