things to consider when designing websites

38
(Things to consider when) Designing a website

Upload: nic-finch

Post on 28-Jan-2015

111 views

Category:

Education


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Things to consider when designing websites

Creative Sound & MusicCMB

(Things to consider when)

Designing a website

Page 2: Things to consider when designing websites

• Basic elements of visual communication are form, content, arrangement, light, and colour.

• 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.

Page 3: Things to consider when designing websites

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.

Page 4: Things to consider when designing websites

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.

Page 5: Things to consider when designing websites

• 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/

Page 6: Things to consider when designing websites

• 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.

Page 7: Things to consider when designing websites

CMYK - Cyan Magenta Yellow and Black

A subtractive colour model.

The more colour you add, the darker the colour you achieve.

In CMYK however, you can’t achieve a true black with only CMY (cyan, magenta and yellow).

“K” is black ink, which is used to achieve a more true black.

Page 8: Things to consider when designing websites

RGB - Red Green Blue

Red light, Green light, Blue light

These are additive colours - varying percentages of red, green and blue light create the variety of colours you see on your monitor.

100% red light, 100% green light and 100% blue light added together will create white on your monitor. To create black, the light is turned down

Page 9: Things to consider when designing websites

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

Page 10: Things to consider when designing websites
Page 11: Things to consider when designing websites

Colour Schemes

MonochromaticA monochromatic colour scheme is based on one colour and uses multiple shades of that colour.

Sometimes using a “colour scheme” without the use of colour will catch people off guard.Black and white photos are a good example of this but it can easily be applied to web design. Technically, using black, white and shades of grey is not a monochromatic colour scheme as it doesn’t actually contain any colour. (It is actually called achromatic colour scheme)

AnalogousAn analogous colour scheme is created using colours adjacent to each other on the colour wheel. You’ll need to be careful when using this colour scheme because if you choose colours farther apart than 1/3 of the colour wheel, things will start getting messy.

ComplementaryA complementary colour scheme is created using colours on opposite each other on the colour wheel

high in contrast but the colours should complement each other well.

You must be careful - you don’t want simultaneous contrast in the wrong way.

Simultaneous contrast means that the colours make each other look more vibrant and strong. If you use this in a situation such as foreground and background, it’s painful to look at. A good example is a text background where the text and the background are complementary colours but cause simultaneous contrast.

Page 12: Things to consider when designing websites

Split ComplementaryA split complementary colour scheme is where you use two colours adjacent to the complimentary colour of your base colour. So pick out your base colour, find it’s complimentary colour (the one directly opposite on the colour wheel) and pick two colours adjacent. See, not as complicated as it sounds!

Triadic & TetradicA triadic colour scheme is created by using three colours that are each 1/3 of the colour wheel apart from each other. A tetradic colour scheme is created by using four colours where each pair of colours is complimentary to each other.

Generating colour schemes

http://kuler.adobe.com

http://colorschemedesigner.com/

Page 13: Things to consider when designing websites

Hexadecimal values

FFFFFF (white) or 000000 (black).

Each colour (red, green, blue) is represented with a byte consisting of two digits ranging from 00 to FF.

The first two digits set the colour intensity of red,

the second two digits set the intensity of green

and the last two set blue.

Page 14: Things to consider when designing websites

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/

Page 15: Things to consider when designing websites

Typography

You must understand how fonts affect the design of a page, and your readers.

Usually, you are restricted to using only a few ‘web safe’ fonts that are available on most operating systems. Even with this small list, it can be challenging to manage them in the right way for the best user experience.

There are ways to use more interesting fonts through the new CSS3 ‘font-face’ rule and ‘font replacement’ technology such as ‘sifr’ and ‘cufont’

You shouldn’t use images where real live type should be - if absolutely necessary, then make sure you include your ‘alt’ tag in the html

Page 16: Things to consider when designing websites

Don’t mix up your fonts too muchgenerally you can use 2 different typefaces - 3 at a push!

Page 17: Things to consider when designing websites
Page 18: Things to consider when designing websites

Kerning (or letter spacing) is The distance measured between letters

Leading (or line height) is the distance between lines

Page 19: Things to consider when designing websites

font-family: Arial, Helvetica, sans-serif;font-family: 'Arial Black', Gadget, sans-serif;font-family: 'Bookman Old Style', serif;font-family: 'Comic Sans MS', cursive;font-family: Courier, monospace;font-family: 'Courier New', Courier, monospace;font-family: Garamond, serif;font-family: Georgia, serif;font-family: Impact, Charcoal, sans-serif;font-family: 'Lucida Console', Monaco, monospace;font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-family: 'MS Sans Serif', Geneva, sans-serif;font-family: 'MS Serif', 'New York', sans-serif;font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;font-family: Symbol, sans-serif;font-family: Tahoma, Geneva, sans-serif;font-family: 'Times New Roman', Times, serif;font-family: 'Trebuchet MS', Helvetica, sans-serif;font-family: Verdana, Geneva, sans-serif;font-family: Webdings, sans-serif;font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Web Safe fonts

http://www.fonttester.com/web_safe_fonts.html

Page 20: Things to consider when designing websites

20

http://www.google.com/webfonts

http://webfonts.fonts.com/

http://www.fontsquirrel.com/

http://www.typetester.org/

http://www.Typechart.com

Page 21: Things to consider when designing websites

21

Container

All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies.

For example, the body tag or a div is most commonly used.

In the past, tables may have been used (do not use tables in your layout - it is a depreciated method).

Think of the container as the external walls of your house in which your bedrooms, kitchen, living room, etc. are then placed.

Types of container:

1.Liquid: Expands to fill the width of the browser window.

2.Fixed: A specific width you choose which does not change regardless of browser window size

Anatomy of a web page

Page 22: Things to consider when designing websites

Header

It is generally used in referring to the top section of your web page where your logo, navigation, tagline, etc. are located.

Many people prefer to keep these elements contained within a div for easier page styling, element separation and/or element containment.

The header would be considered a container so it would have two types to choose from: liquid or fixed as mentioned above.

Logo

Your logo is your identity and branding. The most common placement for the logo is within the header, aligned left.

Western countries read from left to right, top to bottom, so your logo will most likely be the first element your visitors look at.

Navigation

Page navigation is one of the most important elements; your visitors need it to use your website. It should be easy to find and use, which is why it is almost always located within the header or at least near the top of the page. Sometimes both types of navigation are used for high content websites.

Types of navigation:

1.Horizontal: A series of links displayed inline, usually referred to as “navigation”.

2.Vertical: A series of links displayed as a vertical stack, usually referred to as “menu”.

Page 23: Things to consider when designing websites

Main Content

As everyone knows (or should), content is king! When people visit your site, this is the element they will be looking for primarily. It should be the main focal point of a web page so visitors find what they are looking for quickly.

Sidebar

The sidebar is the element with your secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc.

This element isn’t necessary although many websites use it.

It is most often right aligned but can be left aligned or both (two sidebars) so long as it doesn’t disrupt main content viewing.

For websites that use horizontal AND vertical navigation, the sidebar is often replaced with the vertical navigation element.

Footer

The end of a web page should always use a footer to let your visitors know they have reached the completion of your web page.

Like the header, the footer isn’t really a specific element but more of a containing section.

Within your footer will be copyright, legal and contact information primarily.

It’s a good idea to include a few links to the most important sections of your site such as the top of the page, home page, contact page, etc.

Some websites use this area as an opportunity to mention related material or other important information.

Page 24: Things to consider when designing websites

These are the main elements of a web page. There are many different ways to organise them but this is perhaps the most common basic layout used online.

Page 25: Things to consider when designing websites

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

Page 26: Things to consider when designing websites

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.

You may feel the strong urge to fill as much empty space as possible but don’t do it!

Empty space is just as important to a good web page design as the content to be used. Empty space helps to guide visitors through content, create page balance and give a good sense of content separation.

Page 27: Things to consider when designing websites

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.

Page 28: Things to consider when designing websites

28

A grid is a consistent system for placing objects.

http://960.gs/

Page 29: Things to consider when designing websites

(approx.)1.6180339887

The Golden Ratio

Page 30: Things to consider when designing websites

30

Page 31: Things to consider when designing websites
Page 32: Things to consider when designing websites
Page 33: Things to consider when designing websites

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

A typographic grid composed of a series of intersecting vertical and horizontal axis

Grids on the webhttp://Frieze.comhttp://www.guardian.co.ukhttp://www.markboulton.co.uk/http://grid.mindplay.dk

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Page 34: Things to consider when designing websites

WireframesWebsite 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.

Page 35: Things to consider when designing websites

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.

Page 36: Things to consider when designing websites

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.

What to include

Page 37: Things to consider when designing websites

37

Page 38: Things to consider when designing websites

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.