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

Straight-Up Design

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
170
Cartoon Creativity
Avatar for Jen Myers jenmyers
0
230
How To Not Be an Expert
Avatar for Jen Myers jenmyers
1
270
How to Start Coding from Any Level
Avatar for Jen Myers jenmyers
0
250
Shepherding Unicorns
Avatar for Jen Myers jenmyers
2
300
Owning It
Avatar for Jen Myers jenmyers
0
300
Developers Can't Design (2013)
Avatar for Jen Myers jenmyers
6
480
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
570
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
830

Other Decks in Design

See All in Design
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
170
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
170
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
300
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
250
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
130
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
850
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
150
Designing User Experience through Interaction Design
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
400
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう！
Avatar for コネクリ connecre
1
130
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
1.7k
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
1
190
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
860

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Done Done
Avatar for chrislema chrislema
185
16k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
570
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
890
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k

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/