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.

2 Likes

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.

3 Likes

Black and gold is a fun choice! Gold is notoriously difficult to convey in digital design, because it can look more like yellowy brown or a dark yellow, but I think you’ve nailed it here. It’s refreshingly different and a nice high contrast.

You’ve got quite a tight amount of space around the icons, which would be something to factor in when you are positioning them alongside another object. They could end up looking cramped, but I think it works for the smaller icon sizes where you don’t have much available space to fill with empty pixels.

1 Like

Thank you for your review. I really appreciate it. This was not intentionally designed — it was a technical mistake on my part. Thank you very much for identifying it and bringing it to my attention. :innocent:

1 Like