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

Other Decks in Design

See All in Design
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
110
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
100
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
1
1.6k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
Avatar for Kaito UDAGAWA kaitou
1
170
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.5k
An Early Spring | Storyboard | Scenes 1-18
Avatar for Gio Fortunato giofortuna_story
0
250
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
450
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
2
710
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
850k
札幌の雪を観光資源に変える：デザインプログラムSESSAの挑戦
Avatar for Ittyanm ittyann
0
240
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.6k
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
270

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
650
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
106
19k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k

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/