Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
260
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
490
How to Not Be an Expert
Avatar for Jen Myers jenmyers
8
580
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
840

Other Decks in Design

See All in Design
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.2k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
670
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜（Scrum Fest Mikawa 2025）
Avatar for Tadashi Inoue tadashiinoue
0
940
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
110
Emmy's Artwork
Avatar for McKenna mcksmith
0
180
Portfolio 齋藤明敏 Hiroyuki Saito
Avatar for HIROYUKI SAITO crearedesign
0
130
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
300
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
140
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
240
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
230

Featured

See All Featured
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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/