Design 4 Developers
3 likes2,659 views
This document provides an overview of principles of beautiful web design. It discusses design elements like layout, color, texture, typography, and imagery. For layout, it covers balance, unity, emphasis and grids. For color, it discusses color wheels, schemes and resources. It provides examples of good and bad balance, unity and emphasis in layout. It also discusses serif fonts, sans-serif fonts, fixed-width fonts, handwritten fonts and novelty fonts. Finally, it emphasizes the importance of selecting relevant and appealing imagery for websites.
Design 4 Developers
- 2. Principles of Beautiful Web Design
- 4. Design can be learned. (srsly!) Good Design IS Problem Solving: Designer mentality vs. coder methodology. Verbal Visual Logical Emotional Sequential Random Analytical Intuitive Objective Subjective Nielson and Zeldman http://www.happywebbies.com/
- 5. “Design depends largely on constraints.” - Charles Eames
- 6. Layout You gotta Color learn the Texture rules befo Type you try to Imagery break them
- 7. Layout: Balance Finding it and shifting it. Symmetrical & Asymmetrical
- 8. Bad Balance
- 9. Good Balance
- 10. Layout: Unity Via Proximity and Repetition
- 11. Bad Unity
- 12. Good Unity
- 13. Layout: Emphasis Many ways to achieve it, whether you want to or not: Placement Continuance Isolation Contrast Proportion
- 14. Bad Emphasis
- 15. Good Emphasis
- 16. Layout: Grids (are good!) http://designbygrid.com/
- 19. Color: The Wheel Orange, Green, Violet Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet
- 20. Color: Schemes
- 24. Color: Resources 1. http://www.colorzilla.com Firefox eyedropper plugin. 2. http://kuler.adobe.com Flash-based color scheme tool. 3. http://www.colourlovers.com Color scheme community site.
- 25. Texture The web shouldn’t always feel like the web.
- 26. Typography 1. Baseline 2. Cap height 3. Crossbar 4. Serif 5. Meanline 6. Bowl 7. Descended 8. Counter 9. Stem 10. Tittle As with design principles, there are a lot of vocabulary 11. Terminal 12. Ascender terms to digest when first learning about the nuances of 13. Leg typography. Getting to know the 5 basic categories of 14. Ligature fonts is a good foundation. 15. X-height
- 33. 4. Typography: The “OK, Fine” 9 Arial These nine fonts are Arial Black installed by default on most Mac and PC Comic Sans MS computers. Courier New Georgia Impact Times New Roman Trebuchet MS Verdana
- 34. 4. Typography: The “OK, Fine” 9 Specify preferred fonts first: font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Minion, "Times New Roman", times, serif; Use Background Images Use sIFR (Scalable Inman Flash Replacement) Use Cufón (JavaScript text replacement without Flash)
- 35. 5. Imagery Images & illustrations can make or break a website.
- 36. 5. Imagery: Selection 1. What is the most relevant image for the subject? 2. What is the most artistic and interesting image I can use? 3. What would be the most appealing image for the target audience? Digital Web: Cooking with Stock http://tinyurl.com/dw-stock
- 37. Keep at it! “ When they're not working on their day jobs, most top-notch web designers are pushing the web design envelope after-hours or on their own personal sites manipulating current technologies and expanding the medium's design vocabulary.” - Curt Cloninger, "Fresh Styles for Web Designers”, 2001