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 11 of 30 Day UI/UX Design Challenge: Icon Creation on Figma! 〰️

🎨 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: Refine and digitize your chosen sketches Ensure consistency in style across all 6 icons Design icons that work well at both large and small sizes πŸš€ My design process I …

Making TELL Japan Website Accessible and Decluttered 🧹

πŸ‘©πŸ»β€πŸ”¬ Accessibility Testing Insights During my review of the TELL Japan website, I identified 17 accessibility and UI/UX issues. While 7 of these issues required coding changes, I addressed the other 10 through design improvements. Here’s how I tackled them. βœ… How I Solved Accessibility and UX Issues 1. Low Color Contrast on Buttons and Text: I improved the colour contrast of text and …

Day 4 of 30 Day UI/UX Design Challenge: Medieval Artistry πŸ‘¨πŸ»β€πŸŽ¨

🎨 Today’s design task I was so excited about today’s task that I even dreamed about it last night! πŸ˜‚ Today, I’m building on yesterday’s wireframe by designing the Portfolio Gallery section for Andreas Maler, capturing his unique art style and the game’s aesthetic. Design the Portfolio Gallery section from your wireframe, capturing the essence of Andreas Maler’s …