Downloaded 548 times
Uploaded byJohn Bertucci
Design for Developers: Introduction to Bootstrap 3
The document provides an introduction to design principles for developers, focusing on proximity, alignment, repetition, and contrast, as well as the use of Bootstrap as a front-end framework. It explains how these design principles apply to web development, detailing aspects such as typography and color schemes. The document emphasizes the importance of thoughtful design choices to enhance usability and visual appeal in web development.
Design for Developers: Introduction to Bootstrap 3
- 1.
- 2.
- 3. John Bertucci • Professionally M WebDeveloper / Design • Lakeshore Technical College Advisory Committee Adjunct Professor • UW – Madison Computer Science
- 4. Topics Design Parable: The JoshuaTree 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 “Onceyou 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 OfDesign
- 7.
- 8.
- 9. Proximity The way elementsare 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 listor 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 storelocator listing or perhaps a business card.
- 12. Proximity Some Examples The Proximityof Humans to Cats… XKCD.com
- 13.
- 14. Alignment Elements should notbe placed arbitrary. Place elements in relation to others.
- 15. Alignment An Example Aligning elements horizontallyand vertically. (and some proximity too)
- 16.
- 17.
- 18. Alignment The Grid “A networkof uniformly spaced horizontal and perpendicular lines” ~Merriam-Website
- 19. Alignment Grid - GoldenRatio Divine Proportion 1.6180339887… As early as Pythagoras. Width / Phi
- 20. Alignment Grid - Ruleof 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.
- 23. Repetition Repeat elements, stylesand design consistently. Font-size and Family across Headers and Copy Bullet Styles Color Border Thickness / Style Margins / Padding
- 24.
- 25. Repetition Andy Warhol How canthis relate to web design?
- 26.
- 27. Contrast When two itemsare 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 Imagefrom GoMediazine.com Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
- 29. Contrast Example BemisMfg.com Corporate home page fora plastics and molded wood manufacturer.
- 30.
- 31. Color Color can bevery 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 thefirst 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.
- 34. Color Schemes Color Scheme Designer ColorSchemeDesigner.com • Mono •Complement • Triad • Tetrad • Analogic • Accented Analogic
- 35. Color Another Helpful Site ColourLovers www.colourlovers.com/
- 36. Typography (Fonts to therest of us)
- 37. Typography “Typography mat-ters be-causeit 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 goodfree 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 Relatesto 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”
- 45.
- 46.