An introduction to web graphics lesson 1 (c by)

383 views
278 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
383
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

An introduction to web graphics lesson 1 (c by)

  1. 1. An Introduction to Web Graphics Lesson 1 – Design Principles and Logos
  2. 2. WHAT IS A LOGO? WHERE MIGHT YOU SEE LOGOS? WHY ARE LOGOS IMPORTANT?
  3. 3. TIME FOR A QUIZ
  4. 4. HOW DID YOU DO? WHAT CHARACTERISTICS DO THESE LOGO DESIGNS SHARE?
  5. 5. Objectives and Outcomes Objectives • Understand basic design principles of white space, contrast, proximity, alignment, repetition and complimentary colours • Learn how to create a logo using graphics software Outcomes • All: Will be able to say what these words mean • Most: Will use some of these ideas in their work • Some: Will use most of these ideas and explain how they’ve been used • All: Will have created a simple logo • Most: Will have created a simple logo with a coherent design • Some: Will think about audience and produce an appropriate design
  6. 6. PROXIMITY
  7. 7. Proximity • The distance between things in a design has an impact on how they relate to one another • Elements close together appear to have a stronger relationship than those further apart
  8. 8. CONTRAST
  9. 9. Contrast • Contrast works in several different ways • Most obvious example of contrast is the colour of text against a background – Easier to read text that contrasts highly with the background • Can also include all sorts of differences between elements – Make something different so that it stands out – Helps indicate what’s important
  10. 10. Contrast • This is an example of poor contrast. The colour of this text is not different enough from the background colour. Higher contrast is far easier to read.  This text is much easier to read than the text above. Tests indicate that white wording on a black background is harder to read than the black text on a white background.
  11. 11. COMPLIMENTARY COLOURS
  12. 12. This is a complex area but, put simply, ‘opposite’ colours work often well together! Is the opposite true?
  13. 13. REPETITION
  14. 14. Repetition • Saying the same thing or using the same design component several times to get a point across • Use of a consistent theme • Common in nature – the brain accepts it quickly!
  15. 15. ALIGNMENT
  16. 16. Text Alignment • Can enhance or detract from appearance of page. • Can significantly affect readability Aligned left is most common. This provides a consistent starting point for each new line. The eye of the reader becomes used to easily finding the beginning of a new line Centre alignment makes finding the beginning of a new line of text much more difficult. Each line tends to be a different length. As a result it is much more tiring to read text with centre alignment. The eye is constantly guessing and searching for the start point. In addition, centre alignment causes odd line lengths. These odd lengths cause a sort of "choppiness" in how the text reads. It lacks the smooth flow that tends to occur with left alignment. Right alignment seldom serves a useful purpose if readability is a concern. While it may be used in an artistic way, the use of right alignment for significant amounts of text should be avoided. The odd starting points of the text cause the eye to search and the appearance in bulk of such text can be off-putting to some viewers. Always remember that people tend not to read anything that is too difficult or annoying!
  17. 17. WHITE SPACE
  18. 18. White Space White space isn't always white – it’s a graphics design term and refers to the space between objects in a design. So the area between text and a photograph is "white space" even it’s another colour.
  19. 19. Create Your Own Logo • You’re going to create a logo for an imaginary company called Pad Blazer who make games for mobile phones • Use Fireworks • Try to incorporate some or all of the principles we discussed:- – White space – Proximity – Repetition – Alignment – Contrast – Complimentary colours • Keep it simple • Think about audience 600 x 600 Text Shapes
  20. 20. Objectives and Outcomes Objectives • Understand basic design principles of white space, contrast, proximity, alignment, repetition and complimentary colours • Learn how to create a logo using graphics software Outcomes • All: Will be able to say what these words mean • Most: Will use some of these ideas in their work • Some: Will use most of these ideas and explain how they’ve been used • All: Will have created a simple logo • Most: Will have created a simple logo with a coherent design • Some: Will think about audience and produce an appropriate design
  21. 21. Homework • Find a picture or graphic that demonstrates one or more of the design principles we discussed today • white space, contrast, proximity, alignment, repetition and complimentary colours Bring it to the next lesson

×