The document provides guidance on key elements to consider when designing a website, including colour, typography, containers, page layout, and wireframes. It discusses best practices for using colour schemes, fonts, and whitespace to create an effective visual design. It also emphasizes the importance of wireframes in planning page structure and element placement before adding visual design elements.

1. Creative Sound & Music CMB (Things to consider when) Designing a website

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

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

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

11. Colour Schemes Monochromatic A 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) Analogous An 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. Complementary A 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.

12. Split Complementary A 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 & Tetradic A 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 /

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

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

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

18. Kerning (or letter spacing) is The distance measured between letters Leading (or line height) is the distance between lines

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

20. http://www.google.com/webfonts http://webfonts.fonts.com / http://www.fontsquirrel.com / http://www.typetester.org / http://www.Typechart.com

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

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

28. A grid is a consistent system for placing objects. http://960.gs /

29. (approx.)1.6180339887 The Golden Ratio

33. A typographic grid composed of a series of intersecting vertical and horizontal axis Grids on the web http://Frieze.com http://www.guardi an.co.uk http://www.markb oulton.co.uk/ http://grid. mindplay.dk

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

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

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