Things to consider when designing websites

  • View

  • Download

Embed Size (px)



Text of Things to consider when designing websites

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


  • Basic elementsof visual communication are form, content, arrangement, light, and colour.
  • On the web, success is often measured by how quickly and effectivelyyou communicate your ideas to the user.
  • Be willing to experiment. Be willing to throw it away, and start again.

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

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


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


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

7. CMYK - Cyan Magenta Yellow and Black Asubtractivecolour model.The more colour you add, the darker the colour you achieve.In CMYK however, you cant 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 areadditivecolours -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 spectrumred, green, yellow, orange, blue, and so on. It is the particular wavelength frequency Tint:is the mixture of a colourwith white Shade:is a mixture of a colour and black 10. 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 doesnt 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. Youll 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 dont 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, its 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 its 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 / 13. Hexadecimal valuesFFFFFF (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 greenand the last two set blue. 14. Colour links


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 CSS3font-facerule and font replacement technology such assifrandcufontYou shouldnt use images where real live type should be - if absolutely necessary, then make sure you include your alt tag in the html 16. Dont mix up your fonts too much generally you can use 2 different typefaces - 3 at a push! 17. 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 20. / / / 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:
  • Liquid:Expands to fill the width of the browser window.
  • Fixed:A specific width you choose which does not change regardless of browser window size

Anatomy of a web page 22. 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 mo