Creating Websites That Actually Looks Good

578 views

Published on

From PodCamp Ohio 2. Each slide transitions to the next with a sliding effect, revealing it to be a giant, seamless template.

Simple design principles and easy tips to transform your site from worthless to wonderful without being an artist

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

  • Be the first to like this

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

No notes for slide
  • I want to give you four things
  • http://developer.yahoo.com/yui/examples/layout/grids_layout.html
  • Creating Websites That Actually Looks Good

    1. 1. Creating a Website that ActuallyLooks Good<br />Daniel Lewis (“the Ramen Noodle”)<br />
    2. 2. Who am I?<br />theRamenNoodle.com<br />AreYouJustWatching.com<br />DJosephDesign.com<br />@theRamenNoodle<br />
    3. 3. Why bother?<br />
    4. 4.
    5. 5. Boring = bad = bye-bye3<br />
    6. 6. Go to <br />sleep now!<br />
    7. 7.
    8. 8.
    9. 9. Quality<br />
    10. 10. Expert?<br />
    11. 11. Eye<br />to see and understand good design<br />
    12. 12. Wisdom<br />to pick better templates<br />
    13. 13. Vocabulary<br />to communicate better with a designer<br />
    14. 14. Skills<br />to produce your own design<br />
    15. 15. Design Principles<br />Contrast<br />Consistency<br />Cleanliness<br />Complimentariness<br />Catchiness<br />Calling<br />Conscious recognition<br />
    16. 16. Contrast<br />The same or completely difference<br />
    17. 17. Size<br />Big vs. little<br />
    18. 18.
    19. 19. Weight<br />Thick/heavy vs. thin/light<br />
    20. 20. Shape<br />ALL-CAPS vs. lowercase<br />
    21. 21. Web fonts<br />Arial / Arial Black<br />Verdana<br />Tahoma<br />Trebuchet<br />Times New Roman<br />Georgia<br />Courier New<br />Comic Sans<br />
    22. 22. Direction<br />Vertical vs. horizontal<br />Tall vs. flat<br />
    23. 23. Color<br />Warm vs. cool<br />Light vs. dark<br />Good vs. evil<br />
    24. 24. Special effects<br />Use sparingly<br />With vs. without<br />
    25. 25. Don’t<br />use<br />lots<br />of<br />special<br />effects<br />
    26. 26. Consistency<br />Repeat styles or elements<br />
    27. 27.
    28. 28.
    29. 29.
    30. 30. Cleanliness<br />White space is not evil space<br />
    31. 31.
    32. 32.
    33. 33.
    34. 34.
    35. 35. Complimentariness<br />Group and separate<br />
    36. 36.
    37. 37. Catchiness<br />Eye flow and special effects<br />
    38. 38.
    39. 39.
    40. 40. Calling<br />Make them do something!<br />
    41. 41.
    42. 42.
    43. 43. Conscious Recognition<br />Once you know it, you’ll see it<br />
    44. 44.
    45. 45. HTML<br />The structure of your site<br />
    46. 46. CSS<br />Written language of web design<br />
    47. 47.
    48. 48.
    49. 49.
    50. 50.
    51. 51. CSS structure<br />selector { properties; }<br />p { font-size: 14px; margin-bottom: 9px;}<br />
    52. 52. Important selectors<br />h1, h2, h3, h4<br />p<br />a, a:hover<br />blockquote<br />. (period)<br />#<br />Headers<br />Paragraphs<br />Active links<br />Blockquotes<br />Classes<br />IDs<br />
    53. 53. Important properties<br />color<br />font-size <br />line-height<br />width and height<br />position<br />display<br />float<br />background<br />margin<br />padding<br />
    54. 54. Images<br />Subtle gradients<br />Textured backgrounds<br />Rounded corners<br />Special effects<br />
    55. 55. Image formats<br />JPEG<br />GIF<br />PNG<br />
    56. 56. .jpg<br />For photographs<br />
    57. 57. .gif<br />For solid colors<br />
    58. 58. .png<br />For solid colors and transparency<br />
    59. 59. Transparency<br />Not natively supported by IE6<br />8-bit and 32-bit<br />Use PNGs from Adobe Fireworks<br />
    60. 60. Stalk me<br />theRamenNoodle.com<br />AreYouJustWatching.com<br />DJosephDesign.com<br />@theRamenNoodle<br />

    ×