SlideShare una empresa de Scribd logo
1 de 13
The visual aspects of mobile user interface design standards With emphasis on the Android icons
ICON DESIGN GUIDELINES Launcher Icon Menu Icon Dialogue Icon Tab Icon Status Bar Icon List Icon
Launcher Icon A Launcher icon is a graphic that represents your application on the device's Home screen and in the Launcher window. SIZE: 56-72 sqrd. px (high-density), 38-48 sqrd. px (medium-density), 28-36 sqrd. px (low-density) COLOR: Neutral & primary colors; not over-saturated, limited color palette SHADING: Top-lit OTHER DETAILS: Clean and contemporary, Simple and iconic, Tactile and textured, Forward-facing
Menu Icons Menu icons are graphical elements placed in the options menu shown to users when they press the Menu button. SIZE: 44-72 sqrd. px (high-density), 30-48 sqrd. px (medium-density), 22-36 sqrd. px (low-density) COLOR: Greyscale SHADING: slight deboss used to create depth OTHER DETAILS: flat, pictured face on,  2 pxcorner radius, when appropriate
Status Bar Icons Status bar icons are used to represent notifications from your application in the status bar. SIZE: 24w x 38h px/ 24w x 24h px (high-density), 16w x 25 px/ 16w x 16w (medium-density), 12w x 19h px/ 12w x 12h px (low-density) COLOR: #828282 to #919191 SHADING: #FFFFFF, 10% opacity, angle 90°, distance 1px OTHER DETAILS: Flat, matte, and pictured face-on
Tab Icons Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. SIZE: 42-48 sqrd. px (high-density), 28-32 sqrd. px (medium-density), 22-24 sqrd. px (low-density) COLOR: #808080 (unselected), #FFFFFF (selected) SHADING: No shadows OTHER DETAILS: Flat, matte, and pictured face-on
Dialog Icons Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame COLOR/ SHADING: Light gradient and inner shadow in order to stand out against a dark background OTHER DETAILS: Flat and pictured face-on
diALOG ICONS
List View Icons List view icons are used with ListView to graphically represent list items. An example is the Settings application. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame -- based on a 32x32 pixel artboard size in Photoshop COLOR/ SHADING: Light/ black gradient, 57 % opacity, angle 120°, distance 1px, size 1px OTHER DETAILS: Flat and pictured face-on with an inner shadow
List view icons
Final art must be exported as a  transparent PNG file. Link to android icon templates pack http://developer.android.com/shareables/icon_templates-v2.3.zip
Best practices Fill screens sparingly Be consistent with user interface workflows, menu types & buttons Make Touch Mode “hit areas” large enough Use big readable fonts & large icons Integrate tightly with other applications on the system Keep localization in mind Reduce keys or clicks Don’t assume that specific input mechanisms are available Encourage “thumbing” by default
Thank you

Más contenido relacionado

La actualidad más candente

Learning Illustrator CS6 with 100 practical exercises
Learning Illustrator CS6 with 100 practical exercisesLearning Illustrator CS6 with 100 practical exercises
Learning Illustrator CS6 with 100 practical exercisesMCB Press
 
adobephotoshop_frerking
adobephotoshop_frerking adobephotoshop_frerking
adobephotoshop_frerking Agung Yuwono
 
Adope Photoshop Tool Bar (By: Shujaat Abbas)
Adope Photoshop Tool Bar (By: Shujaat Abbas)Adope Photoshop Tool Bar (By: Shujaat Abbas)
Adope Photoshop Tool Bar (By: Shujaat Abbas)Shujaat Abbas
 
Adobe After Effects
Adobe After EffectsAdobe After Effects
Adobe After EffectsKat350
 
How to Create Shadow in photoshop cs6 - Photoshop Tutorial
How to Create Shadow in photoshop  cs6 - Photoshop Tutorial How to Create Shadow in photoshop  cs6 - Photoshop Tutorial
How to Create Shadow in photoshop cs6 - Photoshop Tutorial CPZ Media
 
How To Change Opacity Levels In Text
How To Change Opacity Levels In TextHow To Change Opacity Levels In Text
How To Change Opacity Levels In Textblmcguire_94
 
Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Crest TechnoSoft
 
New Products 2010 - Abstracta
New Products 2010 - AbstractaNew Products 2010 - Abstracta
New Products 2010 - AbstractaAbstracta AB
 
Basic Photoshop Tutorial
Basic Photoshop TutorialBasic Photoshop Tutorial
Basic Photoshop TutorialMarc Dy
 
Learning Photoshop CS6 with 100 practical exercises
Learning Photoshop CS6 with 100 practical exercisesLearning Photoshop CS6 with 100 practical exercises
Learning Photoshop CS6 with 100 practical exercisesMCB Press
 
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...Panorama Software
 
Create 3D Type in Photoshop CS6
Create 3D Type in Photoshop CS6Create 3D Type in Photoshop CS6
Create 3D Type in Photoshop CS6marcusbyrne
 

La actualidad más candente (13)

Learning Illustrator CS6 with 100 practical exercises
Learning Illustrator CS6 with 100 practical exercisesLearning Illustrator CS6 with 100 practical exercises
Learning Illustrator CS6 with 100 practical exercises
 
adobephotoshop_frerking
adobephotoshop_frerking adobephotoshop_frerking
adobephotoshop_frerking
 
Adope Photoshop Tool Bar (By: Shujaat Abbas)
Adope Photoshop Tool Bar (By: Shujaat Abbas)Adope Photoshop Tool Bar (By: Shujaat Abbas)
Adope Photoshop Tool Bar (By: Shujaat Abbas)
 
Adobe After Effects
Adobe After EffectsAdobe After Effects
Adobe After Effects
 
How to Create Shadow in photoshop cs6 - Photoshop Tutorial
How to Create Shadow in photoshop  cs6 - Photoshop Tutorial How to Create Shadow in photoshop  cs6 - Photoshop Tutorial
How to Create Shadow in photoshop cs6 - Photoshop Tutorial
 
How To Change Opacity Levels In Text
How To Change Opacity Levels In TextHow To Change Opacity Levels In Text
How To Change Opacity Levels In Text
 
Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6Introduction- The Basics of Photoshop CS6
Introduction- The Basics of Photoshop CS6
 
New Products 2010 - Abstracta
New Products 2010 - AbstractaNew Products 2010 - Abstracta
New Products 2010 - Abstracta
 
Basic Photoshop Tutorial
Basic Photoshop TutorialBasic Photoshop Tutorial
Basic Photoshop Tutorial
 
Learning Photoshop CS6 with 100 practical exercises
Learning Photoshop CS6 with 100 practical exercisesLearning Photoshop CS6 with 100 practical exercises
Learning Photoshop CS6 with 100 practical exercises
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...
4 - Panorama Necto 14 creating a workboard - visualization & data discovery s...
 
Create 3D Type in Photoshop CS6
Create 3D Type in Photoshop CS6Create 3D Type in Photoshop CS6
Create 3D Type in Photoshop CS6
 

Destacado

Planning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital PerformancePlanning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital PerformanceGareth Cartman
 
Be Productive with Mobile Apps
Be Productive with Mobile AppsBe Productive with Mobile Apps
Be Productive with Mobile AppsVisual Net Design
 
Visual design - a key part of mobile apps
Visual design - a key part of mobile appsVisual design - a key part of mobile apps
Visual design - a key part of mobile appsHenrik Hedegaard
 
How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile Ivana Milicic
 
UX desing principles for Mobile
UX desing principles for MobileUX desing principles for Mobile
UX desing principles for MobileNir Benita
 
Shamit khemka discussed important points to ensure while designing a mobile app
Shamit khemka discussed important points to ensure while designing a mobile appShamit khemka discussed important points to ensure while designing a mobile app
Shamit khemka discussed important points to ensure while designing a mobile appSynapseIndia
 
Experience How Logos Evolved Over Time
Experience How Logos Evolved Over TimeExperience How Logos Evolved Over Time
Experience How Logos Evolved Over TimeLogo Design India
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFBoris Friedrich Milkowski
 
Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App. Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App. touchtitans
 
Bmm presentation
Bmm presentationBmm presentation
Bmm presentationCndIrene
 
10 Desirable Mobile App Graphic Design trends for 2016
10 Desirable Mobile App Graphic Design trends for 201610 Desirable Mobile App Graphic Design trends for 2016
10 Desirable Mobile App Graphic Design trends for 2016iMOBDEV Technologies Pvt. Ltd.
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)Brian Fling
 
43 Inspirational Mobile Splash Screens
43 Inspirational Mobile Splash Screens43 Inspirational Mobile Splash Screens
43 Inspirational Mobile Splash ScreensPocket Your Shop
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Tania Schlatter
 

Destacado (18)

Planning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital PerformancePlanning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital Performance
 
Be Productive with Mobile Apps
Be Productive with Mobile AppsBe Productive with Mobile Apps
Be Productive with Mobile Apps
 
Pattern
PatternPattern
Pattern
 
Visual design - a key part of mobile apps
Visual design - a key part of mobile appsVisual design - a key part of mobile apps
Visual design - a key part of mobile apps
 
How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile How Visual Design Makes or Brakes Mobile
How Visual Design Makes or Brakes Mobile
 
UX desing principles for Mobile
UX desing principles for MobileUX desing principles for Mobile
UX desing principles for Mobile
 
Things to consider while designing mobile app
Things to consider while designing mobile appThings to consider while designing mobile app
Things to consider while designing mobile app
 
Shamit khemka discussed important points to ensure while designing a mobile app
Shamit khemka discussed important points to ensure while designing a mobile appShamit khemka discussed important points to ensure while designing a mobile app
Shamit khemka discussed important points to ensure while designing a mobile app
 
Experience How Logos Evolved Over Time
Experience How Logos Evolved Over TimeExperience How Logos Evolved Over Time
Experience How Logos Evolved Over Time
 
4 rules of logo design
4 rules of logo design4 rules of logo design
4 rules of logo design
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SF
 
Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App. Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App.
 
Bmm presentation
Bmm presentationBmm presentation
Bmm presentation
 
Designing Your App
Designing Your AppDesigning Your App
Designing Your App
 
10 Desirable Mobile App Graphic Design trends for 2016
10 Desirable Mobile App Graphic Design trends for 201610 Desirable Mobile App Graphic Design trends for 2016
10 Desirable Mobile App Graphic Design trends for 2016
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
43 Inspirational Mobile Splash Screens
43 Inspirational Mobile Splash Screens43 Inspirational Mobile Splash Screens
43 Inspirational Mobile Splash Screens
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 

Similar a Visual Aspects of Mobile UI Design Standards

Basics Of Photoshop
Basics Of PhotoshopBasics Of Photoshop
Basics Of Photoshopkarimnadir
 
Pixel resolution
Pixel resolutionPixel resolution
Pixel resolutionimcprint
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applicationsAashish Uppal
 
Photoshop cs tutorial
Photoshop cs tutorialPhotoshop cs tutorial
Photoshop cs tutorialFurqan Alley
 
Causeway coast & Glens Heritage Trust
Causeway coast & Glens Heritage TrustCauseway coast & Glens Heritage Trust
Causeway coast & Glens Heritage Trustcharmaine22
 
Unit-1 basics of computer graphics
Unit-1 basics of computer graphicsUnit-1 basics of computer graphics
Unit-1 basics of computer graphicsAmol Gaikwad
 
CSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB ColorsCSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB ColorsRichard Homa
 
Graphic Concepts
Graphic ConceptsGraphic Concepts
Graphic Conceptsnylysy
 
Multimedia digital images
 Multimedia  digital images Multimedia  digital images
Multimedia digital imagesMohammad Dwikat
 
Presentation on Adobe Photoshop
Presentation on Adobe PhotoshopPresentation on Adobe Photoshop
Presentation on Adobe PhotoshopOpenDev
 
Adobe illustrator 1
Adobe illustrator 1Adobe illustrator 1
Adobe illustrator 1ilaazmil2
 
Designing for Android - Anjan Shrestha
Designing for Android - Anjan ShresthaDesigning for Android - Anjan Shrestha
Designing for Android - Anjan ShresthaMobileNepal
 
Photoshop intro to basics
Photoshop intro to basicsPhotoshop intro to basics
Photoshop intro to basicsNatalie Hurd
 

Similar a Visual Aspects of Mobile UI Design Standards (20)

Basics Of Photoshop
Basics Of PhotoshopBasics Of Photoshop
Basics Of Photoshop
 
Pixel resolution
Pixel resolutionPixel resolution
Pixel resolution
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applications
 
Photoshop cs tutorial
Photoshop cs tutorialPhotoshop cs tutorial
Photoshop cs tutorial
 
Causeway coast & Glens Heritage Trust
Causeway coast & Glens Heritage TrustCauseway coast & Glens Heritage Trust
Causeway coast & Glens Heritage Trust
 
Unit-1 basics of computer graphics
Unit-1 basics of computer graphicsUnit-1 basics of computer graphics
Unit-1 basics of computer graphics
 
CSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB ColorsCSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB Colors
 
Graphic Concepts
Graphic ConceptsGraphic Concepts
Graphic Concepts
 
Multimedia digital images
 Multimedia  digital images Multimedia  digital images
Multimedia digital images
 
Task 1- Technical File
Task 1- Technical File Task 1- Technical File
Task 1- Technical File
 
Presentation on Adobe Photoshop
Presentation on Adobe PhotoshopPresentation on Adobe Photoshop
Presentation on Adobe Photoshop
 
Adobe illustrator 1
Adobe illustrator 1Adobe illustrator 1
Adobe illustrator 1
 
Designing for Android - Anjan Shrestha
Designing for Android - Anjan ShresthaDesigning for Android - Anjan Shrestha
Designing for Android - Anjan Shrestha
 
Digital image
Digital imageDigital image
Digital image
 
Sketch 3 manual
Sketch 3 manualSketch 3 manual
Sketch 3 manual
 
Technical file
Technical fileTechnical file
Technical file
 
Technical file
Technical fileTechnical file
Technical file
 
Ha1 technical file
Ha1  technical fileHa1  technical file
Ha1 technical file
 
HA1 Technical File
HA1 Technical FileHA1 Technical File
HA1 Technical File
 
Photoshop intro to basics
Photoshop intro to basicsPhotoshop intro to basics
Photoshop intro to basics
 

Último

Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 

Último (20)

Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 

Visual Aspects of Mobile UI Design Standards

  • 1. The visual aspects of mobile user interface design standards With emphasis on the Android icons
  • 2. ICON DESIGN GUIDELINES Launcher Icon Menu Icon Dialogue Icon Tab Icon Status Bar Icon List Icon
  • 3. Launcher Icon A Launcher icon is a graphic that represents your application on the device's Home screen and in the Launcher window. SIZE: 56-72 sqrd. px (high-density), 38-48 sqrd. px (medium-density), 28-36 sqrd. px (low-density) COLOR: Neutral & primary colors; not over-saturated, limited color palette SHADING: Top-lit OTHER DETAILS: Clean and contemporary, Simple and iconic, Tactile and textured, Forward-facing
  • 4. Menu Icons Menu icons are graphical elements placed in the options menu shown to users when they press the Menu button. SIZE: 44-72 sqrd. px (high-density), 30-48 sqrd. px (medium-density), 22-36 sqrd. px (low-density) COLOR: Greyscale SHADING: slight deboss used to create depth OTHER DETAILS: flat, pictured face on, 2 pxcorner radius, when appropriate
  • 5. Status Bar Icons Status bar icons are used to represent notifications from your application in the status bar. SIZE: 24w x 38h px/ 24w x 24h px (high-density), 16w x 25 px/ 16w x 16w (medium-density), 12w x 19h px/ 12w x 12h px (low-density) COLOR: #828282 to #919191 SHADING: #FFFFFF, 10% opacity, angle 90°, distance 1px OTHER DETAILS: Flat, matte, and pictured face-on
  • 6. Tab Icons Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. SIZE: 42-48 sqrd. px (high-density), 28-32 sqrd. px (medium-density), 22-24 sqrd. px (low-density) COLOR: #808080 (unselected), #FFFFFF (selected) SHADING: No shadows OTHER DETAILS: Flat, matte, and pictured face-on
  • 7. Dialog Icons Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame COLOR/ SHADING: Light gradient and inner shadow in order to stand out against a dark background OTHER DETAILS: Flat and pictured face-on
  • 9. List View Icons List view icons are used with ListView to graphically represent list items. An example is the Settings application. SIZE: 48 sqrd. px (high-density), 32 sqrd. px (medium-density), 24 sqrd. px (low-density); 1 px safe frame -- based on a 32x32 pixel artboard size in Photoshop COLOR/ SHADING: Light/ black gradient, 57 % opacity, angle 120°, distance 1px, size 1px OTHER DETAILS: Flat and pictured face-on with an inner shadow
  • 11. Final art must be exported as a transparent PNG file. Link to android icon templates pack http://developer.android.com/shareables/icon_templates-v2.3.zip
  • 12. Best practices Fill screens sparingly Be consistent with user interface workflows, menu types & buttons Make Touch Mode “hit areas” large enough Use big readable fonts & large icons Integrate tightly with other applications on the system Keep localization in mind Reduce keys or clicks Don’t assume that specific input mechanisms are available Encourage “thumbing” by default