Introductiontowebdesign 090806135811-phpapp02

231 views

Published on

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

  • Be the first to like this

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

No notes for slide
  • It enables you to limit your designs in mind. Limit in terms of, it’ll give you what sense of design you will be implementing.
  • One color, varied hues
  • Colors adjacent to one another in the color wheel
  • Introductiontowebdesign 090806135811-phpapp02

    1. 1. 1
    2. 2. 2 HOW DO I START?
    3. 3.  Know the purpose of your site  Business?  Organizational?  Hobbyist?  Personal? 3
    4. 4.  Set up the website anatomy  Containing Block  Logo  Navigation  Content  White Space  Footer 4
    5. 5. 5
    6. 6.  Layout using Rule of Thirds  Application of the “divine proportion” ▪ Generally makes the site aesthetically appealing 6
    7. 7. 7
    8. 8. 8
    9. 9. 9
    10. 10. 10
    11. 11. 11
    12. 12.  Common layout examples  Left-column navigation ▪ http://www.thinkgeek.com/index.shtml  Right-column navigation ▪ http://www.audi.com  Three-column navigation ▪ http://store.apple.com/ 12
    13. 13. 13 Done with the basic stuff. WHAT’S NEXT?
    14. 14.  Colors  One of the designer's best tools  Look and Feel  Branding  Highlight or group content 14
    15. 15.  Colors 15
    16. 16.  Colors  Red to yellow, including orange, pink, brown, and burgundy  Associated with the sun and fire  Represents both heat and motion  When placed near a cool color, a warm color will tend to pop out, dominate 16
    17. 17.   Green to blue, can include violet ▪ Cooler violet is closer to blue  Cool colors can calm people down and reduce tension  In a design, cool colors tend to recede ▪ Great for backgrounds and larger elements on a page, ▪ Wont overpower your content 17
    18. 18.  Monochromatic Scheme  One color, different hues 18
    19. 19. 19 Monochromatic Color Scheme - http://haveamint.com/
    20. 20.  Analogous Colors  Adjacent colors in the color wheel 20
    21. 21. 21 Analogous Color Scheme - http://regines.net.au/
    22. 22.  Complementary Colors  Colors located opposite to each other in the color wheel 22
    23. 23. 23 Complementary Color Scheme http://www.ufl.edu/
    24. 24.  Complementary Colors  Watch out for simultaneous contrast 24
    25. 25.  Colors in Nature 25
    26. 26.  Colors in Nature 26
    27. 27.  Color Scheme 2  http://wellstyled.com/tools/colorscheme2/index-en.html
    28. 28.  Color Blender http://www.colorblender.com/
    29. 29.  Contrast makes things stand out  Things with higher contrast will be more noticeable.
    30. 30.  Creating a document for the web or print, information should be organized and readable  If you are using background graphics on a web page, keep text and other information readable
    31. 31.  Don't use too many font sizesDon't use too many font sizes  2-3 Fonts in all ▪ Headers / headlines ▪ Body Text ▪ Highlights
    32. 32.  Serif  This is Times New Roman, one of the most common serif typefaces  In print, serif type is easier to read  Sans serif  This is Arial, a sans serif typeface  On a computer screen, sans serif type is easier to read
    33. 33.  Keep lines short  Paragraphs: 4-8 lines  Use wider margins to increase white space
    34. 34.  Too many colors  TooToo Many Fonts and StylesStyles  ALL CAPITAL LETTERS ARE DIFFICULT TO READ  Upper and lower case letters are easier
    35. 35.  Do you prefer to read Verdana online?  Do you prefer to read Arial online?  Do you prefer to read Georgia online?  Do you prefer to read Times online?
    36. 36.  Use text when possible  Searched and indexed by web crawlers  Can be selected and copy-pasted  Decreases page load time Effective text 351 B (Text)351 B (Text) 1290 B (GIF)1290 B (GIF)
    37. 37.  Users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.  F for fast.
    38. 38.  Users won't read your text thoroughly in a word-by- word manner.  Scanning  Exhaustive reading is rare  The first two paragraphs must state the most important information.  Start subheads, paragraphs, and bullet points with information  Carrying words that users will notice when scanning
    39. 39. 46 WRAP UP THE STUFF. THANK YOU !!!

    ×