Design for Developers: Introduction to Bootstrap 3
•Download as PPTX, PDF•
30 likes•12,695 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Design for Developers: Introduction to Bootstrap 3
Similar to Design for Developers: Introduction to Bootstrap 3 (20)
Recently uploaded
Recently uploaded (20)
Design for Developers: Introduction to Bootstrap 3
- 3. John Bertucci • Professionally M Web Developer / Design • Lakeshore Technical College Advisory Committee Adjunct Professor • UW – Madison Computer Science
- 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. 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. Four Basic Principles Of Design
- 8. Proximity
- 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. 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. Proximity Some Examples A store locator listing or perhaps a business card.
- 12. Proximity Some Examples The Proximity of Humans to Cats… XKCD.com
- 13. Alignment
- 14. Alignment Elements should not be placed arbitrary. Place elements in relation to others.
- 15. Alignment An Example Aligning elements horizontally and vertically. (and some proximity too)
- 18. Alignment The Grid “A network of uniformly spaced horizontal and perpendicular lines” ~Merriam-Website
- 19. Alignment Grid - Golden Ratio Divine Proportion 1.6180339887… As early as Pythagoras. Width / Phi
- 20. Alignment Grid - Rule of Thirds A “Simple” Golden Ratio Divide a space in Thirds Then do it again And again
- 21. Alignment Gridulator www.gridulator.com Width + Columns = Column to Gutter width * Front-End Frameworks usually have their sizes, but can be customized
- 22. Repetition
- 23. Repetition Repeat elements, styles and design consistently. Font-size and Family across Headers and Copy Bullet Styles Color Border Thickness / Style Margins / Padding
- 25. Repetition Andy Warhol How can this relate to web design?
- 26. Contrast
- 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. Contrast Good & Bad Image from GoMediazine.com Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
- 29. Contrast Example BemisMfg.com Corporate home page for a plastics and molded wood manufacturer.
- 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. 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,
- 34. Color Schemes Color Scheme Designer ColorSchemeDesigner.com • Mono • Complement • Triad • Tetrad • Analogic • Accented Analogic
- 35. Color Another Helpful Site Colour Lovers www.colourlovers.com/
- 36. Typography (Fonts to the rest of us)
- 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. 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. 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
- 41. 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
- 42. 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
- 43. 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
- 44. Bootstrap Example Getting Started! 1. Downloading Bootstrap 2. Adding it to a page 3. Using it to style up a “Store Locator”