SlideShare a Scribd company logo
1 of 3
Icon Style Guide:<br />Here are some rules of thumb who consider requesting new Icons:<br />Using Existing Icons:<br />Don't Misuse Icons:<br />It confuses our users when the same icon is used for completely different purposes in different places in the system. It is sometimes a good idea to quot;
recyclequot;
 an existing icon, but only if the new usage does not oppose the original meaning of the icon. So study this to produce an Icon that makes sense.<br />When and How Is a New Icon Sensible?<br />Space-Saving<br />Short, clear terms are better than icons whose meaning has to be learned.<br />In contrast, groups of terms and long terms can be better represented by an icon.<br />Easy to Locate<br />Icons make sense only when you do not have a lot of them scattered around the screen, all competing with each other, and when each icon can always be found in the same place (whenever possible).<br />Association<br />Good icons do not necessarily have to be self-evident, but they should make an impression and be easy to learn. This means the picture must be easily associated with its meaning.<br />Context and Consistency<br />Good icons clearly differ from their neighbors.<br />Develop your icons early on, in parallel to the overall design. Also be sure to consider any necessary related icons! Do conflicts exist with other icons/areas?<br />Internationality Correctness<br />SAP icons must be comprehensible and acceptable in a wide range of language areas.Color Legend<br />Red: Strong warning, stop, error, quot;
Don't & critical situation.<br />Green: OK, allowed, not critical.<br />Yellow: Advance warning, critical question.<br />Gray: Inactive status.<br />Don't Forget...<br />,[object Object]
No icons, only text for "Recording", "Parking"
Only icons, no text for "Simulating", "Generating"

More Related Content

Similar to Icon style guide - Sivaprasath Selvaraj

Application GUI Design - Notes from a Toolkit Developer
Application GUI Design - Notes from a Toolkit DeveloperApplication GUI Design - Notes from a Toolkit Developer
Application GUI Design - Notes from a Toolkit Developer
Samsung Open Source Group
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
xyz01
 

Similar to Icon style guide - Sivaprasath Selvaraj (20)

Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
 
Icon assignment
Icon assignmentIcon assignment
Icon assignment
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applications
 
Human Interface Guidelines: For Dummies
Human Interface Guidelines: For DummiesHuman Interface Guidelines: For Dummies
Human Interface Guidelines: For Dummies
 
Human Interface Guidelines: For Dummies - Open West
Human Interface Guidelines: For Dummies - Open WestHuman Interface Guidelines: For Dummies - Open West
Human Interface Guidelines: For Dummies - Open West
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
Hopscotch.docx
Hopscotch.docxHopscotch.docx
Hopscotch.docx
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedy
 
why android first?
why android first?why android first?
why android first?
 
Learn ios design
Learn ios designLearn ios design
Learn ios design
 
Excellence in the Android User Experience
Excellence in the Android User ExperienceExcellence in the Android User Experience
Excellence in the Android User Experience
 
Risk Management Maturity Model
Risk Management Maturity ModelRisk Management Maturity Model
Risk Management Maturity Model
 
Day 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptxDay 3 Compose Camp Material Design.pptx
Day 3 Compose Camp Material Design.pptx
 
Application GUI Design - Notes from a Toolkit Developer
Application GUI Design - Notes from a Toolkit DeveloperApplication GUI Design - Notes from a Toolkit Developer
Application GUI Design - Notes from a Toolkit Developer
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
The nextdds newscreens
The nextdds newscreensThe nextdds newscreens
The nextdds newscreens
 
Casestudy
CasestudyCasestudy
Casestudy
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Product Development Roadmap Timeline Dev Milestones Product Releases 4 Quarters
Product Development Roadmap Timeline Dev Milestones Product Releases 4 QuartersProduct Development Roadmap Timeline Dev Milestones Product Releases 4 Quarters
Product Development Roadmap Timeline Dev Milestones Product Releases 4 Quarters
 

More from Sivaprasath Selvaraj

Wat is usability? - Sivaprasath Selvaraj
Wat is usability? - Sivaprasath SelvarajWat is usability? - Sivaprasath Selvaraj
Wat is usability? - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Design Strategy Template - Sivaprasath Selvaraj
Design Strategy Template - Sivaprasath SelvarajDesign Strategy Template - Sivaprasath Selvaraj
Design Strategy Template - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath SelvarajUsability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath SelvarajTen Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 

More from Sivaprasath Selvaraj (7)

Wat is usability? - Sivaprasath Selvaraj
Wat is usability? - Sivaprasath SelvarajWat is usability? - Sivaprasath Selvaraj
Wat is usability? - Sivaprasath Selvaraj
 
Design Strategy Template - Sivaprasath Selvaraj
Design Strategy Template - Sivaprasath SelvarajDesign Strategy Template - Sivaprasath Selvaraj
Design Strategy Template - Sivaprasath Selvaraj
 
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath SelvarajUsability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath Selvaraj
 
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath SelvarajTen Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath Selvaraj
 
Basics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath SelvarajBasics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath Selvaraj
 

Recently uploaded

poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
ssuser0ad194
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 

Recently uploaded (20)

poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 

Icon style guide - Sivaprasath Selvaraj

  • 1.
  • 2. No icons, only text for "Recording", "Parking"
  • 3. Only icons, no text for "Simulating", "Generating"
  • 4. Icons for "Save", "Post" only in the application toolbar
  • 5. Icons are allowed in pushbuttons in the application toolbar, pushbuttons in the screen, pushbuttons in table controls
  • 6. The rule: Icon without text (exception: only when the text is absolutely essential for description) or only text
  • 7. Icons as field labels only in extremely limited cases (such as generic objects like date, time), including checkboxes and radio buttons.
  • 8. Status display: Flat on the screen or in a table control
  • 9. In a tree control: As an additional display of the object type when a differentiation is truly helpful
  • 10.
  • 11. Use this checklist to prepare screen shots or sketches showing the context in which the new icon is going to be placed, including all other icons used in that environment.
  • 12. An overview of other existing icons which may be relevant in terms of meaning or style, even if your application does not use them.
  • 13. Well-prepared information and visual material are an invaluable source to the designer, which helps avoid too many design iterations, thus saving a great deal of cost and time in the end.So check the check list before creating the Icon…<br />Check List:<br />1. Do similar icons (in either appearance or content) exist? If so, which ones?<br />2. Is an existing icon with additional text required?<br />3. Which existing icon would be almost right if...<br />4. From which existing icon must the new icon differ? Why?<br />5. Which term should the new icon replace? (A brief text is better than an unfamiliar icon!)<br />6. In which context will the new icon appear? (Screen, tree, list,)<br />Number of times icon will be used (estimate): ...<br />7. How many icons are already present in the screen and/or the application toolbar?<br />8. Does the new icon belong to an icon group?<br />9. Which other SAP applications and products will the end-user likely have open at the same time? (Conflicts, consistency)<br />10. Are any important user groups involved? (Other cultures, languages)<br />11. Is any special color scheme required?<br />12. Do you have specific ideas of how the icon should look?<br />13. Has a user test been performed with sketches (outside development!)?<br />14. Is the icon intended for use in tab strips? (Only allowed in status displays!)<br />15. Icon used as field labels / checkboxes / radio buttons?<br />Color Language<br />The following colors are typically used with special meanings:<br />Red Colors = error messages, stopping, negative items or attention grabbing alerts.<br />Yellow Colors = warnings, cautions and need to know information.<br />Green Colors = success messages, continue and positive items.<br />Custom Color Palette<br />The SAP icons contain five main color groups. The first group contains 11 color sets. The values in each set are used to compose the base, highlight and shadow color of the icons. In some cases, the highlight or shadow color may come from a different color set inside group #1. A new drop shadow color has been added to the color palette.<br />Color Group - Main Colors<br />Highlight - used for highlights<br />Base - used for primary color<br />Shadow - used for shadows<br />