Exercise 5 — Creating Icons

Files

Exercise file download (opens new window)

Introduction

In this exercise, you will be tasked with creating a set of user interface (UI) icons using Adobe Illustrator. This activity is designed to help you understand the basics of icon design, including consistency, simplicity, and scalability. You will apply design principles and Illustrator techniques to create icons that are both aesthetically pleasing and functionally clear.

Instructions

1. Download and open the provided Illustrator file above. This file contains a template set up with predefined artboards and grid systems to help you get started.

2. Start by created your icons within the 24x24 px artboard. Each artboard is labeled with the icon you are to create.

3. Once you have created your 24x24 px icons, scale them to 48x48 px. ensure that your stoke weights and corner radii scale accordingly. You may accomplish this by;

• Consider outlining your strokes and uniting your layers into a single shape.
• Manually adjusting your stroke weights and radii if needed.

4. Finishing steps:

• Organize your layers by grouping and labeling.
• Make sure you save your .ai file.
• Be sure to hide the keyline layers before exporting
• Export your artboards using export for Screens dialogue.

Tips

• Designing Your Icons: Use the tools and techniques discussed in class to create your icons. Make sure to:

  • Stick to the grid and guidelines provided in the Illustrator file.
  • Apply consistent styles (e.g., line width, corner radius) across all icons for uniformity.
  • Design for scalability. Your icons should be easily recognizable at various sizes.

• Refinement and Review: Once your icons are designed, take a step back and review them as a set. Look for inconsistencies, and make sure each icon communicates its intended function clearly. Adjust as necessary.

File Setup and Submission

Compress and submit your lName-fName-section#-creating-icons folder containing:

• lName-fName-section#-creating-icons.ai
• "Exports" folder containing exported SVG files using the Export As... dialogue:
  • home_24x24.svg
  • home_48x48.svg
  • search_24x24.svg
  • search_48x48.svg
  • like_24x24.svg
  • like_48x48.svg
  • camera_24x24.svg
  • camera_48x48.svg
  • mail_24x24.svg
  • mail_48x48.svg

Submission

Refer to Brightspace for your section's due date.

• Open BS LMS and go to the Activities > Assignments page.
• Go to Exercise 5 — Creating Icons
• Upload your compressed folder on the assignment page in BS LMS and click the submit button.