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
220
Cartoon Creativity
Avatar for Jen Myers jenmyers
0
250
How To Not Be an Expert
Avatar for Jen Myers jenmyers
1
300
How to Start Coding from Any Level
Avatar for Jen Myers jenmyers
0
280
Shepherding Unicorns
Avatar for Jen Myers jenmyers
2
350
Owning It
Avatar for Jen Myers jenmyers
0
330
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
540
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
610
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
900

Other Decks in Design

See All in Design
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
980
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
480
Warner Bros. Discovery 2025 Box Office Booklet
Avatar for Sam Bird samb1rd
0
110
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
270
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.8k
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
150
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
8.3k
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.6k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
170
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
700
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
290
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
260

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
270
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
480
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
530
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k

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/