SlideShare uma empresa 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Destaque

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
 

Destaque (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...
 

Semelhante 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
 

Semelhante 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

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
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
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
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
 
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
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
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
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
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
 
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
 
"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
 
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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 

Último (20)

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
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
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
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
 
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
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.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?
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
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
 
"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
 
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.
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 

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