design for developers: introduction to bootstrap 3
DESCRIPTION
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.TRANSCRIPT
Design for DevelopersBootstrap 101
Introductionand Overview
John Bertucci• ProfessionallyMWeb Developer / Design
• Lakeshore Technical CollegeAdvisory Committee Adjunct Professor
• UW – MadisonComputer Science
TopicsDesign
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 PrinciplesOf Design
Four Basic Principles
ProximityAlignment
RepetitionContrast
TypographyColorBonus Principles
Proximity
ProximityThe 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
ProximitySome Examples
A list or a menu of items that below to a category.
SIZESSmallMediumLargeX-LargeMATERIALWoodPlasticPaddedVeneerCOLORSWhiteBlackRedGreenBlueYellow
SIZESSmallMediumLargeX-Large
MATERIALWoodPlasticPaddedVeneer
COLORSWhiteBlackRedGreenBlueYellow
ProximitySome Examples
A store locator listing or perhaps a business card.
ProximitySome Examples
The Proximity of Humans to Cats… XKCD.com
Alignment
AlignmentElements should not be placed arbitrary. Place elements in relation to others.
AlignmentAn Example
Aligning elements horizontally and vertically.
(and some proximity too)
AlignmentAn Example
Tetris Fail
AlignmentThe Grid
AlignmentThe Grid
“A network of uniformly spaced horizontal and perpendicular lines”
~Merriam-Website
AlignmentGrid - Golden Ratio
Divine Proportion
1.6180339887…
As early as Pythagoras.
Width / Phi
AlignmentGrid - Rule of Thirds
A “Simple” Golden Ratio
Divide a space in Thirds
Then do it again
And again
AlignmentGridulatorwww.gridulator.com
Width + Columns =
Column to Gutter width
* Front-End Frameworks usually have their sizes, but can be customized
Repetition
RepetitionRepeat elements, styles and design consistently.
Font-size and Family across Headers and Copy
Bullet Styles
Color
Border Thickness / Style
Margins / Padding
RepetitionAn Example
NationalGeographic.com
RepetitionAndy Warhol
How can this relate to web design?
Contrast
ContrastWhen 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?)
ContrastGood & Bad
Image from
GoMediazine.com
Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
ContrastExample
BemisMfg.com
Corporate home page for a plastics and molded wood manufacturer.
ColorBonus Principles!
ColorColor 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
ColorAssociation
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,
ColorTemperature
Image from
Color Scheme Designer
ColorSchemeDesigner.com
ColorSchemes
Color Scheme Designer
ColorSchemeDesigner.com
• Mono
• Complement
• Triad
• Tetrad
• Analogic
• Accented Analogic
ColorAnother Helpful Site
Colour Lovers
www.colourlovers.com/
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… readerattention.”
~ 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 ‘cute’)
TypographyIn Ten Minutespracticaltypography.com
1. BODY TEXTMore text than anything else. Focus on that first. (80 / 20 rule)
2. POINT SIZE (CSS: font-size) 10 to 12 for Print15 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 thatTIMES NEW ROMAN or Arial
TypographyWeb FontsThere’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
BootstrapWhat 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
BootstrapBenefits
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
BootstrapHow 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
BootstrapExample
Getting Started!
1. Downloading Bootstrap
2. Adding it to a page
3. Using it to style up a “Store Locator”
BootstrapExample
Robot Love Website
Questions?Stay Classy!