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
340
Owning It
Avatar for Jen Myers jenmyers
0
330
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
530
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
600
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
890

Other Decks in Design

See All in Design
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
190
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
280
where_imagination_ends_ai_begins.pdf
Avatar for R-524 r5ni4
0
210
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
310
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
760
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
2k
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
1.4k
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
210
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
170
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
690
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
490
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3.2k

Featured

See All Featured
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
8.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
320
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
340
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
300
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k

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/