Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
1.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
240
Cartoon Creativity
Avatar for Jen Myers jenmyers
0
260
How To Not Be an Expert
Avatar for Jen Myers jenmyers
1
310
How to Start Coding from Any Level
Avatar for Jen Myers jenmyers
0
290
Shepherding Unicorns
Avatar for Jen Myers jenmyers
2
360
Owning It
Avatar for Jen Myers jenmyers
0
330
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
550
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
610
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
910

Other Decks in Design

See All in Design
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
Avatar for Cygames, Inc. cygames
PRO
2
1.6k
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
560
20260802東京都市大学オープンキャンパス授業
Avatar for Kimura Atsunobu a2k
0
110
デザイナーがいない部署にハーネスを設計する
Avatar for 太田賢一 kenichiota0711
5
5.7k
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
Avatar for Beeworks Marketing Design webnaut
2
140
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
130
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
280
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
Avatar for 都村　美帆 abokadotyann
2
440
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
200
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.6k
AI-DLC AI駆動開発ライフサイクルとAI-DLC Worlflows V2のご紹介
Avatar for Atsushi Fukui fatsushi
2
1.3k
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
Avatar for インクルーシブデザインスタジオCULUMU culumu
0
170

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1.1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
580
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
580
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
10k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
540
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
880

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/