DESIGN HACKS
PRAGMATIC MINDED
for the
a hoppy talk from Kyle Neath with a sweet finish
Slide 2
Slide 2 text
Kyle Neath is...
Slide 3
Slide 3 text
~designer
@
Slide 4
Slide 4 text
@kneath
Slide 5
Slide 5 text
warpspire.com
Slide 6
Slide 6 text
My favorite beer
What’s Important
Slide 7
Slide 7 text
Dogfish Head
90 minute IPA
Slide 8
Slide 8 text
But Firestone’s DBA
is so delicious…
Slide 9
Slide 9 text
I can always go for a
Black Butte Porter
Slide 10
Slide 10 text
And Sierra Nevada has
never let me down
Slide 11
Slide 11 text
Luckily, I don’t have to choose
Slide 12
Slide 12 text
Oh yeah, and I like to
fall in the snow
Slide 13
Slide 13 text
What am I doing at
a Ruby Conference?
If I’m a designer…
Slide 14
Slide 14 text
Developers design
lots of things
Slide 15
Slide 15 text
Documentation
Admin Sections
Miniapps & Side Projects
Slide 16
Slide 16 text
But more importantly..
Slide 17
Slide 17 text
Designers vs. Developers
is a false separation
it’s a lot more like a spectrum
Slide 18
Slide 18 text
Design is just as
important as Tech
it’s all about the end product
Slide 19
Slide 19 text
You should want to be
a better designer
Slide 20
Slide 20 text
My design background
A little bit about
Slide 21
Slide 21 text
I just wanted to build
websites
Slide 22
Slide 22 text
Steal Everything
Slide 23
Slide 23 text
Turns out good design is
just a collection of hacks
Slide 24
Slide 24 text
Design theory
Anything I learned in school
Organized or coherent
This talk is not…
Slide 25
Slide 25 text
A collection of hacks
Tips to polish your designs
A couple design strategies
This talk is…
Slide 26
Slide 26 text
Type
A little bit about
Slide 27
Slide 27 text
Good typography is 90%
what you aren’t doing
you don’t have to be fancy
Slide 28
Slide 28 text
Helvetica, Arial, sans-serif
Times New Roman, Georgia, serif
Monaco, Courier New, monospace
Classic fonts go a long ways
Slide 29
Slide 29 text
Playing with font weights
and styles is easy & less risky
Slide 30
Slide 30 text
Playing with font weights
and styles is easy & less risky
font-weight:300
font-weight:bold
font-weight:normal
Slide 31
Slide 31 text
We're GitHub! If you're ordering a tshirt,
you probably know that this isn't the main
gig. Please enjoy one of our cheeky grey
shirts and be sure to check back
periodically for new designs. Exercise
patience while waiting for your crisp new
attire - we are busy every day doing
things…
Increase line height to
improve readability
Slide 32
Slide 32 text
We're GitHub! If you're ordering a tshirt,
you probably know that this isn't the main
gig. Please enjoy one of our cheeky grey
shirts and be sure to check back
periodically for new designs. Exercise
patience while waiting for your crisp new…
Increase line height to
improve readability
Slide 33
Slide 33 text
A baseline grid can be
a great tool
but don’t be too obsessive about it
Slide 34
Slide 34 text
A baseline grid can be
a great tool
but don’t be too obsessive about it
font-size:100px
font-size:50px
Vertical Grid = 50px
Slide 35
Slide 35 text
Color
A little bit about
Slide 36
Slide 36 text
Color can be a great way
to highlight content
Slide 37
Slide 37 text
Hey guys! We just restocked the
GitHub mugs today. Head on over to
the GitHub Shop to pick one up today!
It can also serve to set
expectations
Slide 38
Slide 38 text
But using color for the
sake of color can be
distracting & harmful
Slide 39
Slide 39 text
Start with greyscale
Add color later
Slide 40
Slide 40 text
A lot of people use grey
on colored backgrounds
Slide 41
Slide 41 text
Add some of the
background hue instead
Slide 42
Slide 42 text
Wondering why your
gradients look so... drab?
Slide 43
Slide 43 text
Blend Mode Superpower
Overlay Gradient
Slide 44
Slide 44 text
Blend Mode Superpower
Color Burn Gradient
Slide 45
Slide 45 text
Adding black or white
desaturates colors
Lesson Learned
Slide 46
Slide 46 text
Stock Icons & Images
Cheating with
Slide 47
Slide 47 text
Salads are hilarious and
spice up boring pages
Slide 48
Slide 48 text
But seriously
Slide 49
Slide 49 text
Icon sets are crazy helpful
Insanely cheap
Slide 50
Slide 50 text
648 Icons
PNG & Vector & Fonts
$240
Pictos
Slide 51
Slide 51 text
Your time is better
spent elsewhere
Slide 52
Slide 52 text
Spacing & Alignment
It’s all about
Slide 53
Slide 53 text
Your text is crying for
padding
We're GitHub! If you're ordering a tshirt, you
probably know that this isn't the main gig.
Please enjoy one of our cheeky grey shirts
and be sure to check back periodically for
new designs.
Slide 54
Slide 54 text
We're GitHub! If you're ordering a tshirt,
you probably know that this isn't the
main gig. Please enjoy one of our
cheeky grey shirts and be sure to check
back periodically for new designs.
Slide 55
Slide 55 text
We're GitHub! If you're ordering a tshirt,
you probably know that this isn't the
main gig. Please enjoy one of our
cheeky grey shirts and be sure to check
back periodically for new designs.
When in doubt...
padding = margin = font size
Slide 56
Slide 56 text
Grids are awesome
http://960.gs will make your design 10x better
Slide 57
Slide 57 text
ALIGN ALL
PLEASE JUST
THE THINGS
Slide 58
Slide 58 text
Alignment is not hard
It is not a special skill
It just takes effort
Slide 59
Slide 59 text
ALIGN ALL
THE THINGS
Slide 60
Slide 60 text
Visual Hierarchy
Bring it together with
Slide 61
Slide 61 text
Visual hierarchy is all
about boxes within boxes
Slide 62
Slide 62 text
Related elements should
be grouped together
Scottocat Chacon
Dashboard Your Profile Log Out
800 whiskey points
Slide 63
Slide 63 text
Scottocat Chacon
Dashboard Your Profile Log Out
800 whiskey points
Scottocat’s links (and no one else’s)
The avatar (Scottocat) owns this
box: everything descends from it
Slide 64
Slide 64 text
Scottocat Chacon
800 whiskey points
This doesn’t belong!
It’s not owned by Scottocat
Search the whole site...
Always be thinking about
what owns the box
Slide 65
Slide 65 text
UI design is just a series
of boxes within boxes
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Owned by the
logo (site)
Global Actions
Slide 68
Slide 68 text
Owned by the activity stream
Slide 69
Slide 69 text
Owned by pie0
Slide 70
Slide 70 text
These are post-specific
actions
…because the post owns
this box
Slide 71
Slide 71 text
Write out an outline of
your UI elements
Slide 72
Slide 72 text
Header
‣ Logo
‣ Global navigation
‣ User box
Dashboard
‣ Activity stream
➡ My friends’ actions
➡ My actions
‣ Repository list
➡ Owned repositories
➡ Watched repositories
Slide 73
Slide 73 text
Try the squish test
Slide 74
Slide 74 text
1000px → 400px
Slide 75
Slide 75 text
1000px → 400px
Slide 76
Slide 76 text
Presentations
Improve your
Slide 77
Slide 77 text
For the love of all that is good in this world…
FONT SIZE
INCREASE YOUR
Slide 78
Slide 78 text
def code_blocks
warning = "Long strings should be trunca…"
display(warning)
end
80 characters is
way too many
Slide 79
Slide 79 text
def code_blocks
warning = "Long strings should be trunca…"
warning = check_warning(warning)
warning = spellcheck_warning(warning)
warning = fix_problems(warning)
warning = create_problems(warning)
warning = add_dimension(warning)
warning = move_forward(warning)
warning = move_backward(warning)
display(warning)
end
Got a big hunk of code?
Slide 80
Slide 80 text
def code_blocks
...
warning = fix_problems(warning)
...
end
Step through it one line
at a time
Slide 81
Slide 81 text
def code_blocks
...
warning = create_problems(warning)
...
end
Step through it one line
at a time
Slide 82
Slide 82 text
40 characters wide
4 lines of code
Font size as big as will fit
Brevity over correctness