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.
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
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
23. Repetition
Repeat elements, styles and design
consistently.
Font-size and Family across Headers and
Copy
Bullet Styles
Color
Border Thickness / Style
Margins / Padding
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
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,
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
40.
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