1. Creative Sound + Music
CSM4
Designing a website
Part 1

2. • Basic elements of visual
communication are form, content,
arrangement, light, and color.
• On the web, success is often measured
by how quickly and effectively
you communicate your ideas to the
user.
• Be willing to experiment. Be willing to
throw it away, and start again.

3. Grids
• The grid serves as the framework for page
layout.
• The text and images used on the page fit into
place and align with one another according to
the grid.
• grids can help to achieve balance, spacing,
and to compartmentalise the data.

4. !
!

5. A typographic grid composed of a Grids on the web
series of interesecting vertical and http://Frieze.com
horizontal axis http://www.guardian.co.uk
http://www.markboulton.co.uk/
http://grid.mindplay.dk

6. Whitespace
• “Whitespace,” or “negative space” is the space between elements in a composition.
• White space should not be considered merely 'blank' space - it is an important
element of design which enables the objects in it to exist.
• The balance between positive (or none-white) and the use of negative spaces is key
to aesthetic composition.
• White space is extravagance. White space is the surface of the paper on which you
are printing showing through and on which you are choosing NOT to print (or the
space of a screen you’re not filling with pixels)
• A page crammed full of text or graphics with very little white space runs the risk of
appearing busy, cluttered, and is typically difficult to read.
• Clever use of white space can give a page a classic, elegant, or rich appearance. For
example, upscale brands often use ad layouts with little text and a lot of white
space. Inexpert use of white space can make a page appear incomplete

7. Thinking about Whitespace
• A page crammed full of text or graphics with very little
white space runs the risk of appearing busy,
cluttered, and is typically difficult to read.
• Clever use of white space can give a page a classic,
elegant, or rich appearance. For example, upscale
brands often use ad layouts with little text and a lot of
white space.

8. Colour
• Colour is very important in web design, and can be used to add
spice to your website, relay the mood of a page, as well as to
emphasise sections of a site.
• as soon as you look at a website, you can normally guess within
seconds what that site is all about.
• Visitors may be quick to judge a website by its colour scheme
and style of design.

9. Use colour to emphasise important sections
of your website
• You can make compositional choices in order to
guide the viewer's eye to important components
within your work.
• Try to imagine that your website is an art
composition, in other words, that you will design your
website's page elements in a fashion that presents a
pleasing flow to the user's eyes.

10. • Most of us ʻknowʼ what a well designed website looks like, it is
just getting from a blank screen to a good looking website that is
difficult.
• Colours used within graphics, backgrounds, & page elements
are meant to enhance the look of the page, not to take over the
page
• Just beware of over usage of graphics and images and you will
be at least one step towards a well designed website.
• Nobody wants to stay and linger on a site that is badly designed.
• http://csszengarden.com/

11. • Stay consistent with your colour scheme throughout your
site
• If you use colours that are completely different on every page,
how will your visitors know that they are still on your website?
• A consistent and steady usage of colours will allow web surfers
to feel more at ease and in control of their navigation.
• To get your visitors to recognise your website, having a
consistent look and feel is important.

12. The colour wheel
Primary Colours:the three basic colours (red, yellow and
blue) that cannot be mixed from other colours but can be
used to mix all the other hues
Secondary Colours: are a mixture of two primary colours
TERTIARY COLORS: Yellow-orange, red-orange, red-
purple, blue-purple, blue-green and yellow-green.
These are the colors formed by mixing a primary and a
secondary color.
Complementary Colours:Two colours on opposite sides
of the colour wheel, which when placed next to each other
make both appear brighter.
Analogous Colours: are a palette of compatible colour
combinations that blend well together. They are
neighbours on the colour wheel
Hue:is the name of a distinct colour of the spectrum—red,
green, yellow, orange, blue, and so on. It is the particular
wavelength frequency
Tint: is the mixture of a colour with white
Shade: is a mixture of a colour and black

14. Red is a very hot colour.
fire, violence, and warfare
love and passion.
In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical
effect on people, raising blood pressure and respiration rates. It’s been shown to enhance
human metabolism, too.
Red can be associated with anger, but is also associated with importance
Red also indicates danger in nature
In different cultures, red has different associations.
In design, red can be a powerful accent colour. It can have an overwhelming effect if it’s used
too much in designs, especially in its purest form. It’s a great colour to use when power or
passion want to be portrayed in the design.
Red can be very versatile, though, with brighter versions being more energetic and darker
shades being more powerful and elegant.

15. Orange is a very vibrant and energetic colour.
earthy and autumnal.
orange can represent change and movement in general.
Fruit - it can be associated with health and vitality.
In designs, orange commands attention without being as overpowering as red. It’s often
considered more friendly and inviting, and less in-your-face.

16. energising
It’s associated with happiness and sunshine.
Yellow is also associated with hope
Yellow is also associated with danger, though not as strongly as red.
In Egypt, for example, yellow is for mourning.
In Japan, it represents courage,
and in India it’s a colour for merchants.
In your designs, bright yellow can lend a sense of happiness and cheerfulness.
Softer yellows are commonly used as a gender-neutral colour for babies (rather
than blue or pink) and young children.
Light yellows also give a more calm feeling of happiness than bright yellows. Dark
yellows and gold-hued yellows can sometimes look antique and be used in designs
where a sense of permanence is desired.

17. new beginnings and growth.
It also signifies renewal and abundance.
Green has many of the same calming attributes that blue has, but it also incorporates some of the
energy of yellow.
In design, green can have a balancing and harmonising effect, and is very stable.
It’s appropriate for designs related to wealth, stability, renewal, and nature.
Brighter greens are more energising and vibrant, while olive greens are more representative of the
natural world.
Dark greens are the most stable and representative of affluence.

18. calmness and responsibility.
Light blues can be refreshing and friendly.
Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and
religious connotations
The meaning of blue is widely affected depending on the exact shade and hue.
In design, the exact shade of blue you select will have a huge impact on how your designs are
perceived.
Light blues are often relaxed and calming.
Bright blues can be energising and refreshing.
Dark blues are excellent for corporate sites or designs where strength and reliability are important.

19. a combination of red and blue, and takes on some attributes of both.
associated with creativity and imagination
Dark purples can give a sense wealth and luxury or royalty.
Light purples are softer and are associated with spring and romance.

20. The strongest of the neutral colours.
On the positive side, it’s commonly associated with power, elegance, and formality.
On the negative side, it can be associated with evil, death, the occult and mystery.
Black can be ‘edgy’ as well as very elegant.
It can be either conservative or modern, traditional or unconventional, depending on the colours it’s
combined with.
Commonly used for typography and other functional parts, due to it’s neutrality.
Black can make it easier to convey a sense of sophistication and mystery in a design.

21. Like black, it can work well with just about any other colour.
Often associated with purity, cleanliness, minimalism and virtue.
A neutral backdrop that lets other colours in a design have a larger voice.

22. Light greys can be used in place of white in some designs, and dark greys can be used in
place of black.
Grey is generally conservative and formal, but can also be modern.
It’s commonly used in corporate designs, where formality and professionalism are key.
It can be a very sophisticated colour. Pure greys are shades of black, though other greys may
have blue or brown hues mixed in.

23. earth, wood, and stone.
natural colour and a warm neutral.
Brown can be associated with dependability and reliability, with steadfastness, and with
earthiness. It can also be considered dull.
It helps bring a feeling of warmth and wholesomeness.
As beige - will take on the characteristics of colours around it, meaning it has little effect in
itself on the final impression a design gives when used with other colours.

24. Ivory is a calm colour, with some of the pureness associated with white, though it’s a bit
warmer.
Ivory can lend a sense of elegance and calm to a site. When combined with earthy colours it can
take on an earthy quality.
Can also be used to lighten darker colours, without the stark contrast of using white.

25. Colour links
• http://www.colourlovers.com/
• http://kuler.adobe.com/
• http://www.wellstyled.com/tools/colorscheme2/index-en.html
• http://www.colorspire.com/color/wheel/
• http://www.colorspire.com/color-schemes/creator/
• http://colorblender.com/

26. Wireframes
Website wireframes are simple line drawings that show the
placement of elements on a web page.
You can save yourself a great deal of time by editing the layout of
a simple wireframe at the start of the design process instead of re-
jigging a complex design later.
Using wireframes is a great way to begin a web site project, as it
allows you to focus on layout without the distraction of colour,
type and other design elements.
Concentrate on what goes where on your web pages and the
percentage of space that each element takes up, which can be
determined by your client’s needs.

27. Benefits of Wire-framing
With website wireframes, you have the benefit of tweaking a simple
line drawing to achieve the desired layout. Rather than move
complex elements around a page, it can take very little time to
drag a couple of boxes into new positions.
It is also much more productive for you to focus on the layout
Rather than worry about aesthetic specifics at this stage., you will
be able to begin designing with a finalised layout and structure on
which to base your design.

28. What to include
All of the important elements of a web page should be represented in your
website wireframe. Use simple shapes instead of actual graphics, and label
them. These elements include (see following image)
• Navigation: Buttons for users to visit the main sections of your site.
• logo / Title
• Content areas: Where will your different sections of content appear?
• Wrapper or Container: imagine this acts as an invisible page in a magazine (you may still want to include a
‘wallpaper’ in the background behind the wrapper that fills up the browser window.
• Header: This area at the top of your site is usually the first thing your visitor will see, think about including a title, logo or
relevant image / graphic and possibly a tagline or caption to help introduce visitors to your site.
• Menu / Navigation: Conventionally, a websites’ main navigation is displayed either horizontally along the top of pages
near the header or vertically down the left of right-hand sides of the pages. This first stage of navigation should take
your users to the most important areas of your site. Be as clear and guiding as possible so that new visitors can easily
find what they’re looking for.
• Main content area: Where the real guts of your website reside. This is a container to hold the actual content of your
website. This may be divided into a number of columns (usually 2 or 3) with each colum providing a specific type of
content. A common convention is that a wider section contains page-specific content and a sidebar includes other
relevant information to the page or section a visitor is in. Usually referred to as a sub-menu or secondary navigation.
• Footer: The area at the bottom of web pages to compliment the header. It is common to include any legal content,
navigation that mirrors the header that go to the most important parts of the site. You may wish to put links to relevant
social network sites here.

30. Design Summary
• Good design does not occur suddenly or without work. It is an
evolution of successes and failures.
• Your style will develop over time. It grows from experience, from
practice, from trial and error, and from observation.
• The way you solve problems is your style. Believe in it.
• Write all your ideas down. Take photos, draw.
• Look around you. visit museums and galleries, notice posters &
flyers. Think about what you like and why you like it.