Things to consider when designing websites


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Things to consider when designing websites

  1. 1. Creative Sound & Music CMB (Things to consider when) Designing a website
  2. 2. <ul><li>Basic elements of visual communication are form, content, arrangement, light, and colour. </li></ul><ul><li>On the web, success is often measured by how quickly and effectively you communicate your ideas to the user. </li></ul><ul><li>Be willing to experiment. Be willing to throw it away, and start again. </li></ul>
  3. 3. Colour <ul><li>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. </li></ul><ul><li>as soon as you look at a website, you can normally guess within seconds what that site is all about. </li></ul><ul><li>Visitors may be quick to judge a website by its colour scheme and style of design. </li></ul>
  4. 4. Use colour to emphasise important sections of your website <ul><li>You can make compositional choices in order to guide the viewer's eye to important components within your work. </li></ul><ul><li>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. </li></ul>
  5. 5. <ul><li>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. </li></ul><ul><li>Colours used within graphics, backgrounds, & page elements are meant to enhance the look of the page, not to take over the page </li></ul><ul><li>Just beware of over usage of graphics and images and you will be at least one step towards a well designed website. </li></ul><ul><li>Nobody wants to stay and linger on a site that is badly designed. </li></ul><ul><li> </li></ul>
  6. 6. <ul><li>Stay consistent with your colour scheme throughout your site </li></ul><ul><li>If you use colours that are completely different on every page, how will your visitors know that they are still on your website? </li></ul><ul><li>A consistent and steady usage of colours will allow web surfers to feel more at ease and in control of their navigation. </li></ul><ul><li>To get your visitors to recognise your website, having a consistent look and feel is important. </li></ul>
  7. 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. 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. 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
  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 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.
  11. 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 /
  12. 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.
  13. 14. Colour links <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  14. 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
  15. 16. Don’t mix up your fonts too much generally you can use 2 different typefaces - 3 at a push!
  16. 18. Kerning (or letter spacing) is The distance measured between letters Leading (or line height) is the distance between lines
  17. 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
  18. 20. / / /
  19. 21. <ul><li>Container </li></ul><ul><li>All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies. </li></ul><ul><li>For example, the body tag or a div is most commonly used. </li></ul><ul><li>In the past, tables may have been used (do not use tables in your layout - it is a depreciated method). </li></ul><ul><li>Think of the container as the external walls of your house in which your bedrooms, kitchen, living room, etc. are then placed. </li></ul><ul><li>Types of container: </li></ul><ul><li>Liquid: Expands to fill the width of the browser window. </li></ul><ul><li>Fixed: A specific width you choose which does not change regardless of browser window size </li></ul>Anatomy of a web page
  20. 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. <ul><li>Navigation </li></ul><ul><li>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. </li></ul><ul><li>Types of navigation: </li></ul><ul><li>Horizontal: A series of links displayed inline, usually referred to as “navigation”. </li></ul><ul><li>Vertical: A series of links displayed as a vertical stack, usually referred to as “menu”. </li></ul>
  21. 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.
  22. 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.
  23. 25. Whitespace <ul><li>“ Whitespace,” or “negative space” is the space between elements in a composition. </li></ul><ul><li>White space should not be considered merely 'blank' space - it is an important element of design which enables the objects in it to exist. </li></ul><ul><li>The balance between positive (or none-white) and the use of negative spaces is key to aesthetic composition. </li></ul><ul><li>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) </li></ul><ul><li>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. </li></ul><ul><li>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 </li></ul>
  24. 26. Thinking about Whitespace <ul><li>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. </li></ul><ul><li>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. </li></ul>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.
  25. 27. Grids <ul><li>The grid serves as the framework for page layout. </li></ul><ul><li>The text and images used on the page fit into place and align with one another according to the grid. </li></ul><ul><li>grids can help to achieve balance, spacing, and to compartmentalise the data. </li></ul>
  26. 28. A grid is a consistent system for placing objects. /
  27. 29. (approx.)1.6180339887 The Golden Ratio
  28. 33. A typographic grid composed of a series of intersecting vertical and horizontal axis Grids on the web http://www.guardi http://www.markb http://grid.
  29. 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.
  30. 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.
  31. 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
  32. 37.
  33. 38. Design Summary <ul><li>Good design does not occur suddenly or without work. It is an evolution of successes and failures. </li></ul><ul><li>Your style will develop over time. It grows from experience, from practice, from trial and error, and from observation. </li></ul><ul><li>The way you solve problems is your style. Believe in it. </li></ul><ul><li>Write all your ideas down. Take photos, draw. </li></ul><ul><li>Look around you. visit museums and galleries, notice posters & flyers. Think about what you like and why you like it. </li></ul>