Your task is to develop a set of icons that share a theme, and adhere to best practices in terms of design. Your set of icons should be at least four, rendered in black and white, and also in color. The minimum size for each icon’s source file should be 1024 X 1024, though the file you embed in your documentation should be no more than 720 px wide.
The icons can relate to the logo you developed, and inherit the basic theme from that mark. You can develop a set of icons based on standard application navigation or features, such as “favorites” or “home”, “quit” or “submit”, etc; but your client may offer additional icon options such as “contact” or “directions”.
Remember that the main criteria of icons is simplicity, clarity, the ability to scale well, and recognizability. A ratio of 50/50 for positive to negative space is best. The set should share the same ground, be it square or circular.
The icon set can be rendered as either a .png or .svg file. I recommend developing the icons using a vector drawing tool such as Adobe Illustrator or Inkscape, because the files can subsequently be converted into a web font, as shown in class. Notes on the class demo can be found at https://www3.cs.stonybrook.edu/~tony/ui/icon_demo_web/
The demo notes include useful links to applications, templates, and articles.
When you have updated your documentation, send your URL to uidev@cs.stonybrook.edu, with “Icons” in the subject line.
Rubric
. Followed the instructions:
• A B&W and color version of at least 4 icons was uploaded to the student’s web site, and the URL was sent to the course email
• The icon set is approximately 800 pixels wide
2. Met the design criteria:
• The icon set shares a graphical “theme” that is derived from or relates to the logo or logotype
• The icons effectively represent their function, such as “home” or “info” or “favorites”
• Simple bold design that is read easily and is scalable (no fine lines, excessive detail, subtle gradients)
• The icons share a consistent ground (square, rectangle, circle, elipse, etc)
* Approximately 50/50 balance of positive to negative space
• Consistency of scale and position of visual elements (evidence of design using a grid)
• Good technical execution (crisp edges, clean shapes)
• Appropriate for client and target audience
That’s 10 criteria, or approximately 1 point each.