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

Straight-Up Design

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
350
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
610
Redesigning the Interface
Avatar for Jen Myers jenmyers
4
890

Other Decks in Design

See All in Design
Signull 団体説明資料
Avatar for Signull signull
0
730
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.2k
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
230
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.5k
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
880
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
2
3.3k
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
7.3k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
270
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
320
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.4k
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
7
5.1k
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
220

Featured

See All Featured
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
670
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
340
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
470
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
230
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
650

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/