Assignment: Create a menu icon - UI Course Block 1

In this assignment, the task is to create a menu icon using Penpot.

Here’s what I made. You can watch the video of me creating the icon(s!) in the walkthrough video below.

All the links:

What did you create? How did you find the design process? Share your Penpot files and your thoughts below!

4 Likes

My Icon versions :o)

Bonus:

5 Likes

Great work @NickM! The perfectly-organised layers :heart_eyes:

1 Like

I made this. Hope you like it!

Menu Icon - V1.penpot (69.1 KB)

2 Likes

Fantastic @saleh! So well-organised. I love how you’ve increased the spacing between the lines on the 24px version, giving the lines space where its available.

1 Like

Thank you! I’m really glad you liked it and appreciate the feedback :blush:

1 Like

Hello everyone, these are the menu icons I have made. Hope you guys like it :blush:

1 Like

These are great! The consistency in the stroke width across the icons creates a really cohesive feel across the icons.

I think the smaller size of your close/cross icon might have slightly shorter lines in the top half than the bottom half? And perhaps also the right half is slightly wider than the left half? Was this an intentional design choice?

I’ve taken a screenshot of your icon and laid a grid over the top of it to show you what I mean. Each side of the grid squares are an equal length. See how the centre of the grid lines don’t quite align with the centre of the X? And how the ends of the X lines don’t all meet the corners of the grid?

Of course, this could be an intentional design choice to angle the X as if its top part is slightly further away than its lower part, creating a slightly 3D feeling.

These are the icons I made for the assignment, any feedback would be greatly appreciated.

The icons are simple but some considerations to keep in mind in case of extending to an icon set would be the symmetry of the icons and the thickness of the 24px icons.

For the colors I wanted to go with a black and gold palette but I’m still not sure how well those work together (I can’t wait to get to the colors section of the course).

Icons.penpot (46.0 KB)

P.S. As a developer I’ve been loving the course, it’s awesome, and the app is also very friendly to use.