Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Straight-Up Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jen Myers Jen Myers
January 10, 2013
Design
1k
1

Straight-Up Design

Simple ways devs can make apps look and work better.

Avatar for Jen Myers

Jen Myers

January 10, 2013

More Decks by Jen Myers

See All by Jen Myers
Listen to Your (and All) Mothers
Avatar for Jen Myers jenmyers
0
190
Cartoon Creativity
Avatar for Jen Myers jenmyers
0
240
How To Not Be an Expert
Avatar for Jen Myers jenmyers
1
290
How to Start Coding from Any Level
Avatar for Jen Myers jenmyers
0
270
Shepherding Unicorns
Avatar for Jen Myers jenmyers
2
320
Owning It
Avatar for Jen Myers jenmyers
0
320
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
520
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
590
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
860

Other Decks in Design

See All in Design
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
740
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1k
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
340
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
1.1k
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.6k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
250
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.1k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
210
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
790
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
120
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
150
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
110
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.2k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
880
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
760
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
170
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.5k

Transcript

  1. Straight-Up D E S I G N simple ways for

    devs to make apps look and work better

  2. Hi. I’m Jen. I’m a designer.*

  3. Design Myths 1 Design is decoration. Design is subjective. Design

    is separate from development. 2 3

  4. Simple ways to do design? Do tell!

  5. There are no simple ways to do design.

  6. But there are some places to start.

  7. Inspiration

  8. STEAL.

  9. SEARCH AND BOOKMARK.

  10. Layout

  11. CREATE A FLOW.

  12. negative space

  13. None
  14. None

  15. USE GRIDS.

  16. WIREFRAME.

  17. WIREFRAME.

  18. USE PATTERNS.

  19. Details

  20. CHOOSE FONTS.

  21. CHOOSE FONTS.

  22. CHOOSE COLORS.

  23. CHOOSE ICONS.

  24. frameworks & helpers

  25. Twitter Bootstrap? Um ... do you have to?

  26. JEN MYERS @antiheroine jenmyers.net/speaking

  27. RESOURCES http://www.austinkleon.com/steal/ http://pinboard.in/u:jenmyers/t:inspiration/ http://pinterest.com/deliberatepixel/web-app-design/ http://dribbble.com http://inspectelement.com/articles/the-principles-of-good-web-design-part-1-layout/ http://balsamiq.com http://ui-patterns.com/ http://www.google.com/webfonts http://typekit.com

    http://youtu.be/BMP5cuAYG_Q http://www.colourlovers.com/ http://www.colorschemer.com/online.html http://cs.nyu.edu/courses/fall02/V22.0380-001/color_theory.htm http://css-tricks.com/examples/IconFont/