Design for Developers: Introduction to Bootstrap 3
Upcoming SlideShare
Loading in...5

Design for Developers: Introduction to Bootstrap 3



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 ...

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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design for Developers: Introduction to Bootstrap 3 Design for Developers: Introduction to Bootstrap 3 Presentation Transcript

  • Design for Developers Bootstrap 101
  • Introduction and Overview
  • John Bertucci • Professionally M Web Developer / Design • Lakeshore Technical College Advisory Committee Adjunct Professor • UW – Madison Computer Science
  • 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!
  • 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
  • Four Basic Principles Of Design
  • Four Basic Principles Proximity Alignment Repetition Contrast TypographyColor Bonus Principles
  • Proximity
  • 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
  • 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
  • Proximity Some Examples A store locator listing or perhaps a business card.
  • Proximity Some Examples The Proximity of Humans to Cats…
  • Alignment
  • Alignment Elements should not be placed arbitrary. Place elements in relation to others.
  • Alignment An Example Aligning elements horizontally and vertically. (and some proximity too)
  • Alignment An Example Tetris Fail
  • Alignment The Grid
  • Alignment The Grid “A network of uniformly spaced horizontal and perpendicular lines” ~Merriam-Website
  • Alignment Grid - Golden Ratio Divine Proportion 1.6180339887… As early as Pythagoras. Width / Phi
  • Alignment Grid - Rule of Thirds A “Simple” Golden Ratio Divide a space in Thirds Then do it again And again
  • Alignment Gridulator Width + Columns = Column to Gutter width * Front-End Frameworks usually have their sizes, but can be customized
  • Repetition
  • Repetition Repeat elements, styles and design consistently.  Font-size and Family across Headers and Copy  Bullet Styles  Color  Border Thickness / Style  Margins / Padding
  • Repetition An Example m
  • Repetition Andy Warhol How can this relate to web design?
  • Contrast
  • 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?)
  • Contrast Good & Bad Image from Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
  • Contrast Example Corporate home page for a plastics and molded wood manufacturer.
  • Color Bonus Principles!
  • 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
  • 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,
  • Color Temperature Image from Color Scheme Designer
  • Color Schemes Color Scheme Designer • Mono • Complement • Triad • Tetrad • Analogic • Accented Analogic
  • Color Another Helpful Site Colour Lovers
  • Typography (Fonts to the rest of us)
  • 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 ( 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
  • Typography In Ten Minutes 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
  • 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!) 2. Adobe Edge Web Fonts (FREE!) 3. ($10/month) 4. ($25/Year) 5. Font Squirrel (FREE!)
  • 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
  • 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
  • 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
  • Bootstrap Example Getting Started! 1. Downloading Bootstrap 2. Adding it to a page 3. Using it to style up a “Store Locator”
  • Bootstrap Example Robot Love Website
  • Questions? Stay Classy!