Slide 1
Slide 1 text
Style Design Patterns
& Disciplines
@jrhicks
Slide 2
Slide 2 text
Jeffrey Hicks
jrhicks.github.io
@jrhicks
Employee and owning member
At CTEH LLC
developer, designer, & mentor of web
Web technologies and databases
Slide 3
Slide 3 text
React
LiFle Rock
Slide 4
Slide 4 text
Style - A disIncIve appearance
Slide 5
Slide 5 text
Design Pa0erns
General re-usable soluIon
to commonly occurring
problem
Slide 6
Slide 6 text
Learning Design PaFerns
DramaIcally
Increases Quality
Slide 7
Slide 7 text
Panel Layout Pa0ern
• Panels extend to
edges of browser.
• Content width is
fixed and centered.
• First Panel (also
known as hero)
contains large text.
• Panels alternate
color
Source: Brad Sanders
hFps://www.youtube.com/watch?v=ko0jgfRuxJM
Slide 8
Slide 8 text
Panels Extend To Edge
Slide 9
Slide 9 text
Content Fixed Width & Centered
Slide 10
Slide 10 text
“First Panel” is Hero Panel
Slide 11
Slide 11 text
Panels Alternate Color
white
picture
white
grey
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Double Container
Slide 15
Slide 15 text
Double Container Pa0ern
Slide 16
Slide 16 text
Hero Panel
• Large aFracIve
photographs as
background.
• Uncomfortably tall.
• Overlay text using
vigneFe overlay
Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
Slide 17
Slide 17 text
Hero Pa0ern
Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
Slide 18
Slide 18 text
Hero Panel
Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
Slide 19
Slide 19 text
Hero Panel
Text Overlay
• Covered Not Tiled
• Centered
• Legible Text Overlay
Slide 20
Slide 20 text
Hero Panel
Text Overlay
Slide 21
Slide 21 text
Border Discipline
• Use borders lightly
• Not all transiIons need a border
• Must be a darker hue of which ever
background is the darkest
Source: Brad Wesball - hFps://youtu.be/ko0jgfRuxJM?t=1h18m28s
Slide 22
Slide 22 text
Border Discipline
Slide 23
Slide 23 text
Border Discipline
Slide 24
Slide 24 text
You Can Now Make This!
Grid Column Pa0ern
Solves alignment and verIcal
rhythm through equally sized
columns and guFers
Slide 25
Slide 25 text
Grid Column Pa0ern
Slide 26
Slide 26 text
Grid Column Pa0ern
Slide 27
Slide 27 text
Grid Column Pa0ern
Slide 28
Slide 28 text
Grid Column Pa0ern
Slide 29
Slide 29 text
Column Spans
Column Span = 1
Column Span = 6
Column Span = 2
Slide 30
Slide 30 text
CSS Libraries
• Have done all the math
for us.
• Provide style classes
for column-span
possibility.
Slide 31
Slide 31 text
CSS Libraries
• Does the math
• Provides style classes
for each column span
width possible.
• Provide row
containers to give
columns a place to
live. Ideally columns
totaling 12.
Slide 32
Slide 32 text
Bootstrap Example
Slide 33
Slide 33 text
Bootstrap Example
Slide 34
Slide 34 text
Pop Quiz!
Slide 35
Slide 35 text
Pop Quiz!
• What are these?
Slide 36
Slide 36 text
Pop Quiz!
• What are these?
Slide 37
Slide 37 text
Pop Quiz!
• What are these?
Panels
(or containers in
bootstrap speak)
Slide 38
Slide 38 text
Pop Quiz!
• What are these?
Slide 39
Slide 39 text
Pop Quiz!
• What are these?
Rows
Slide 40
Slide 40 text
Pop Quiz!
• What are these?
Slide 41
Slide 41 text
Pop Quiz!
• What are these?
Columns
Slide 42
Slide 42 text
You Can Now Make This!
The Clearfix Trick
Solves needing to contain a bunch of
floated elements
Slide 43
Slide 43 text
The Clearfix Trick
All items floated
Causes container
to have no height.
Slide 44
Slide 44 text
The Clearfix Trick
Slide 45
Slide 45 text
You Can Now Make This!
Fixed Height anZ-pa0ern
Fixing a container’s height to solve
layout problems is very fragile
Slide 46
Slide 46 text
Fixed Height anZ-pa0ern
Source: Brad Wesball
hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
Slide 47
Slide 47 text
Fixed Height anZ-pa0ern
Source: Brad Wesball
hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
Slide 48
Slide 48 text
Fixed Height anZ-pa0ern
Source: Brad Wesball
hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
VerIcal centering
breaks with:
• Font sizes
• Any design
tweaks.
• User sekngs.
Slide 49
Slide 49 text
Fixed Height anZ-pa0ern
Source: Brad Wesball
hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
Slide 50
Slide 50 text
Fixed Height anZ-pa0ern
Slide 51
Slide 51 text
Fixed Height anZ-pa0ern
Slide 52
Slide 52 text
Fixed Height anZ-pa0ern
Slide 53
Slide 53 text
Fixed Height anZ-pa0ern
Slide 54
Slide 54 text
Fixed Height anZ-pa0ern
Apply the Clear Fix Trick
Slide 55
Slide 55 text
Fixed Height anZ-pa0ern
text-align: center not working floated blocks
Slide 56
Slide 56 text
Fixed Height anZ-pa0ern
inline-block
Slide 57
Slide 57 text
Fixed Height anZ-pa0ern
inline-block
Slide 58
Slide 58 text
Fixed Height anZ-pa0ern
Slide 59
Slide 59 text
You Can Now Make This!
NegaZve Margin Pa0ern
Solves padding elements inside a
container while keeping edge
elements flush with the edge of the
container.
Slide 60
Slide 60 text
You Can Now Make This!
NegaZve Margin Pa0ern
Grid Columns
Solves padding columns inside a row
while keeping the far lel column and
far right column flush with the edges
Slide 61
Slide 61 text
NegaZve Margin Pa0ern
Source - Brad Wesball - hFp://Inyurl.com/jgk3rvp
Slide 62
Slide 62 text
NegaZve Margin Pa0ern
Slide 63
Slide 63 text
NegaZve Margin Pa0ern
Slide 64
Slide 64 text
NegaZve Margin Pa0ern
hFp://www.helloerik.com/the-subtle-magic-
behind-why-the-bootstrap-3-grid-works
Slide 65
Slide 65 text
You Can Now Make This!
NegaZve Margin Pa0ern
Galleries
Solves padding media inside a gallery
while keeping the far lel, top, right,
and boFom images flush with the
gallery edges
Slide 66
Slide 66 text
NegaZve Margin Pa0ern
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
NegaZve Margin Pa0ern
We would like to put
padding between
gallery items.
We do NOT want to
lose our nice flush
lines.
Slide 69
Slide 69 text
NegaZve Margin Pa0ern
Pukng margin around the
items breaks out lel and
right alignment.
Slide 70
Slide 70 text
NegaZve Margin Pa0ern
The items are inside a
gallery. Lets put a border
so we can see it.
If we put a negaIve margin
on the gallery equal to the
spacing around the items …
Slide 71
Slide 71 text
NegaZve Margin Pa0ern
Now we just need to
remove the gallery border
Slide 72
Slide 72 text
NegaZve Margin Pa0ern
Warning: You need to do a liFle math to
size the art items to fit.
Slide 73
Slide 73 text
You Can Now Make This!
NegaZve Margin Pa0ern
Cards
Solves padding contents inside a card
while keeping the top, lel, & right
edges of the feature image flush with
the border.
Slide 74
Slide 74 text
NegaZve Margin Pa0ern
Slide 75
Slide 75 text
You Can Now Make This!
Media Object Pa0ern
PresenIng media (image/video) along
with some variable size content (text)
hFp://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
hundreds-of-lines-of-code/
Slide 76
Slide 76 text
Media Object Pa0ern
Slide 77
Slide 77 text
Media Object Pa0ern
Slide 78
Slide 78 text
Medi
Slide 79
Slide 79 text
Medi
Slide 80
Slide 80 text
Media Object Pa0ern
Slide 81
Slide 81 text
You Can Now Make This!
Masonry Layout Pa0ern
Popular style for grouping content
Slide 82
Slide 82 text
Masonry Layout Pa0ern
• Usually white on
grey.
• Great for variable
length collecIons
• Important for
associaIng user
acIon with target.
• I believe
popularized by
Apple
Slide 83
Slide 83 text
Masonry Layout Pa0ern
Slide 84
Slide 84 text
Masonry Layout Pa0ern
Slide 85
Slide 85 text
Masonry Layout Pa0ern
Slide 86
Slide 86 text
Masonry Layout Pa0ern
Slide 87
Slide 87 text
Masonry Layout Pa0ern
Slide 88
Slide 88 text
You Can Now Make This!
hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls
Lobotomized Owl Pa0ern
We want each item to
hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls
Slide 89
Slide 89 text
Lobotomized Owl Pa0ern
Slide 90
Slide 90 text
Lobotomized Owl Pa0ern
Slide 91
Slide 91 text
Lobotomized Owl Pa0ern
Slide 92
Slide 92 text
Lobotomized Owl Pa0ern
Slide 93
Slide 93 text
You Can Now Make This!
Color Discipline
Be conservaIve with color. Choose
two colors at most.
Slide 94
Slide 94 text
Color Discipline
You can choose
different saturaZons
and lightness of the
same hue.
Source: Brad Wesfall: hFps://youtu.be/ko0jgfRuxJM?t=23m10s
Slide 95
Slide 95 text
Color Discipline
You can choose
different saturaZons
and lightness of the
same hue.
Do not cross hues
hFps://www.lightningdesignsystem.com/design/color/
Slide 96
Slide 96 text
Color Discipline
Slide 97
Slide 97 text
Color Discipline
Slide 98
Slide 98 text
Color Discipline
Color is used
sparingly to draw
aFenIon to
important elements
and those that we
want the user to take
acIon on
hFps://www.lightningdesignsystem.com/design/color/
Slide 99
Slide 99 text
Color Discipline
Slide 100
Slide 100 text
Color Discipline
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Thank You
Slide 103
Slide 103 text
AddiZonal Resources
UI Principles for programmers
hFps://www.youtube.com/watch?v=ko0jgfRuxJM
Component Independence & Layout Strategies
hFps://www.youtube.com/watch?v=ofSnkJ9tPPM
@bradwes\all
hFp://Inyurl.com/gvmjey6
UI Principles for programmers
Dec 2015 Conference
Slide 104
Slide 104 text
Upcoming PresentaZons
Slide 105
Slide 105 text
Business ApplicaZon Style Pa0erns
Displaying Data
• Record Lists
• Table
• Tiles
• InteracIve Cards
• Feeds
Layout
• Record Layouts
• Reference Layouts
• Workspace Layouts
• List Layouts
• Table Layouts
• Board Layouts
• Master/Detail Layouts
And Also
• Data Entry
• Messaging
• NavigaIon
• Voice & Tone
• ….