Day 11 of 30 Day UI/UX Design Challenge: Icon Creation on Figma! 〰️

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share

🎨 Today’s design task

Another exciting morning! Today’s project is continuing to make the icons!

Day 2: Final Icon Design (3 hours)
Create the final versions of your 6 icons based on your Day 1 sketches.
Requirements:

  1. Refine and digitize your chosen sketches
  2. Ensure consistency in style across all 6 icons
  3. Design icons that work well at both large and small sizes

🚀 My design process

  1. I finished reading the article I started yesterday

  2. Since I’m creating icons on Figma, I read a Figma-specific icon design article

  3. Created a 24px x 24px frame and added key shapes

  4. Established design rules for a fun, friendly, and kind aesthetic:

    1. 0.5 px stroke
    2. Rounded ends
    3. Rounded corners (corner radius 1px)
  5. Initially attempted using circles and rectangles, but switched to the pen tool for line icons (Here is the image when I struggled using shapes for the Sake icon 🤣 As you can see, I was completely lost.)

  6. Overcame challenges with the Sake icon shape using the pen tool

  7. Faced difficulties with all German icons 🥲

  8. Wanted to adjust German icons further, but time was up! ⌛

🧠 Challenges and solutions

  • Japanese icons were much easier than German ones. Should’ve chosen simpler shapes for German icons.
  • Initially struggled with circles, triangles, and rectangles. Learned to use union, remove fill, and add stroke.
  • Learning Figma’s interface and tools was time-consuming but valuable.
  • My partner’s feedback: Onigiri icon appears too angular

🖼️ The final design

Happy with Japanese icons but not with German ones. Discovered that icon creation is more complex than expected, but the learning process was enjoyable!

💡 What I learned today
Maintaining consistency was challenging (deciding which rules to keep or break). Learned basic icon principles from the articles, which I can apply to future website/mobile site and web app/mobile app designs!

Thanks to my partner for choosing this helpful fun task 🫶🏻

⏰ If I had more time, I would

  • Choose different items for German icons
  • Implement partner’s suggestions
  • Create flat versions of all icons

💌 Any thoughts?

What are you working on these days? I’d love to hear your thoughts on my design or any advice you might have!

Thanks for following along on Day 11 of my challenge. See you tomorrow for Day 12!

with love and light 🫶🏻
Yoshie

p.s. I downloaded a mobile app called Unhinged. It’s super cute and I’m sure it helps many people like it does for me! Our cat, Teto, has a sensitive stomach, and I’ve been thinking it would be nice to have a tracker for his food intake, digestion, and cuddle levels. I might design something like that in the coming days! 🐈‍⬛

Related articles

Day 20 of 30 Day UI/UX Design Challenge: Smart Animation! 🪂

🎨 Today’s Design Task Today’s task was something I knew I’d have to tackle eventually, so I’m glad I took it on! See task description 🚀 My Design Process Understanding the Task: I carefully read the task to ensure I knew exactly what was required. Lo-Fi Design: I started by creating a lo-fi design of the navigation bar and hero section, adding a path for a paraglider silhouette. AI Assistance: I …

Day 27 of 30 Day UI/UX Design Challenge: Designing the Blog Article Page! ✍🏻

🎨 Today’s Design Task I was really excited about today’s task! After designing the overall layout for my blog yesterday, I focused on designing how each article page would look. 🚀 My Design Process Component Research: I started by examining other blog articles to identify the components I wanted to include in my design and made a list. Initial Layout Testing: I added some of my existing …

Day 22 of 30 Day UI/UX Design Challenge: Diving Deep into Accessibility! 🕵🏻‍♀️

🎨 Today’s Task Conduct an accessibility audit for pickuplimes.com Today’s task was both challenging and valuable. Accessibility is a crucial aspect of design, and I learned a lot from this deep dive! 🚀 My Process I followed the Accessibility Insights for Web assessment guidelines closely to ensure I covered all necessary checks. 🧠 Challenges and Solutions Finding the Right Guidelines: Initially, …