Layout and

Composition
Created by Nick Merrigan

The Design Process

When someone asks you to design something,

you may need to ask a lot of questions, or you
may just start creating. This all depends on
what you are creating. When creating a website
you have to ask questions, but keep in mind you
still want to create something of your own.
There are three key tasks when creating a
design Comp.
Discovery
Exploration
Implementation

Whats a Comp?

A comprehensive dummy is an image of a

layout thats created before we begin to
prototype the design using a markup
language.

Discovery

Discovery is just as it sounds. If burning bright (a candle

shop) asks you to build a website about their shop, you
have to know what they want. Unless you go to their
store often and you are knowledgeable about candles,
you may have a lot of questions about this subject.
In the discovery stage you want to learn about the client
and what they do.
You want to make a meeting with the client face to face,
but before you do this you should:
Research their company
Look at their website (if they dont have a website, search for
them on Google)
If you are unable to find anything about the business, learn as
much as you can about their industry before meeting.

Discovery Cont.

Meeting with the client for the first time

shouldnt be about selling yourself or
impressing the client, it should be more
about communication. You need to find out
what the client wants.
Things you should do during the meeting:
Try to do more listening than speaking
Bring a notepad and take a lot of notes
If you bring a tablet or laptop, limit you time spent
using it
If you must bring technology to the meeting, try and
record your meeting with the clients permission.

Good Questions

If creating a new website, here are some good questions

to ask. Dont limit yourself to just these questions.

What does the company do?

What is your role in the company?
Does the company have an existing logo or brand?
What is your goal in developing a website?
What information do you wish to provide online?
Who is your target audience?
What is your projects budget and timeline?

If the site is a redesign, you may ask questions like:

What are some problems with your current design?
What do you hope to achieve with the redesign?
Are there any elements you would like to keep in the redesign?

Exploration

In this stage, you need to start to analyze all of

your information. A good way to do this is by
using sticky notes or some kind of marker
board to organize your information. You should
come up with what the pages are called to best
describe the information you are giving them,
and decide where in the website, pages will be
linked.
Your information should be organized in groups
and subgroups to give your site direction on
what your navigation will look like.

Implementation

The implementation process is just the beginning of

your site. This is where you will be using a pencil and
a sketchpad to sketch out your ideas on layouts and
designs.
After you have your sketches, you should choose one
you like and go into a program, like Photoshop, and
create a design layout.
The reason its better to design the layout before
going into HTML and CSS is because when you are
working with code, you arent thinking about the
design aspect as much. With designing in Photoshop,
you are free to make the site as you want it.

Good Design

There are two main standpoints when

defining good design. There is usability,
which includes functionality, efficiency, and
how the information is presented. The other
perspective is the visual appeal of the
website.
If you have just an artistic website, people may
find it hard to use and leave
If you have a website that is just focused on
usability, you may not fit the clients needs and
people may want to leave because of the ugliness.

Good Design Cont.

In a good design, people must be pleased

by the look but drawn to the content. When
thinking about usability, you want the user
to be able to scan the website quickly to
find what they are looking for. You dont
want the design to hinder this process.

Exercise

Look around at a few websites. Look at

some you are familiar with and some you
are not. Look at the design and usability of
the site. Does the design work well? Is it
difficult to navigate?

Good Design Cont.

Users can move about the site easily.

The navigation should be placed well in the site
and stand out.
The navigation should show where you are on a
site so the user doesnt get lost or confused.
The navigation should have a different hover icon
so the user knows its a link and that they know
that they are in the hit area of that link.

Good Design Cont.

Users recognize each page of the site as

belonging to that site.
You can achieve this by creating unity. You can
create unity by repeating colors and patterns. You
may also notice that people recognize pages as a
part of the site by having the logo in the same
place on every page.

Anatomy of a Web Page

When looking at a web page, you can most often

see these certain elements:

Container
Logo
Navigation
Content
Footer
Whitespace

Although these are seen on most websites, they

may not always be there. On the other hand, on
larger websites, there may be more than these
six elements.

Container
Every page has a container. This could be
the body tag, or it could be a div tag. The
container is a place to put all of our
contents. These containers can have a
fixed, fluid, or responsive layout.
Without a container, our site would drift off
the page into nothingness.

Logo

The logo is a part of the website that gives

brand recognition. The logo should always
be placed on the top of a web page. This
lets the user know that they are still on the
correct website.

Navigation
It is very important that navigation is easily
found on your site. The navigation is most
commonly found right at the top of the
website. Whether the navigation is on the
right, left, or top, it should always be above
the fold.
The fold is the area a user can see before
they scroll down.

Content

Content is one of the most important parts

of your site. If the visitor doesnt find what
they are looking for in the matter of
seconds, they will leave the site.

Footer

The footer usually has copyright

information, a few links, and some legal
information. Its a good idea to separate
the footer from the webpage to let the users
know that they have reached the bottom of
the webpage.

Whitespace
While you may feel the need to fill all of the
page, resist the urge. For design,
whitespace is great. This helps the
webpage pop out and can make it easier to
read.
White space helps guide the eye around
and creates unity as well.

Grid Theory

When looking at different grid theories, two

come to mind most often when creating a
website. These include the rule of thirds,
and the 960 gird system.

Rule of Thirds

In the rule of thirds, you split your design

into 3 columns. There are many ways you
can use these columns, but the most
common way to split them up is by using
one for navigation and the other two for
content. You can even make the page have
3 rows and then split your columns in half to
make 6. This will allow you to line up your
information to have a nice clean look to
your site.

960 Grid System

The idea of a 960 grid system is using a

design that is 960px wide. With this
system, you could have 12, 16, or 24
columns. This may seem like a lot to deal
with, but you can make a lot of great
designs with this. This is a grid system that
takes a lot of practice, but its not
something you must have.

Exercise

Look at some sites and see if they used a

grid system. What kind of grid system do
you think they used? How many columns
did they use? Was the design effective with
the grid system?

Balance

Just as a balancing scale weighs things, so

does our eyes. We call this visual balance.
There are two major types of visual balance:
Symmetrical This occurs when the elements are
the same on either side of the axis line. This doesnt
mean the image must look exactly the same, but it
has to have the same size and a similar look.
Asymmetrical This is a more abstract form of
balance. The objects may be different shapes, sizes,
colors, and tones, but they are arranged throughout
the page to give an equal balance on each side.

Balance Cont.

Asymmetrical balance is used most often

when creating a web design. This is
because it is visually more appealing. This
balance is also more flexible in how you use
it. Sometimes you may have a whole
column dedicated to one thing while the
rest of the page balance is balanced by
titles, text and graphics.

Unity

There are many ways you can try and

create unity. We will be looking at how
proximity, and repetition do this.

Proximity

One way to create unity is by placing things

closer together. You will notice that when
you have something closer together, it
almost looks like an object of its own. You
will notice that the objects on the right look
like a big object even though its the same
shapes just closer together.

Repetition

If you have an ant farm, you may think of

the ants as one group. This is because
these ants form a colony. This is an
example of unity. Just like the colony of
ants, repetition of colors, shapes, textures,
or similar objects help to form unity in a
web site.

Repetition

Whether you think so or not, repetition is

used often in a website. Think back to
looking at photo galleries. Most often the
pictures are the same size. Another
example is a bulleted list. When you are
reading a bulleted list, do you think of that
list as many individual items, or a group of
items in a list?

Emphasis

Now that we have discovered unity, lets

look at emphasis. Some ways you create
emphasis is by placement, flow, isolation,
contrast, and proportion.

Placement

Although it isnt used very often in web

design, the center of a composition is the
place most often looked at first. The further
from the center an element is, the less likely
it will be noticed.

Continuance

Continuance is the idea that our brain wants

to follow a path. If you look at a website
you will notice that your eyes dont just sit
in one spot. An easy way to achieve this is
by aligning your elements to certain parts of
the grid you are using.

Isolation

Isolation works like proximity. When there is

an object on its own you will notice that
your eye is drawn to it. Your brain wants to
know why this object is by itself, making the
object a focal point.

Contrast

Contrast is a great way to create emphasis.

You will see a lot of sites use contrast to
create a call to action.
A call to action is a singular link or button you
want your visitors to click on in a page.

This concept is simple, the greater the

difference between a graphic and its
surroundings, the more the element will
stand out.

Proportion

Proportion is always a good way to create

emphasis. If something looks out of the
ordinary, you tend to notice it. Think of
looking at a person in a picture and they
were the same size as the statue of liberty.
You would tend to notice one or the other
depending on the surroundings. Your mind
wants to know, is that person the size of the
statue of liberty, or is that a miniature
version of the statue.

Navigation

There are three main navigation layouts

most common used in web design.
Left column navigation
Right-column navigation
Three-column navigation

Left Column

Left-column navigation is the most common

source of navigation. Most often you will
see some sort of navigation on the top, but
one third or less(thinking back to the grid
theory) is being used for navigation on the
left.

Right Column

You will hardly ever see a page with just

right-column navigation. Right-column
navigation is usually used as a second
source of navigation if the site has to much
information for just the top navigation bar.
Sites like this are usually news sites where
the information is on the left and the
navigation is out of the way on the right.

Three Column

Three-column navigation is where you have

navigation on the top, left, and right side.
Most of the time, the top navigation is the
main navigation while the left and the right
sides are some sort of secondary
navigation. This could be something like
specials, deals, or like on amazon a way to
search something more specifically.

Inspiration

One of the best way of getting inspiration is

by looking at other peoples work. There are
several great sites when wanting to view
web designs.

http://unmatchedstyle.com
http://cssdrive.com
http://designmeltdown.com
http://patterntap.com

Morgue File

A morgue file is a collection of examples

that help you out with the inspiration of
your design. If you were trying to create a
web site on trees, you would go around to
different sites on trees, take a screen shot
of the ones you like or that inspires you, and
place them in a file.

Fresh Trends

There are several new trends when

designing for the web. You have:
Navigationless Magazine Style
Expansive Footers
Bare-bones Minimalism

You can find out more in The Principles of

Beautiful Web Design on pages 30-32.

Resizing
There are a few ways that you can have
your website made. They can have a fixed,
fluid, or responsive layout.
The two most common are fixed and fluid
designs. In a fixed design you tell the page
exactly what size each section will be. In a
fluid design, your page will resize
depending on the size of the browser
window.

Fixed vs Fluid

Fixed Pros
Gives designer more control over how an image is floated
Allows for planned whitespace
Improves readability with narrower text blocks

Fixed Cons
Can appear dwarfed in large browser windows
Takes control away from the user

Fluid Pros
Adapts to most screen resolutions and devices
Reduces user scrolling

Fluid Cons
Can get challenging to read
Harder to execute successfully
Limits/imposes on whitespace

Responsive Layout

A newer layout that is now available are

responsive layouts. This is a layout the
completely changes when it hits a certain
width. This allows the designer to control
more of how a website, phone and tablet
looks like.

Screen Resolution
In the past, designers used to design for
screen resolutions of 800x600. This has
changed and now we design for 1024x768.
According to W3Schools, in 2010 only 1% of
users still used a screen resolution of
800x600.
It is believed that we will continue to design
using 1024 px because of the line length on
web pages. If you were to try and design in
larger layout, you risk your users readability.

Exercise

Check out some sites, after all you have

learned, which sites do you think have a
good design?

Conclusion

A good design has unity, emphasis, good

navigation, and much more. Now you
should be able to go through the design
process and be able to create a good
looking website using the anatomy of a
website.

Resources

Beaird, J.(2010). The Principles of Beautiful

Web Design.