Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Stephanie Briones
Search
Stephanie Briones
February 08, 2013
4
250
Stephanie Briones
Make Better Things, a talk for developers.
Stephanie Briones
February 08, 2013
Tweet
Share
More Decks by Stephanie Briones
See All by Stephanie Briones
Stephanie Briones
smbriones
2
70
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Into the Great Unknown - MozCon
thekraken
40
2k
Six Lessons from altMBA
skipperchong
28
4k
Context Engineering - Making Every Token Count
addyosmani
3
62
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Fireside Chat
paigeccino
39
3.6k
The Invisible Side of Design
smashingmag
301
51k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Transcript
MAKE BETTER THINGS
Developers can make pretty things too.
GOALS Teach you some simple techniques Encourage you to learn
more Empower you to make good decisions Inspire you to make better things
How I learned
You should learn
Let’s talk about design
Questions are welcome
What is good design?
GOOD DESIGN 1. makes people stop and look 2. makes
people smile 3. motivates and inspires 4. makes things easier to use
What are some Beautifully designed websites or apps?
trentwalton.com
nordicruby.org
2012.buildconf.com
Why are these good?
FIVE RELIABLE PRACTICES 1. Content first 2. Type is always
!important; 3. Use color thoughtfully 4. Use a grid 5. Make it Responsive
FIVE RELIABLE PRACTICES 1. Content first 2. Type is always
!important; 3. Use color thoughtfully 4. Use a grid 5. Make it Responsive next week
Content First 1
What is your content?
None
None
Type is always !important; 2
37signals.com/svn/posts/3404-reminder-design-is-still-about-words
37signals.com/svn/posts/3404-reminder-design-is-still-about-words
Identifying quality typefaces
QUALITY TYPEFACES 1. multiple weights 2. bold and italic styles
3. readable at small and large sizes
Typekit Webtype
hellohappy.org/beautiful-web-type
theleagueofmovabletype.com
losttype.com
None
Display Font For body text, which is usually the majority
of the text on your page, you’ll want to select something that has a good x-height, use an appropriate line-height, and line-length. A BRIEF TYPE LESSON
Select an awesome font family
Omnes Pro 8 weights + italics in all weights =
16 options Typekit
Use a modular scale
Tim Brown modularscale.com
Use color thoughtfully 3
Selecting colors
How colors make us feel
RED
None
YELLOW
None
GREEN
None
BLUE
None
PURPLE
None
BLACK
None
WHITE
None
None
Some advice...
Keep it simple. Seek out feedback. Talk to designers.
Thanks.
Image Credits: Blue: wallpoper.com/wallpaper/blue-tardis-369781 Red: www.avto.goodfon.com/ford/wallpaper-395830.html Yellow: topwalls.net/yellow-field-field-flowers-grass-house-landscape-nature-trees Purple: globeattractions.com/field-lavender-trees-sky-nature
Black: makeupbycherylh.com/2012/01/macbook-pro-15-inch-22-ghz-laptop.html Green: commons.wikimedia.org/wiki/File:Green_turtle_swimming.JPG White: www.hdwallpic.com/strawberries-white-background-1566.html ✎