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
1
1k

Straight-Up Design

Simple ways devs can make apps look and work better.

Avatar for Jen Myers

Jen Myers

January 10, 2013
Tweet

More Decks by Jen Myers

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

Other Decks in Design

See All in Design
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
280
第18回サイゼミ
Avatar for LW lw
1
3.3k
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
160
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
180
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.8k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
210
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.4k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
140
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
840
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
550

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Design in an AI World
Avatar for tapps tapps
0
150
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
70
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
710

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/