Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Pretty Mobile - Making Your Application Look Sexy - Gravity Switch
1. Pretty Mobile
Making Your Application Look Sexy
jason@gravityswitch.com
#jasonNmark
gravity switch
Nice people. Award-winning process. Websites done right.
2. What You’ll Learn Today
‣ How Visuals Support Brand
‣ Applying This to Mobile
‣ Review of Your Apps
‣ Review of Icons
gravity switch
Nice people. Award-winning process. Websites done right.
13. Android & Others
Apple only shop
Getting into Android too
We do both
Anything else? HTML5?
gravity switch
gravity switch
Nice Nice people. Award-winning process. Websites done right.
people. Award-winning process. Websites done right.
14. What You’re Best At
Programming
Designing
Usability
Other
gravity switch
gravity switch
Nice Nice people. Award-winning process. Websites done right.
people. Award-winning process. Websites done right.
15. Your Design Experience
Crayons
Use Photoshop well
Design 5 color palettes from this:
Win awards for graphic design
gravity switch
gravity switch
Nice Nice people. Award-winning process. Websites done right.
people. Award-winning process. Websites done right.
16. Pay Attention
Can you tell which are professional?
gravity switch
Nice people. Award-winning process. Websites done right.
24. Why did you think that?
gravity switch
Nice people. Award-winning process. Websites done right.
25. Sorry... I Lied
24 Judgement Calls in 7 Seconds
• Money
• Education
• Interest
• Etc.
gravity switch
Nice people. Award-winning process. Websites done right.
26. What is Brand?
gravity switch
Nice people. Award-winning process. Websites done right.
27. Brand = Feelings, Not Logo
gravity switch
Nice people. Award-winning process. Websites done right.
28. What Does Your App Do?
In 140 characters
gravity switch
Nice people. Award-winning process. Websites done right.
29. Who Uses Your App?
In 140 characters
gravity switch
Nice people. Award-winning process. Websites done right.
30. What Do You Want People to FEEL?
In 3 words
gravity switch
Nice people. Award-winning process. Websites done right.
31. Dig Deeper With One Of Yours
gravity switch
Nice people. Award-winning process. Websites done right.
32. Dig Deeper With One Of Yours
National brands
gravity switch
Nice people. Award-winning process. Websites done right.
33. Dig Deeper With One Of Yours
National brands
What do you expect?
gravity switch
Nice people. Award-winning process. Websites done right.
34. Dig Deeper With One Of Yours
National brands
What do you expect?
What emotions?
gravity switch
Nice people. Award-winning process. Websites done right.
43. If you haven’t gone too far...
you haven’t done your job.
gravity switch
Nice people. Award-winning process. Websites done right.
44. Remember
It doesn’t matter if you like it
It doesn’t matter if your boss likes it
It matters if it works
gravity switch
Nice people. Award-winning process. Websites done right.
45. How to Hire Designers
2 hours
5-10 people
Pay them for their time
Mood Boards and Designs
You’ll know who to work with
gravity switch
Nice people. Award-winning process. Websites done right.
46. Do You Have Style?
gravity switch
Nice people. Award-winning process. Websites done right.
47. Main Menu
gravity switch
Nice people. Award-winning process. Websites done right.
48. Main Menu
gravity switch
Nice people. Award-winning process. Websites done right.
49. Main Menu
gravity switch
Nice people. Award-winning process. Websites done right.
50. Main Menu
gravity switch
Nice people. Award-winning process. Websites done right.
51. Main Menu
gravity switch
Nice people. Award-winning process. Websites done right.
58. Serif vs. Sans-Serif?
Serif = conservative Sans-Serif = Modern
gravity switch
Nice people. Award-winning process. Websites done right.
59. Serif vs. Sans-Serif?
When in doubt, use Sans-Serif.
‣ Easy to read small
‣ More common
gravity switch
Nice people. Award-winning process. Websites done right.
60. Strange Fonts are Hard to Use
gravity switch
Nice people. Award-winning process. Websites done right.
61. Strange Fonts are Hard to Use
tre
nd s pa
ss
gravity switch
Nice people. Award-winning process. Websites done right.
62. What else to know
‣ Buy your fonts
‣ 3 fonts MAXIMUM
‣ Spacing m a t t e r s
‣ Arial and Verdana are good choices
gravity switch
Nice people. Award-winning process. Websites done right.
67. Colors are HARD
2 years of focused practice
gravity switch
Nice people. Award-winning process. Websites done right.
68. A Good Color Palette Has...
5-7 Colors
2 that stand out
3-5 that are related
gravity switch
Nice people. Award-winning process. Websites done right.
70. Shortcut 2: From a Picture
gravity switch
Nice people. Award-winning process. Websites done right.
71. Shortcut 2: From a Picture
gravity switch
Nice people. Award-winning process. Websites done right.
72. What else to know
gravity switch
Nice people. Award-winning process. Websites done right.
73. What else to know
‣ Match your saturation level
gravity switch
Nice people. Award-winning process. Websites done right.
74. What else to know
‣ Match your saturation level
‣ More saturation isn’t better
gravity switch
Nice people. Award-winning process. Websites done right.
75. What else to know
‣ Match your saturation level
‣ More saturation isn’t better
‣ Contrast is eye-catching
gravity switch
Nice people. Award-winning process. Websites done right.
76. What else to know
‣ Match your saturation level
‣ More saturation isn’t better
‣ Contrast is eye-catching
‣ Too much contrast = a Kmart flier
gravity switch
Nice people. Award-winning process. Websites done right.
77. How to Start
gravity switch
Nice people. Award-winning process. Websites done right.
79. Prototypes vs. Wireframes
I’d suggest a prototype because it’s so new.
gravity switch
Nice people. Award-winning process. Websites done right.
80. Rules of Thumb
gravity switch
Nice people. Award-winning process. Websites done right.
81. Rules of Thumb
Cartoons don’t work (usually)
gravity switch
Nice people. Award-winning process. Websites done right.
82. Rules of Thumb
Cartoons don’t work (usually)
Don’t use clip art, other than icons
gravity switch
Nice people. Award-winning process. Websites done right.
83. Rules of Thumb
Cartoons don’t work (usually)
Don’t use clip art, other than icons
Don’t use more than 3 font families (2 is better)
gravity switch
Nice people. Award-winning process. Websites done right.
84. Rules of Thumb
Cartoons don’t work (usually)
Don’t use clip art, other than icons
Don’t use more than 3 font families (2 is better)
Know if you want to stand out, or catch up
gravity switch
Nice people. Award-winning process. Websites done right.
85. A Golden Rule of Design
If you lean back in your chair and can’t easily
tell what you changed in the past 10 minutes,
it’s time to stop working.
- Christine Mark
gravity switch
Nice people. Award-winning process. Websites done right.
87. Critiques are about being critical. If you’re not
brave enough to try something that doesn’t work,
you’re a bad designer.
Be Brave and send something to my Dropbox
and we’ll help you find what works and what
doesn’t work. You’ll be a better designer for it.
gravity switch
Nice people. Award-winning process. Websites done right.
98. There’s Also These Guys
gravity switch
Nice people. Award-winning process. Websites done right.
99. Icons Should Be Iconic
Don’t tell a story
Give one feeling
Keep shapes simple
Don’t overdo it
gravity switch
Nice people. Award-winning process. Websites done right.
100. Other Icon Tips
Don’t hack the highlight away
Don’t put chrome around the edge
gravity switch
Nice people. Award-winning process. Websites done right.
101. Improve Someone’s Icon
Share With Us
jason@gravityswitch.com
#jasonNmark
gravity switch
Nice people. Award-winning process. Websites done right.