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… 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 ‘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!