Icon Design for Beginners: The Step-by-Step Guide
Having learned the seven sins of icon design, I assume you are aware of things to consider when designing an icon. It’s time to design a simple icon. I’ll be using Sketch even though it’s relatively easy to follow along using other design tools like Figma.
The Step-by-Step Guide to Designing a Simple Camera Icon
Step 1: Know your subject
You need to first know what the icon you’re creating looks like in the real world. That’s why the search icon in many apps look like a magnifying glass.
We can Google images of a camera to get started. It’s guaranteed you’ll get plenty in different shapes and sizes, but they’ll all have:
Button that lets users take pictures
A sizable lens somewhere in the middle
Flash
These three elements will be part of design so that anyone can recognize the icon for what it is.
Step 2: Resolve it into shapes
Draw a few sketches to find basic shapes. These represent our building blocks. For a camera:
A rounded rectangle can represent the body.
Circles can recreate the lens and flash.
Another rectangle can create the button.
Step 3: Build
In Sketch, you can create an artboard of dimensions 24x24px. Name it whatever you like (I’ll use My Camera Icon). Turn the artboard into a pixel grid where you can start drawing the basic shapes that make up the characteristics we defined in Step 2.
Review the border settings to ensure your pixels snap to grid. Also ensure that your borders are set to the outside or inside of the shape (not the center). You may have elements outside of the pixel grid if you skip this step.
Now combine the necessary shapes using Boolean operations.
Step 4: Test it!
You need to test your work to ensure it reads clearly. A friend or co-worker can play the role of the user. Make adjustments based on their feedback.
Step 5: Review your work
Before finalizing your icon, ensure there are no decimal points. Use the numbers inspector to ensure you have only whole numbers.
Step 6: Export
Save your work and export it in your preferred format.
Conclusion
Congratulations!!! You just designed a simple camera icon with minimal details and strokes. Of course, the complexity of your design depends on the project requirements and you. However, the process is always the same. Check out UILand for effective screens and user flows featuring legible and accessible icon designs from the world’s greatest apps.
