How to plan your website's layout and style (Part IV)

If you’ve been following along this series, by now you are already clear on:

  • Your site’s two main goals.
  • How many and which pages you need to build.
  • Where each page should lead to.
  • What content you should have on each page.
  • Which template you should use.

 

To catch up with this series, here are the previous posts:

  1. How to prepare to create a website in Squarespace.
  2. How to organize your pages' content.
  3. My approach on choosing the perfect Squarespace template.

 

Now, in today’s post we’ll be looking at how you can plan the layout and style of the pages of the site.

 

Previously, I mentioned that even when you plan the homepage’s content LAST, you should design it FIRST.

This is because the homepage will set the style for the rest of the website, so it’s easier to start with it.

 

Setting the layout for your client's content is something you absolutely must do before setting the style, if you want to make things easier for you as a web designer.

 

I neglected this step for a long time and found myself constantly struggling with my client’s designs because I kept changing my mind about the content’s position.

 

Currently, I do not move forward with a design before getting this part ready.

 

Setting the layout of your homepage

There are a few ways you can go about this, and you can even go through all the methods if you want to, but it’s not necessary.

The key thing here is to focus on positioning the text, images and calls to action so they flow nicely in your pages.

 

1. CREATING A SKETCH

I can’t draw and I can’t write pretty either, so if that excuse was forming in your mind right now you can dismiss it because it doesn’t matter.

A sketch, even a terrible one, is a great way to get your ideas flowing when it comes to setting the layout for the site’s content.

 

You can do like me and make little annotation with ideas for background colors or effects you’d like to add to certain elements, or even specific images you’d like to use in a particular spot.

 

The advantage of creating a sketch in pen and paper is that it's annoying to switch things around once they’re drawn, so you’re most likely to think harder on the layout of each section of the pages before moving onto the next.

 

2. CREATING A WIREFRAME

Now, a wireframe is basically taking your sketch to the next level since you can use apps and software to create them.

I use Photoshop for this, but there are a few free apps available online that were created with this purpose:

 

If you’re not a pen and paper kind of person, then perhaps a wireframe is the way to go for you.

Keep in mind that everything should be grayscale here so you can focus on the position of your client's content, just like in the sketch. So refrain from adding colors and images if you’re using a software like Photoshop.

 

3. CREATING A PROTOTYPE

This is something I recently started doing with my design clients because I know it’s not easy to grasp the concept of a sketch or a wireframe; these feel really flat and static and I want my clients to be able to start interacting with their site.

 

For this, I use Squarespace and set grey blocks for images and dummy text for the text sections if the client hasn’t provided all the content yet – which in general they have.

At this stage I like to also implement a glimpse of color for calls to action and their brand’s font, just to make it look more THEM.

 

Since by this point you should already know which template will suit your client's site best, you can go ahead and create your prototype with it and start setting the layout for the main image, text and button blocks that will be part of the homepage.

 

The advantage of doing a prototype instead of a wireframe is that if you discussed with your client a certain functionality, like anchor points on the homepage, a slideshow banner, a text carousel, etc., by building a prototype you can already give her a better idea of how things will work once the site is created!

 

Setting the style of your homepage

Once you’re clear on where the content is going to go inside the homepage then its time to move onto the style guides.

 

Since your client should already have a brand identity – I set it as a requirement for my clients – you know which colors and fonts go with her brand and if its more on the whimsical side, if it has a corporate tone, etc.

 

It's very important to be clear on the brand identity, because in this stage we’re not looking to create a moodboard, what you want to do is set the general style that her homepage and the rest of her site is going to have.

This strategy helps me save LOTS of time during revision rounds with clients, because by setting the style of the website earlier on, there are no surprises later.

 

The idea for the style guides isn’t mine, Christine from Designing to Delight shared it in her process on her blog and I thought it was the most genius thing I’d ever heard. She calls them Style Tiles.

 

Since I started implementing this step in my design process, I’ve stopped dreading sending my clients the mockups I create for their pages because I know they will get accepted since the prototype and style guides were already approved!

 

So, to create your style guides what you can do is lay out the type of images that you'll be using, if they’ll have any specific overlay on them, any decorative details you’ll be adding to the page, the distribution of font colors and sizes amongst h1, h2, h3 and p, the style of the buttons and their hover modes, etc.

 

Creating your homepage mockup

As I mentioned already, it’s a good idea to begin with your homepage’s design to set the look of the rest of the site, that's why all these steps have focused on it.

 

So now that you have your prototype (or sketch or wireframe), you can create a mockup by adding the corresponding images, decorative elements and colors that go with the approved style guide.

 

I create my mockups in Photoshop and I really enjoy this part of the process because I don’t have to stop to think what the next section will have or look like, I already know.

Right now you might be wondering “if you already have the prototype ready, why not build the site directly?”

 

Good question!

I used to do that, but I wasted too much time setting up the things that needed code and if I wanted to make a change, it took more time than simply using the color picker in PS to change a color, moving an image or switching it for another one.

 

By creating a mockup you have the freedom to move things around, if needed, in a couple of minutes, besides its best to see not only the flow within each section but how all the elements in that page go together.

 

Once your homepage mockup is approved by your client, you can move onto designing mockups for the other main pages of the site. I design 3 more for larger sites.

 

In this case, you could start with wireframes and then design the mockups – especially if you feel the layout for the inner pages will be tricky – but since you already have an idea of the layout your client likes from the prototype, I would go straight to mockups.

 

One thing I would HIGHLY recommend you do when creating these inner pages is to create them one day, go to bed and then look at them with fresh eyes the next day.

 

I’ve found that this simple strategy of "sleeping on it" helps me figure out some content positioning I was feeling a little bit “meh” about the day before, and even notice if part of the content could be moved to a different page so it makes more sense.

 

Remember you are the designer, so you can offer solutions you think might work best for your client's site!

 

Ok... we're almost through!

The next and final post is all about FINALLY creating your website in Squarespace!

 

Until next time,

B.


FOLLOW ME FOR MORE!