Now it is time for your first assignment. Feel free to skip the assignments in this course, though I'd recommend you still watch through these videos as it'll give you an idea of the formats you can expect from real world projects. Let's start with a simple assignment, a menu icon, but I've got a whole project specification for you.
You can refer to the specification in the assignment section of the course site, but I'll read it for you here now too.
Design project specification: menu icon.
Project overview: design a menu icon that will serve as the foundation for a new icon set. The icon will be used on a button to expand and collapse and navigation menu.
Design requirements: visual style:
create a recognizable menu icon that is immediately identifiable by both new and experienced users.
Design should be simple and distinctive while maintaining universal recognition as a menu control.
No need to match existing styles as this will be the first icon in a new set.
Technical specifications:
Format: vector-based design delivered as an SVG file. The sizing must be clearly legible at both 16 pixel and 24 pixel sizes.
Design approach: the designer may choose between a fill based design or a stroke based design. Personally, I'd recommend against combining fill and strokes because it can make resizing the icons difficult, while maintaining proportions between the fill and stroke shapes.
Compatibility requirements:
Color adaptability: the icon must work effectively in different color schemes.
Background compatibility: it must maintain visibility and clarity on both light and dark backgrounds and contrast. Ensure sufficient contrast in all usage scenarios.
Deliverables:
A primary Penpot file with properly organized layers and naming conventions.
16 and 24 pixel optimized SVG exports for implementation testing and documentation of any specific design considerations or implementation notes.
Consider maybe using the hamburger menu pattern, the three horizontal lines as its widely recognized. Alternatively, you could explore some modern interpretations that maintain that recognizability and avoid excessive detail that might be lost at smaller sizes. Ensure consistent visual weight across the design.
Some testing suggestions: test the icon against various background colors and patterns, and check the legibility at the required sizes. Confirm the design works in both black and white and color implementations. Remember, you can find this specification in the assignment section of the course site.
You can share what you've made for your assignment with me and the community in the Penpot community, or you can just keep it to yourself. There's no pressure. This could be the first work in your UI design portfolio.