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

1. Creating a Website that ActuallyLooks Good Daniel Lewis (“the Ramen Noodle”)

2. Who am I? theRamenNoodle.com AreYouJustWatching.com DJosephDesign.com @theRamenNoodle

3. Why bother?

5. Boring = bad = bye-bye3

6. Go to sleep now!

9. Quality

10. Expert?

11. Eye to see and understand good design

12. Wisdom to pick better templates

13. Vocabulary to communicate better with a designer

14. Skills to produce your own design

15. Design Principles Contrast Consistency Cleanliness Complimentariness Catchiness Calling Conscious recognition

16. Contrast The same or completely difference

17. Size Big vs. little

19. Weight Thick/heavy vs. thin/light

20. Shape ALL-CAPS vs. lowercase

21. Web fonts Arial / Arial Black Verdana Tahoma Trebuchet Times New Roman Georgia Courier New Comic Sans

22. Direction Vertical vs. horizontal Tall vs. flat

23. Color Warm vs. cool Light vs. dark Good vs. evil

24. Special effects Use sparingly With vs. without

25. Don’t use lots of special effects

26. Consistency Repeat styles or elements

30. Cleanliness White space is not evil space

35. Complimentariness Group and separate

37. Catchiness Eye flow and special effects

40. Calling Make them do something!

43. Conscious Recognition Once you know it, you’ll see it

45. HTML The structure of your site

46. CSS Written language of web design

51. CSS structure selector { properties; } p { font-size: 14px; margin-bottom: 9px;}

52. Important selectors h1, h2, h3, h4 p a, a:hover blockquote . (period) # Headers Paragraphs Active links Blockquotes Classes IDs

53. Important properties color font-size line-height width and height position display float background margin padding

54. Images Subtle gradients Textured backgrounds Rounded corners Special effects

55. Image formats JPEG GIF PNG

56. .jpg For photographs

57. .gif For solid colors

58. .png For solid colors and transparency

59. Transparency Not natively supported by IE6 8-bit and 32-bit Use PNGs from Adobe Fireworks

60. Stalk me theRamenNoodle.com AreYouJustWatching.com DJosephDesign.com @theRamenNoodle