Showcasing a compilation of design exercises I started to enhance my interaction and UI/UX design skills. Follow me on Dribbble and Behance and see my journey to becoming a better designer 🎨!
Day 011: Flash Message
Design a Flash Message with both the error message and success message. Is it for a sign up form? A download/upload message? Is it to promote a membership plan?


Day 010: Social Share
Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing. It could be to share an article snippet, or a simple link with a photo.

Day 009: Music Player
Design a music player. It could be browser based or an app (i.e. Pandora, Spotify, SoundCloud, etc.) or in a standalone product like in a car dashboard, jukebox, etc.
Consider the controls, placements, imagery such as the artist or album cover, etc. Also, consider the device type that’s playing the music. A dashboard in a tour bus, a smartwatch, or via a web browser. Each device type will have different requirements, features, and restrictions to consider.

Day 008: 404 Page Design
Does it suit the brand’s style? Is it user-friendly? It might sound mundane, but not everything can be flashy or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that’s useful and aesthetically pleasing.

Day 007: Settings
Design settings for something. Is it for security or privacy settings? Game settings? Light mode vs. dark mode? System settings (sound, notifications, screen time, Wi-Fi, etc.?

Day 006: User Profile
Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile?

Day 005: “App Icon”
Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?
Tool: Adobe Illustrator

Day 004: “Calculation”
Design a calculation element or interface. Is it a standard calculator, a scientific one, or specialty calculator for something such as a home mortgage or auto loan? Is it to forecast a calculation such as for a credit score? Is it for a phone, a tablet, a web app?
Tool: Adobe XD

Day 003: “Landing Page”
What’s the main focus? Is it for a book, an album, a mobile app, a SaaS product? Consider important landing page elements (Headlines, call-to-action buttons, typography, clarity, etc.)
Tool: Procreate, Photoshop, Figma

Day 002: “Credit Card Checkout“
Design a credit card checkout form or page. Don’t forget the important elements such as the numbers, dates, security numbers, etc.
Tool: Figma

Day 001: “Sign Up”
Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.
Tool: Illustrator, Figma
