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!

Choosing a Color Scheme

One of the most important visual elements of a website is the color scheme, and it can be one of the most challenging elements to get right. A site geared at the elderly calls for a completely different color scheme than a site geared at children. And likewise, a site focused on serious issues, like health or social change will likely have different colors than a fan site for Bronies. Not only that, but if you’re working on a site for an international client, understanding a color’s cultural meaning is important. For example, using green in a site for the Western world may signify wealth or freshness, while in Chinese cultures, green may signify exorcism or infidelity according to About.com’s Visual Color Symbolism Chart.

In this post, I’d like to discuss a bit of basic color theory, and few tools we can use to get started in choosing the right color scheme for your next website project.

Choosing a Base Color

First, let’s assume that you already have a logo to work with. Why? Well, having a logo as a starting place makes it a lot easier to choose a base color. A good designer will have already narrowed the logo down to one to three colors, and those colors should already be doing a good job communicating the appropriate message to the target audience. So from there, we can analyze the logo and decide which color acts as the main color, and whether that works as a main color accent in our web design.

Let’s look at an example.

We recently completed a site design for the Piedmont Education Foundation. Our client provided us with a logo, which was purple and white. Straight away, it was easy to tell that our base color for the project would be purple, but how did we come up with the other colors in the project?

Choosing a Supporting Cast of Color

One of my absolute favorite tools for choosing color schemes is Adobe Color CC. You have a few different options for getting started, so let’s go!

Choosing a Color Scheme from a Base Color

    1. For this example, let’s start with a warm, sunny orange. Go to http://color.adobe.com and plug that hex for our sunny orange (#ff6500) into the middle box, and make sure the white base color triangle is in that box (if it isn’t, hover over the bottom area of the box until the tool tip pops up, and click Set Base Color).
    2. Now, let’s select a color rule from the upper left side of the screen. What do these color rules mean? Well, here’s a brief overview:
      • Analogous
        Analogous colors are three or more neighboring colors on the color wheel. Since we selected orange in this example, we should see yellow, yellow-orange, orange, red-orange, and red in our color swatches.
      • Monochromatic
        Normally, monochromatic colors are versions of our base color with black, gray, or white added to create variations of the color, but Adobe Color CC appears to use saturation (how bright, or how rich a color appears) as way to affect color for the monochromatic scheme.
      • Triad
        A triad scheme uses colors that are an equal distance from one another on the color wheel. The result you see may be less than lovely now, but with a bit of finessing, you can get some great results from a triad color scheme. Try pulling the dot sliders in toward the center of the color wheel, or adjusting the bottom slider under a color to add more gray or black to a color.
      • Complementary
        Complementary colors are two colors that are directly across one another on the color wheel. A good rule of thumb when using complementary colors is that the complement should have a contrasting level of saturation, or perceived brightness. Otherwise, the complementary colors will clash too much when used together. To adjust the saturation in Adobe Color CC, simply drag the color dot toward the center of the color wheel.
      • Compound
        In Adobe Color, a compound color scheme is a mash-up of a complementary and analogous color scheme explains Tony Harmer in The Design Jungle, an Adobe blog and design resource. In our example, it is finding the complement to the orange (blue), grabbing one color that is analogous to the blue (green), and two colors that are analogous to the original orange (two desaturated yellow-oranges).
      • Shades
        Shades are fairly straightforward, and simply show different amounts of black mixed into the originating color. What’s fascinating is that adding a lot of black to yellow can actually turn it green!

        An example of different color schemes created using a single base color.

        Left-to-right, top-to-bottom: an analogous scheme, a monochromatic scheme, a triad scheme, a complementary scheme, a compound scheme, and saving a scheme.

    3. If you have an Adobe CC account, then you can log in and save the color scheme to the Creative Cloud library. This is particularly useful if you are going to work in Illustrator, Photoshop, or any of the Adobe apps on the iPhone or iPad because you will have access to your scheme (trust me, this is super helpful when you’re working on a logo in Illustrator!)
      I like the compound color scheme best, so I am going to go ahead and save that. Click the Save button in the upper left corner.
    4. In the pop-up box, enter a name for your color scheme, indicate where you’d like to store it in the cloud, and add any tags you’d like to describe your color scheme. You can also indicate whether you’d like to theme Published to Explore, which will make it viewable by the public (it may be worth being careful here if you are creating a scheme for a client project).
    5. Now you can fire up Illustrator, and see your new color scheme in the Color Themes panel!
An example of the Color Themes panel in Illustrator CC 2015.

Illustrator has a Color Themes panel that allows you to import and use the color scheme you created with Adobe Color. The color scheme can be added to the Swatches panel for ease-of-use.

Choosing a Color Scheme from a Photograph

What if you don’t have a color scheme? Maybe you’ve been tasked with the logo design, and are looking for inspiration for the color scheme based on the content you’ve already received from the client (like a photograph), or you’ve worked with the client on a moodboard, and want to grab colors from there. Well, you’re in luck. Adobe Color has an option to upload a photo and choose a color scheme from there!

  1. Go to the Adobe Color website, and click the camera icon in the upper right of the screen.
  2. Use select an image from your computer. For this example, I’m going to use a photo of our gorgeous office building.
  3. Not unlike the previous method for choosing a color scheme, you can choose different “moods” based on the colors in your photograph.
  4. If you choose Custom, then you can drag the dots around to customize the color scheme based on the image. I wanted a calming vibe with a single pop of color, so I moved my dots around to get some warm grays into the mix.
Examples of a color scheme chosen from a photograph.

Left-to-right, top-to-bottom: a colorful scheme, a bright scheme, a muted scheme, a deep scheme, a dark scheme, and a custom scheme based on a single photograph.

Using either of these methods for choosing a color scheme may not work perfectly, and you may need to consider finessing the scheme in another program, like Adobe Illustrator. The key here is to find a starting point, and use that to guide you in the color-choosing process.

If you want to learn a bit more about color schemes and some high-level color theory, Tiger Color has a brilliant resource on Color Theory.