Design for Developers: Introduction to Bootstrap 3

7,715 views

Published on

As web developers, we might not always have experience or training with principles of design. This presentation's goal is introduce some basic design principles and provide some resources to help developers create better designs or at least become more aware of design. Finally, the end of the presentation will introduce Bootstrap 3 in more of a workshop format. I'll show people who to add Bootstrap to their project and how easy it is to apply some basic design.

Published in: Technology, Design

Design for Developers: Introduction to Bootstrap 3

  1. 1. Design for Developers Bootstrap 101
  2. 2. Introduction and Overview
  3. 3. John Bertucci • Professionally M Web Developer / Design • Lakeshore Technical College Advisory Committee Adjunct Professor • UW – Madison Computer Science
  4. 4. Topics Design Parable: The Joshua Tree Four Basic Principles of Design  Proximity  Alignment  Repetition  Contrast Bootstrap  What‟s Bootstrap?  How does it relate to design? Lets see how it works!
  5. 5. The Joshua Tree “Once you know something, you become conscious of it. You have power over it. You own it. You’re in Control.” ~ Robin Williams – The Non-Designers Design Book
  6. 6. Four Basic Principles Of Design
  7. 7. Four Basic Principles Proximity Alignment Repetition Contrast TypographyColor Bonus Principles
  8. 8. Proximity
  9. 9. Proximity The way elements are grouped together creates a sense unity. Closeness implies a relationship. Gestalt Psychology “The human brain is holistic, parallel and analog with self-organizing tendencies. The human eye sees objects in their entirety before perceiving their individual parts” ~ Wikipedia
  10. 10. Proximity Some Examples A list or a menu of items that below to a category. SIZES Small Medium Large X-Large MATERIAL Wood Plastic Padded Veneer COLORS White Black Red Green Blue Yellow SIZES Small Medium Large X-Large MATERIAL Wood Plastic Padded Veneer COLORS White Black Red Green Blue Yellow
  11. 11. Proximity Some Examples A store locator listing or perhaps a business card.
  12. 12. Proximity Some Examples The Proximity of Humans to Cats… XKCD.com
  13. 13. Alignment
  14. 14. Alignment Elements should not be placed arbitrary. Place elements in relation to others.
  15. 15. Alignment An Example Aligning elements horizontally and vertically. (and some proximity too)
  16. 16. Alignment An Example Tetris Fail
  17. 17. Alignment The Grid
  18. 18. Alignment The Grid “A network of uniformly spaced horizontal and perpendicular lines” ~Merriam-Website
  19. 19. Alignment Grid - Golden Ratio Divine Proportion 1.6180339887… As early as Pythagoras. Width / Phi
  20. 20. Alignment Grid - Rule of Thirds A “Simple” Golden Ratio Divide a space in Thirds Then do it again And again
  21. 21. Alignment Gridulator www.gridulator.com Width + Columns = Column to Gutter width * Front-End Frameworks usually have their sizes, but can be customized
  22. 22. Repetition
  23. 23. Repetition Repeat elements, styles and design consistently.  Font-size and Family across Headers and Copy  Bullet Styles  Color  Border Thickness / Style  Margins / Padding
  24. 24. Repetition An Example NationalGeographic.co m
  25. 25. Repetition Andy Warhol How can this relate to web design?
  26. 26. Contrast
  27. 27. Contrast When two items are different, it creates contrast. Sort of different is not different, it‟s conflict. Go strong or go home! … I mean REALLY different. (Ambiguous enough?)
  28. 28. Contrast Good & Bad Image from GoMediazine.com Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
  29. 29. Contrast Example BemisMfg.com Corporate home page for a plastics and molded wood manufacturer.
  30. 30. Color Bonus Principles!
  31. 31. Color Color can be very emotional (as in psychology) or scientific (theories and schemes).  Color Association - How colors make us feel  Color Temperatures – Warm and Cool  Color Models – Additive and Subtractive  Color Wheels and Schemes
  32. 32. Color Association What are the first three things you think when you see a Color? Red – Adrenaline, blood pressure, anger, love. Darker = indulgence, Browner = Fall / Harvest Orange – Active, energetic, more informal, appetite Yellow – Highly Active, visible (hello Taxi’s!), overpowering Green – Nature, soothing, growth, freshness, hope, less active Blue – Openness, intelligence, faith, calming, reduce appetite, Purple – Royalty, power, innovation, wealth White – Clean, perfection, light, purity Black – Death, evil, power, elegance,
  33. 33. Color Temperature Image from Color Scheme Designer ColorSchemeDesigner.com
  34. 34. Color Schemes Color Scheme Designer ColorSchemeDesigner.com • Mono • Complement • Triad • Tetrad • Analogic • Accented Analogic
  35. 35. Color Another Helpful Site Colour Lovers www.colourlovers.com/
  36. 36. Typography (Fonts to the rest of us)
  37. 37. Typography “Typography mat-ters be-cause it helps con-serve the most valu-able re-source you have as a writer… read-er attention.” ~ Matthew Butterick (practicaltypography.com) Web fonts are free and well supported, so for the love of Pete… STOP USING ARIAL! (and don‟t use decorative fonts even if they‟re
  38. 38. Typography In Ten Minutes practicaltypography.com 1. BODY TEXT More text than anything else. Focus on that first. (80 / 20 rule) 2. POINT SIZE (CSS: font-size) 10 to 12 for Print 15 to 25 for Web 3. LINE SPACING (CSS: line-height) 120-145% of the point size 4. LINE LENGTH (CSS: width of the container) 45-90 characters per line (2-3 lowercase alphabets) 5. FONT (CSS: font-family) Don’t use System Fonts, you’re better than that TIMES NEW ROMAN or Arial
  39. 39. Typography Web Fonts There‟s good free resources! Paid for services aren‟t expensive. Limit your fonts! They can drastically increase page size and ruin style Browser support is quite good, but still use fallback fonts. 1. Google Fonts (FREE!) http://www.google.com/fonts 2. Adobe Edge Web Fonts (FREE!) http://html.adobe.com/edge/webfonts 3. Fonts.com ($10/month) http://www.fonts.com 4. TypeKit.com ($25/Year) http://typekit.com 5. Font Squirrel (FREE!) http://www.fontsquirrel.com
  40. 40. Bootstrap What Is Bootstrap? • Front-End Framework o Simple Terms: A CSS and JS File (optional)  Common Web Design and Layout Patterns (CSS)  Common Widgets and Functionality (JS)  Built using LESS (sorry SASS advocates) • Created by Mark Otto and Jacob Thornton when working @Twitter
  41. 41. Bootstrap Benefits  Faster Prototyping/mock-ups, and development  Well tested styles  Mobile First / Responsive Styles Drawbacks  Overhead (v3 not bad: 127k => 92k CSS & 28k JS)  Bootstrap designs look like Bootstrap designs  “DIV bloat” if you‟re not careful or don‟t fully customize
  42. 42. Bootstrap How Bootstrap Relates to Design Principles • Proximity – Designer‟s responsibility • Alignment – 12 column* Fluid Grid (*customizable) • Repetition – Default typography, Normalize, Designer‟s responsibility. • Contrast – Designer‟s responsibility, but components have decent contrast. • Color– Designer still needs to craft a color palette (component defaults) • Typography– Designer still need to use Web Fonts
  43. 43. Bootstrap Example Getting Started! 1. Downloading Bootstrap 2. Adding it to a page 3. Using it to style up a “Store Locator”
  44. 44. Bootstrap Example Robot Love Website
  45. 45. Questions? Stay Classy!

×