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
Building Applications with DynamoDB
mza
96
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Visualization
eitanlees
148
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Code Review Best Practice
trishagee
70
19k
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 ✎