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
66
Featured
See All Featured
Side Projects
sachag
452
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
3
68
Principles of Awesome APIs and How to Build Them.
keavy
125
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
0
160
The Pragmatic Product Professional
lauravandoore
31
6.2k
KATA
mclloyd
27
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
39
9.2k
Music & Morning Musume
bryan
46
6k
Designing with Data
zakiwarfel
98
5.1k
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 ✎