Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 12 Next »

Why Use Icons?

Icons can be included in menu and form lists. In addition to make an application look much nicer, they also can help with navigation. Here is what menu and form lists look like with icons included:

 

                                  

Icons Best Practices

  • Keep it simple - pick a very clear message for each icon and keep it simple. Minimal is best, most people should understand it in a fraction of a second, because that’s how fast they are navigating through the application.

  • Make them match - matching colors and images that are all the same style and/or format are key to keeping the User Interface clean and easy to understand.

  • Use different colors for each menu - i.e. if you have a “mother menu” the menu icons and all forms might be purple, whereas a “child menu” in the same application would have blue icons for the menu name and all forms.

  • Design transparent icons - this will make your icons blend with the standard CommCare background.

  • Always review the Multimedia Reference Checker - Before you deploy an app, confirm that all of the multimedia links are complete and have the right file type. You can also find the pixel size of your image next to the link.

Keep in mind, some users are color blind, others might not read at all. Visual clues are a big help, here are some tips!

How to Find Existing Icons

One place to find Open Source images is the Noun Project. 

This website has a huge library of Free Icons. With a paid version you can download all of the website's icons in many colors. Make sure that these are “public domain” instead of Creative Commons. Public domain icons are freely available to use as much as you want to use them. If you use icons with Creative Commons licensing make sure that you give appropriate credit (http://thenounproject.com/legal/). 

You can also use FontAwesome for icons. (http://fortawesome.github.io/Font-Awesome/icons/).

 

How to Make New Icons

1. Create a PowerPoint slide using the template found here. This template has lots of example icons that you can use or modify.

2. Edit icons/add additional slides

  • Use the Noun Project if you need to find new standard icons.

  • to change the color to white, turn up the brightness on the image by right clicking on it, choosing “Format Picture” and “Picture Corrections”

  • to change the color of the background, simply change the color of the square shape.

3. Open Paint or another tool that is able to edit images and copy in the square from the ppt slide into that program.

4. Resize the icons by clicking the “resize” icon in the upper left hand corner of Paint.  The optimal size to resize to depends on your device, but 50x50 pixels is a good estimate for medium-quality phones.  You should not need more than about 200x200 pixels even for very high-quality phones/tablets.  If your icon size is too small for your device, you might see graininess or pixelation of your icon.  If your icon size is too large, it will take up more storage space than necessary on the phone.  

5. Save as a new icon in a folder

  • Make sure you rename the file path in CommCare for the form or menu that you want to use the icon for, for example the default is jr://file/commcare/image/form_name.png, however if you want different icons for each form that you need to substitute form_name with a new id, such as registration_form

6. Upload into CommCare using the Multimedia Manager, just as you would for any other type of image.

 

  • No labels