1. Building Apps with
Great Design
Jared Brown
I built Talentopoly.com & QuickShot for the iPhone
Follow me @jaredbrown
Images property of their respective rights holders
2. Design is not just what it looks like and feels like. Design is how it
works.
- Steve Jobs
3. Design is a feature
• Design
• Attracts
• Informs
• Guides
• Excites!
4.
5. Types of designers
• Illustrators
• Icon
• Web
• Native UI
• Typography
• Product
6. State of the art
• Custom UI elements
• Photo-realistic app icons
• Realistic textures
• Hover and click states
• Shine and round corners
• Noise and gradients
• Typography (hierarchy)
7. Not just graphics
• Design can include
• Layout
• User flow
• Copy-writing
• Front-end
8. Case study: Talentopoly
• Soft-launched in late Oct ’10
• Had real users for months
• Already iterated a bunch
• Needed a professional design
9. #1 Outline the project
• What are some existing websites that appeal to you? Provide links if possible.
• What are your top 3 frustrations with your current or other websites?
• What do you most like about your current or other websites?
• Do you have any color preferences, existing brand colors, and/or colors you do
not wish to include in your project?
• What is your target audience?
• Deadline, timing or exact date of completion
• I am trying to stay within my budget of...
10. #2 Designer search
• Sites with large, talented user bases
• Dribbble, Sortfolio, Carbonmade, Behance
• Match style and budget
• Call or Skype potential designers
• Comfortable talking with them?
• Excited about your project?
17. #5 User feedback
• Bug your significant other
• Email polls to friends & family
• VerifyApp
• Community feedback: Forrst, Convore, etc.
18. #6 Visualize
• Check design on target device(s)
• Understand limitations of devices
• Clickable prototype of designs
19. #7 Implementation
• Pixel perfect PSD slices
• Implement using best practices
• Test cross-platform (if applicable)
20. Tips & tricks
• Don’t use designers as human paint brushes
• Ask for variations
• You’re too close; consult with others
• Don’t get stuck on one element
• Get hover and click states
• Trust decisions of good designers
Quick background\n\n- Graduated Purdue with a CS degree in 2004\n- Been working on web apps for 10 yrs (got my start with PHP)\n- iOS apps for 3 yrs\n- 3 yrs ago I built QuickShot & PixelPerfect; combined for 500k downloads\n- Recently I launched Talentopoly.com: a site for developers & designers to share what they’re discovering online\n- Today I want to talk about the importance of design when building apps\n
I feel like this quote says it best.\n\nWhether it’s a mobile, client-side or web app design is really important these days.\n\nApple really gets the importance of good design. There are a lot of web sites that have fantastic design too.\n\nDesign is a feature, it dictates so much about your app.\n\nIn this presentation I want give you an idea of where design is today and how to incorporate it in your projects.\n
I’d like you to start thinking about design as one of your most important features. There’s so much it does.\n\nHere’s an app for tea drinkers.\n\nNotice how this tea app uses a custom nob control, all the details, it looks tangible.\n\nThe design is driving how the app is used. (Touch on bullets, People know how to use it)\n\nThis is a featured app in the App Store.\n\nIt’s selling like crazy.\n
I want to share my excitement for design.\n\nThese images come from Dribbble.com.\n\nDribbble is an invite-only site where some of the best designers post their work.\n\nI love going there to see what talented designers are doing.\n\nIt’s a really great source of inspiration.\n
A common misconception is that designers are pixel pushers and interchangeable.\n\nJust like programmers there are many different types of designers.\n\nOften times one project can have 3 or more different types of designers work on it.\n
The bar has been set high\n\nYou need to be doing all of this today.\n\nTweetbot is the poster boy at the moment.\n\nIt doesn’t really do anything new.\nBut it has a fully custom UI that’s highly interactive (touch on bullets)\nIt even has custom designed sounds\n\nIt has quickly shot to the top of the app pile\n
Design isn’t just pretty pixels\n\nA good designer will be able to help you with all of this.\n\nThis is the stuff I’m getting better at but I’m not great at yet so it’s great to have help.\n
I recently worked with a designer with my latest project, Talentopoly.\n\nI want to share with you 7 things I did that I think helped make the Talentopoly design process a success.\n\nTalk through bullets\n
Graphic design worksheet\n\nGive this to prospective designers, they should ask for it anyway\n\nSaves a lot of time\n\nSpend some time talking through the product, why people use it, and who your audience is.\n
The designer I chose was suggesting great new features during our initial conversation.\n
Use the tool you are most comfortable and quickest with. For me it’s a pen & a sheet of printer paper.\n\nDraw legitimate content. This is really important.\n
\n
\n
\n
I got this idea of creating cheat sheets before we began the design process.\n\nThey can accomplish a few things that I think really helped.\n\nYour designer is not as familiar with the app as you are.\n\nThe cheat sheet should tell them all they need to know about a particular page or screen at a glance.\n
I did one of these for each page on the site\n\nExplain the goal of the page\n\nHelp the designer by listing the various elements on the page so they include them all in the design\n\nTypography hierarchy is an important concept that good designers practice\n
Feedback is really important.\n\nI’m a big believer that a representative sample size will reflect the majority opinion of your intended audience.\n\nDesign transcends audience segments. I can ask my wife her opinion even though she’s not a developer.\n\nEveryone can recognize good design\n\nShe ends up agreeing with the majority most of the time.\n\nShe has an advantage - she’s not emotional about it, she has distance\n
iPad limited to 960px without scaling\n\nLight blues don’t show up well on a glossy LCD in sunlight\n
\n
You can always come back to an element if there’s time at the end of the project.\n\nUse feedback from others\n
