Day 10 of 30 Day UI/UX Design Challenge: Icon Design! ➰

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

🎨 Today’s design task

Last night, I discussed my task for today with my partner. I’m grateful for his input, as he’s always thinking about how I can upskill as a designer. 🥹❤️

Today’s task: It’s a 2-day series focused on icon design!

🚀 My design process

  1. Understanding the task: I started by reading the task requirements.

  2. Research: To understand how to make consistent icons, I read this article on designing icon sets.

  3. Taking notes: Key points from the article:

    • Three stages: Conceptualization, design, and evaluation.
    • Three keys:
      1. Use precise messages.
      2. Be graphically accurate.
      3. Ensure visual consistency (same grid, stroke width, key shapes, corner radius, and angles).
  4. Following steps: I decided to follow the steps mentioned in the article.

  5. Conceptualization: I listed all the icons we plan to design by researching traditional items recognized in each country (Japan and Germany).

  6. Narrowing down ideas: I chose the following pairs:

    1. Onigiri - Pretzel
    2. Sake - Beer
    3. Mt. Fuji - Alps
  7. Detailing: Answered three questions for more details:

    1. Tone: Fun, friendly, and kind.
    2. Style: Line.
    3. References: I used Streamline Icons for reference.
  8. Design: I researched different icon styles and sketched three icons for Germany and Japan, looking at photos and online inspirations. (In the sketching I added some notes for what more I can add to the icons.)

  9. Sketching: I sketched all icons in minimalist and flat styles. For clarity, I made two versions of the Sake icon.

  10. Final adjustments: Added white lines to the flat icons for better clarity, I’ll see how they look on Figma tomorrow.

🧠 Challenges and solutions

  • Simplicity vs. recognition: Even as a minimalist, making easily recognized icons was challenging.
  • Time investment: Learning about icons took time, but it was worthwhile for creating quality icons.
  • Feedback: Thomas sensei’s feedback was encouraging: “Good job! 👏🏻”

🖼️ The final design

I’m content with the results. They didn’t turn out as badly as I feared 😂. I’m excited to see how they look digitised!

💡 What I learned today

Understanding principles and taking time in the initial steps are crucial. I’m thankful for the abundance of free resources available and for my partner’s guidance to good resources.

⏰ If I had more time

  • I’d decide which Sake icon to use.
  • I’d learn more about using Procreate to add radius and create tablet shapes, making my sketches more accurate.

💌 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 10 of my challenge. See you on Day 11!

With love and light 🫶🏻

Yoshie

P.S. I’ve started drinking energy drinks lately 🔋. They help with my tiredness, though I’m unsure about their health effects. I’ve tried various Red Bull flavours (Cactus and Summer Edition are my favourites) and 28 Black Acai, which is the best tasting and vegan. If I were in the US, I’d love to try Juni sparkling drinks. Which energy drink do you like best? 🥛 Or do you drink coffee daily like my partner? 🤔☕

Related articles

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, …

Making the Fermenstation Website Accessible 🥢

👩🏻‍🔬 Accessibility Testing Insights During my review of the Fermenstation website, I identified 10 accessibility and UI/UX issues. While 3 required coding changes, I addressed 7 through design improvements. Here’s how I solved them: ✅ How I Solved Accessibility and UX Issues 1. Low Colour Contrast: The contrast on buttons, text, and links (e.g., “READ MORE” under NEWS) was too low. …

The Sanat Ensemble website, showing the homepage with a colourful design and images of the performers on laptop and mobile

Finding Balance Between Fun, Joy, and Seriousness

Designing the Sanat Ensemble website was both a rewarding and challenging experience. The task was to capture the vibrant energy of the 70s whilst honouring Turkish people and other communities who fought for equal rights. I also wanted the design to reflect the joy and lively spirit of their music and performances. Here’s a breakdown of the key struggles I encountered and how I overcame them! 1. …