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 29 of 30 Day UI/UX Design Challenge: Redesigning the Registration Process for Seedlang 🌱

🎨 Today’s Design Task Today, I focused on redesigning the registration process for Seedlang, a language-learning app. The current design isn’t very accessible, so my goal was to make it smoother, more engaging, and user-friendly! πŸ–ΌοΈ The Final Design This task took me the entire day, and I felt a bit slow at times, but I’m reminding myself to be patient. I used Cari and …

Day 23 of 30 Day UI/UX Design Challenge: Making Accessible! πŸ‘€

🎨 Today’s Design Task I was excited about today’s task because I got to turn the accessibility issues I identified on Day 22 into actual design improvements! πŸ› οΈ Today’s challenge: Choose one page or screen and create a redesign that addresses the accessibility issues: Sketch or create a digital mockup of your improved design Focus on fixing the problems you identified while maintaining the …

On the left there is a 5 items on a checklist that have x mark and an accessibility symbol with a sad face. On the right there is a 5 items on a checklist that have check mark and an accessibility symbol with a happy face.

10 Questions to Ask Before Calling Your Design Complete

Are you a designer, developer, or content creator working on websites or applications? These 10 questions cover the fundamental accessibility considerations every design needs to address. If you can answer “yes” to all of them, you’ve got the basics covered. While there are many more questions to ask in creating accessible design (which I’ll cover in future articles), …