Getting Started on Website Layout

One of the most daunting things for someone new to web design (or for someone designing a website for their own use), is to come up with the design/layout for the website. In this post, I will walk you through some things you can do to make the assembly of your site go a bit more smoothly.

For this exercise, I recommend only two things:

  1. some paper,
  2. and a pen or pencil.

These simple tools will help you explore different possibilities for site layout, while also giving you the basic bones for your new site.

Outline the Goals of Your Site

I think one of the best ways to start a layout project is to simply list the main goals of the website. If you’re a non-profit organization, perhaps your main goals are to educate/raise awareness of your cause, raise funds, and gain volunteers. If you’re a graphic designer, then maybe your goal is to show potential clients your work, discuss your design process, and take bookings. Whatever your website is, the first step in the layout process should be to list the top three goals. Go ahead and write them down in one corner of your piece of paper.

Design with Content in Mind

Hopefully, you or your client have already decided on the content that you would like to feature in your web project. Knowing whether your site will be image-heavy or text-heavy is important in deciding how the content will be laid out. If there will be a lot of imagery, than it’s important to also keep the color scheme in mind so that the colors and the images don’t clash with one another. If your website is going to be text intensive, then it’s important to consider adding more color or iconography to break up the text and keep your visitors interested.

Create a Wireframe

Now that you have an idea of the main goals of your website, and the type of content you will have, it’s time to start putting things together in a simple schematic. In web speak, we refer to this schematic as a wireframe. Basically, a wireframe allows you to try out a few options for layout, using simple tools like pen and paper, without wasting too much time at the computer. There are computer-based applications, like Balsamiq, that allow you to do the same thing, but pen and paper are a reliable and a quick way to get the job done. And don’t worry, you don’t have to be good at drawing to come up with a good wireframe (as you’ll see by my example).

For my example, let’s pretend we’re designing a site for the Fluffy Kitten & Cat Rescue, and the site’s three main goals are

  1. to raise awareness about the organization and the overabundance of fluffy, adorable cats and kittens;
  2. to sign-up volunteers to cuddle, brush, and feed the cats and kittens;
  3. to raise money to help feed the kittens, and keep operations going.

Fluffy Kitten & Cat Rescue is going to have a lot of images of cats on it’s site to tug at the heartstrings of potential donors and volunteers (as well as anyone interested in adopting a cat!). I spent five minutes (only five!) coming up with a basic layout with two alternate layouts for the header and second section of the main content.

Wireframe sketch

Normally, I’d suggest spending a bit more time thinking of more alternate layout ideas (because when it comes to design, one idea is never enough) in case the first few options don’t work according to plan. I’d also suggest focusing on one page at a time. The home page is always a solid place to start, but if you’re going to have sub pages, and/or a blog, it’s a really good idea to sketch out possibilities for those pages, too.

OK, I Have a Wireframe, But Now What?

Once you have your hand-drawn wireframe(s), then you can go ahead and start working laying out your working wireframe on your website. I’m going to make an assumption here that you’re using WordPress. MIGHTYminnow loves WordPress because it means we can give a client a site that looks great and is easy to maintain after the project is over. Once you have WordPress installed and ready, you can get started on layout!

In addition to being big fans of WordPress, we’re big fans of  Visual Composer, which is a premium WordPress plugin that allows us to build web pages quickly without worrying about code. This not only makes it super easy for us to build sites fast, but it also makes it easy for our clients to maintain and update their website in the future.

Page layout with Visual Composer
The left part of the image shows how Visual Composer looks when working in the WordPress Admin. The screen on the right shows how the site looks to the public.

When adding visual composer elements to your website, it’s a good idea to add as many elements as you need up front, and worry about styling later. Essentially, you’re building a wireframe, or proof of concept, in the browser to test site architecture and layout. Once you’re happy with the layout, then you can work on more details like adding imagery, setting colors, and moving items around until everything is perfect.

This wireframing approach is perfect for our Website Weekend students to tinker around with layout ideas before class. If you’re stuck, don’t worry, we’re here to help, and if you’re looking for a custom design project, we’ll do the wireframing for you!

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.