SlideShare a Scribd company logo
1 of 102
Pretty Mobile
Making Your Application Look Sexy




   jason@gravityswitch.com
         #jasonNmark


                                                    gravity switch
                     Nice people. Award-winning process. Websites done right.
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.
Jason@gravityswitch.com


              Web / iPhone / iPad
              Technology serves business
              Educator
              Author




                                                     gravity switch
                                                   gravity switch
                    Nice Nice people. Award-winning process. Websites done right.
                         people. Award-winning process. Websites done right.
I Like Tricky Problems




                                                    gravity switch
                                                  gravity switch
                   Nice Nice people. Award-winning process. Websites done right.
                        people. Award-winning process. Websites done right.
And You Are?




                                       gravity switch
                                            gravity switch
                                         gravity switch
        NiceNice NiceAward-winning process. process. Websites done right.
             people. people. Award-winning Websites done right.
                 people. Award-winning process. Websites done right.
Why You’re Here


        Existing App

        New App




                                                        gravity switch
                                                      gravity switch
                       Nice Nice people. Award-winning process. Websites done right.
                            people. Award-winning process. Websites done right.
Type of App

                 Games
                 Utilities
                 Productivity
                 Music/Photo/Video
                 Other




                                             gravity switch
              Nice people. Award-winning process. Websites done right.
App Pricing

      Free!   $0.00

         $    $.99 - $2.99

       $$     $3.99 - $9.99

      $$$     $9.99+

         ?    Other (internal app)


                                                               gravity switch
                                                             gravity switch
                              Nice Nice people. Award-winning process. Websites done right.
                                   people. Award-winning process. Websites done right.
Company Size

       Lone Gunslinger

       2-10 employees/partners

       11-100 employees

       100+ employee company




                                                           gravity switch
                                                         gravity switch
                          Nice Nice people. Award-winning process. Websites done right.
                               people. Award-winning process. Websites done right.
iPhone vs. iPad




                                                   gravity switch
                                                 gravity switch
                  Nice Nice people. Award-winning process. Websites done right.
                       people. Award-winning process. Websites done right.
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.
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.
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.
Pay Attention


Can you tell which are professional?




                                                     gravity switch
                      Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
Which...
     Stood out as good or bad?




                                                         gravity switch
                          Nice people. Award-winning process. Websites done right.
Worth $1b?




                                            gravity switch
             Nice people. Award-winning process. Websites done right.
Built in bedroom?




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Built for Geeks?




                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
Are Consumer Apps?




                                             gravity switch
              Nice people. Award-winning process. Websites done right.
Why did you think that?




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Sorry... I Lied
      24 Judgement Calls in 7 Seconds
            • Money
            • Education
            • Interest
            • Etc.




                                                          gravity switch
                           Nice people. Award-winning process. Websites done right.
What is Brand?




                                         gravity switch
          Nice people. Award-winning process. Websites done right.
Brand = Feelings, Not Logo




                                                     gravity switch
                      Nice people. Award-winning process. Websites done right.
What Does Your App Do?



          In 140 characters




                                                         gravity switch
                          Nice people. Award-winning process. Websites done right.
Who Uses Your App?



          In 140 characters




                                                         gravity switch
                          Nice people. Award-winning process. Websites done right.
What Do You Want People to FEEL?



           In 3 words




                                                       gravity switch
                        Nice people. Award-winning process. Websites done right.
Dig Deeper With One Of Yours




                                                    gravity switch
                     Nice people. Award-winning process. Websites done right.
Dig Deeper With One Of Yours


          National brands




                                                           gravity switch
                            Nice people. Award-winning process. Websites done right.
Dig Deeper With One Of Yours


          National brands
          What do you expect?




                                                           gravity switch
                            Nice people. Award-winning process. Websites done right.
Dig Deeper With One Of Yours


          National brands
          What do you expect?
          What emotions?




                                                           gravity switch
                            Nice people. Award-winning process. Websites done right.
Visually Defining a Brand


       Mood Boards




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Style Guides are Dumb




                                                 55
                                                 pages
                                                       !




                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
Please Don’t Do This




                                                      gravity switch
                       Nice people. Award-winning process. Websites done right.
Try a Mood Board




                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
Try a Mood Board




                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
Try a Mood Board

                   Spend 15 minutes
                   Pick one:
                     Posters
                     Pictures
                     Fonts
                     Colors
If you haven’t gone too far...

       you haven’t done your job.




                                                      gravity switch
                       Nice people. Award-winning process. Websites done right.
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.
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.
Do You Have Style?




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Colored Nav




                                             gravity switch
              Nice people. Award-winning process. Websites done right.
Colored Nav




                                             gravity switch
              Nice people. Award-winning process. Websites done right.
Main Menu




                                           gravity switch
            Nice people. Award-winning process. Websites done right.
Fonts




                                       gravity switch
        Nice people. Award-winning process. Websites done right.
Serif vs. Sans-Serif?




                                                       gravity switch
                        Nice people. Award-winning process. Websites done right.
Serif vs. Sans-Serif?

 Serif = conservative




                                                       gravity switch
                        Nice people. Award-winning process. Websites done right.
Serif vs. Sans-Serif?

 Serif = conservative   Sans-Serif = Modern




                                                          gravity switch
                           Nice people. Award-winning process. Websites done right.
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.
Strange Fonts are Hard to Use




                                                   gravity switch
                    Nice people. Award-winning process. Websites done right.
Strange Fonts are Hard to Use



       tre
           nd     s pa
                       ss

                                                   gravity switch
                    Nice people. Award-winning process. Websites done right.
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.
Colors




                                        gravity switch
         Nice people. Award-winning process. Websites done right.
Colors Matter




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Colors Matter




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Colors Matter




                                               gravity switch
                Nice people. Award-winning process. Websites done right.
Colors are HARD


2 years of focused practice




                                                             gravity switch
                              Nice people. Award-winning process. Websites done right.
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.
colorblender.com
Shortcut 1: Online




                                                    gravity switch
                     Nice people. Award-winning process. Websites done right.
Shortcut 2: From a Picture




                                                    gravity switch
                     Nice people. Award-winning process. Websites done right.
Shortcut 2: From a Picture




                                                    gravity switch
                     Nice people. Award-winning process. Websites done right.
What else to know




                                                   gravity switch
                    Nice people. Award-winning process. Websites done right.
What else to know


   ‣ Match your saturation level




                                                        gravity switch
                         Nice people. Award-winning process. Websites done right.
What else to know


   ‣ Match your saturation level
   ‣ More saturation isn’t better




                                                         gravity switch
                          Nice people. Award-winning process. Websites done right.
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.
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.
How to Start




                                        gravity switch
         Nice people. Award-winning process. Websites done right.
Prototypes vs. Wireframes




                                                   gravity switch
                    Nice people. Award-winning process. Websites done right.
Prototypes vs. Wireframes




    I’d suggest a prototype because it’s so new.


                                                                 gravity switch
                                  Nice people. Award-winning process. Websites done right.
Rules of Thumb




                                                gravity switch
                 Nice people. Award-winning process. Websites done right.
Rules of Thumb

    Cartoons don’t work (usually)




                                                               gravity switch
                                Nice people. Award-winning process. Websites done right.
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.
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.
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.
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.
Critiques




                                      gravity switch
       Nice people. Award-winning process. Websites done right.
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.
Icons




                                       gravity switch
        Nice people. Award-winning process. Websites done right.
Icons


What Can We Learn From Logos?




                                                gravity switch
                 Nice people. Award-winning process. Websites done right.
Batch 1




                                         gravity switch
          Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
Batch 2




                                         gravity switch
          Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
gravity switch
Nice people. Award-winning process. Websites done right.
What’s the difference?




                                                   gravity switch
                    Nice people. Award-winning process. Websites done right.
There’s Also These Guys




                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
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.
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.
Improve Someone’s Icon
        Share With Us



   jason@gravityswitch.com
        #jasonNmark


                                                  gravity switch
                   Nice people. Award-winning process. Websites done right.
Ask Me Questions!




jason@gravityswitch.com
     #jasonNmark


                                               gravity switch
                Nice people. Award-winning process. Websites done right.

More Related Content

Similar to Pretty Mobile - Making Your Application Look Sexy - Gravity Switch

Subject to Change
Subject to ChangeSubject to Change
Subject to Changefrankmt
 
DIY Website Usability Testing
DIY Website Usability TestingDIY Website Usability Testing
DIY Website Usability TestingSteve Martin
 
Spotify @ Creative Summit Winter 2012
Spotify @ Creative Summit Winter 2012Spotify @ Creative Summit Winter 2012
Spotify @ Creative Summit Winter 2012Noa Resare
 
Operational Insight: Concepts and Examples (w/o Presenter Notes)
Operational Insight: Concepts and Examples (w/o Presenter Notes)Operational Insight: Concepts and Examples (w/o Presenter Notes)
Operational Insight: Concepts and Examples (w/o Presenter Notes)royrapoport
 
#u-wardley-mapping Wardley Maps: practical session - 2 hour
#u-wardley-mapping Wardley Maps: practical session - 2 hour#u-wardley-mapping Wardley Maps: practical session - 2 hour
#u-wardley-mapping Wardley Maps: practical session - 2 hourOpen Security Summit
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Christian Heilmann
 
Kanban - the gateway to total improvement
Kanban - the gateway to total improvementKanban - the gateway to total improvement
Kanban - the gateway to total improvementPaul Ellarby
 

Similar to Pretty Mobile - Making Your Application Look Sexy - Gravity Switch (9)

Subject to Change
Subject to ChangeSubject to Change
Subject to Change
 
DIY Website Usability Testing
DIY Website Usability TestingDIY Website Usability Testing
DIY Website Usability Testing
 
Hanson - The Shift Has Hit the Fan
Hanson - The Shift Has Hit the FanHanson - The Shift Has Hit the Fan
Hanson - The Shift Has Hit the Fan
 
Spotify @ Creative Summit Winter 2012
Spotify @ Creative Summit Winter 2012Spotify @ Creative Summit Winter 2012
Spotify @ Creative Summit Winter 2012
 
Operational Insight: Concepts and Examples (w/o Presenter Notes)
Operational Insight: Concepts and Examples (w/o Presenter Notes)Operational Insight: Concepts and Examples (w/o Presenter Notes)
Operational Insight: Concepts and Examples (w/o Presenter Notes)
 
#u-wardley-mapping Wardley Maps: practical session - 2 hour
#u-wardley-mapping Wardley Maps: practical session - 2 hour#u-wardley-mapping Wardley Maps: practical session - 2 hour
#u-wardley-mapping Wardley Maps: practical session - 2 hour
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
 
Kanban - the gateway to total improvement
Kanban - the gateway to total improvementKanban - the gateway to total improvement
Kanban - the gateway to total improvement
 
Case Study Zappos En
Case Study Zappos EnCase Study Zappos En
Case Study Zappos En
 

More from gravityswitch

Web Design - Lightning Critiques By Jason Mark
Web Design - Lightning Critiques By Jason MarkWeb Design - Lightning Critiques By Jason Mark
Web Design - Lightning Critiques By Jason Markgravityswitch
 
21 tips for Higher Ed Website Design Projects
21 tips for Higher Ed Website Design Projects21 tips for Higher Ed Website Design Projects
21 tips for Higher Ed Website Design Projectsgravityswitch
 
Stockbridge for 5 rules.03.cm
Stockbridge for 5 rules.03.cmStockbridge for 5 rules.03.cm
Stockbridge for 5 rules.03.cmgravityswitch
 
Android virtual conference
Android virtual conferenceAndroid virtual conference
Android virtual conferencegravityswitch
 
Android DevCon 2013 Usability
Android DevCon 2013 UsabilityAndroid DevCon 2013 Usability
Android DevCon 2013 Usabilitygravityswitch
 

More from gravityswitch (6)

Web Design - Lightning Critiques By Jason Mark
Web Design - Lightning Critiques By Jason MarkWeb Design - Lightning Critiques By Jason Mark
Web Design - Lightning Critiques By Jason Mark
 
21 tips for Higher Ed Website Design Projects
21 tips for Higher Ed Website Design Projects21 tips for Higher Ed Website Design Projects
21 tips for Higher Ed Website Design Projects
 
Stockbridge for 5 rules.03.cm
Stockbridge for 5 rules.03.cmStockbridge for 5 rules.03.cm
Stockbridge for 5 rules.03.cm
 
Android virtual conference
Android virtual conferenceAndroid virtual conference
Android virtual conference
 
Easy Mobile
Easy MobileEasy Mobile
Easy Mobile
 
Android DevCon 2013 Usability
Android DevCon 2013 UsabilityAndroid DevCon 2013 Usability
Android DevCon 2013 Usability
 

Recently uploaded

Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 

Recently uploaded (20)

Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 

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.
  • 3. Jason@gravityswitch.com Web / iPhone / iPad Technology serves business Educator Author gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. people. Award-winning process. Websites done right.
  • 4.
  • 5.
  • 6. I Like Tricky Problems gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. people. Award-winning process. Websites done right.
  • 7. And You Are? gravity switch gravity switch gravity switch NiceNice NiceAward-winning process. process. Websites done right. people. people. Award-winning Websites done right. people. Award-winning process. Websites done right.
  • 8. Why You’re Here Existing App New App gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. people. Award-winning process. Websites done right.
  • 9. Type of App Games Utilities Productivity Music/Photo/Video Other gravity switch Nice people. Award-winning process. Websites done right.
  • 10. App Pricing Free! $0.00 $ $.99 - $2.99 $$ $3.99 - $9.99 $$$ $9.99+ ? Other (internal app) gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. people. Award-winning process. Websites done right.
  • 11. Company Size Lone Gunslinger 2-10 employees/partners 11-100 employees 100+ employee company gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. people. Award-winning process. Websites done right.
  • 12. iPhone vs. iPad gravity switch gravity switch Nice Nice people. Award-winning process. Websites done right. 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.
  • 17. gravity switch Nice people. Award-winning process. Websites done right.
  • 18. gravity switch Nice people. Award-winning process. Websites done right.
  • 19. Which... Stood out as good or bad? gravity switch Nice people. Award-winning process. Websites done right.
  • 20. Worth $1b? gravity switch Nice people. Award-winning process. Websites done right.
  • 21. Built in bedroom? gravity switch Nice people. Award-winning process. Websites done right.
  • 22. Built for Geeks? gravity switch Nice people. Award-winning process. Websites done right.
  • 23. Are Consumer Apps? 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.
  • 35. Visually Defining a Brand Mood Boards gravity switch Nice people. Award-winning process. Websites done right.
  • 36. Style Guides are Dumb 55 pages ! gravity switch Nice people. Award-winning process. Websites done right.
  • 37. Please Don’t Do This gravity switch Nice people. Award-winning process. Websites done right.
  • 38. Try a Mood Board gravity switch Nice people. Award-winning process. Websites done right.
  • 39. Try a Mood Board gravity switch Nice people. Award-winning process. Websites done right.
  • 40.
  • 41.
  • 42. Try a Mood Board Spend 15 minutes Pick one: Posters Pictures Fonts Colors
  • 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.
  • 52. Colored Nav gravity switch Nice people. Award-winning process. Websites done right.
  • 53. Colored Nav gravity switch Nice people. Award-winning process. Websites done right.
  • 54. Main Menu gravity switch Nice people. Award-winning process. Websites done right.
  • 55. Fonts gravity switch Nice people. Award-winning process. Websites done right.
  • 56. Serif vs. Sans-Serif? gravity switch Nice people. Award-winning process. Websites done right.
  • 57. Serif vs. Sans-Serif? Serif = conservative 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.
  • 63. Colors gravity switch Nice people. Award-winning process. Websites done right.
  • 64. Colors Matter gravity switch Nice people. Award-winning process. Websites done right.
  • 65. Colors Matter gravity switch Nice people. Award-winning process. Websites done right.
  • 66. Colors Matter 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.
  • 69. colorblender.com Shortcut 1: Online 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.
  • 78. Prototypes vs. Wireframes 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.
  • 86. Critiques 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.
  • 88. Icons gravity switch Nice people. Award-winning process. Websites done right.
  • 89. Icons What Can We Learn From Logos? gravity switch Nice people. Award-winning process. Websites done right.
  • 90. Batch 1 gravity switch Nice people. Award-winning process. Websites done right.
  • 91. gravity switch Nice people. Award-winning process. Websites done right.
  • 92. gravity switch Nice people. Award-winning process. Websites done right.
  • 93. gravity switch Nice people. Award-winning process. Websites done right.
  • 94. Batch 2 gravity switch Nice people. Award-winning process. Websites done right.
  • 95. gravity switch Nice people. Award-winning process. Websites done right.
  • 96. gravity switch Nice people. Award-winning process. Websites done right.
  • 97. What’s the difference? 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.
  • 102. Ask Me Questions! jason@gravityswitch.com #jasonNmark gravity switch Nice people. Award-winning process. Websites done right.

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n