SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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
 

En vedette

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
 

En vedette (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...
 

Similaire à 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
 

Similaire à 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
 

Dernier

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 

Dernier (20)

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 

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