Day 9 of 30 Day UI/UX Design Challenge: Website Refresh for My Partner! 😘

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

🎨 Today’s design task

Another exciting morning! After a hot day yesterday, I was grateful for the cool morning breeze today 🌬️

Today’s task: Redesign this website: medienbaecker.com.
Here is how it looks now 🥨

🚀 My design process

  1. Study the website: I started by understanding what needs to be on the homepage.

  2. Inspiration: I looked up some inspirations. There were so many cool ideas that it was hard to decide which ones to incorporate.

  3. Sketching: I sketched my ideas on my iPad.

  4. Color and typography: I was unsure whether to go for a colourful design or stick with a monotone, as many software engineer portfolios are monotone. I decided to start with a monotone and would consider a colourful version if I had time.

  5. Gathering resources: I got some pictures and links from the website.

  6. Adding GIFs: I decided to include GIFs, so I recorded my screen going through two websites and made them into GIFs using Adobe Express. This took more time than expected because of quality issues, but I managed to get it right by trimming the video to about 15 seconds.

  7. Icons: I got some icons using the Iconify plugin in Figma.

  8. Personal touch: I chose my favourite photo of him 🫶🏻

  9. Colour experiment: I experimented with using yellow/orange in some areas.

  10. Final touches: I added more cards without pictures or GIFs.

🧠 Challenges and solutions

  • Time constraints: Completing the entire page within three hours was tough. It was a good decision to skip the “nice-to-have” features.
  • Prototyping: I didn’t have time to add prototypes.
  • Feedback: My partner’s feedback included:
    • Use a beautiful shadow plugin.
    • Stick to one icon style (stroke, filled, emoji).
    • Consider different stroke colours for the projects.
    • Nested border-radius - inner element should have less radius

🖼️ The final design

I’m pretty happy with the result. It’s still exciting to see light and dark modes working!

💡 What I learned today

I need to be more careful with consistency in radius and icons.

⏰ If I had more time

  • I’d adjust the design based on my partner’s feedback.
  • I’d add animations (hover effects and dark/light toggle switch).
  • I’d create a colourful version of the web page.

💌 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 9 of my challenge. See you tomorrow for Day 10!

With love and light 🫶🏻

Yoshie

P.S. Yesterday, my partner and I had a small bet about the spelling of “eyebrow.” I lost because my partner got it right while I thought it was “eyeblow” 🫠
I was pretty sure that I’ve seen the spelling “eyeblow” many times in Japan and when we googled it, some Japanese results came up 😂 Since I lost the bet, I had to redesign my partner’s website, which turned out to be pretty fun!

Yesterday’s Teto 🐾

Related articles

Day 5 of 30 Day UI/UX Design Challenge: Meditation app with Psyduck! 🐥

🎨 Today’s design task Today was probably my most challenging task yet — designing a mobile meditation app featuring Psyduck! As a former web developer, mobile apps are new territory for me, but combining meditation with one of my favourite Pokémon made it exciting. 🚀 My design process Thoroughly analysed the task requirements Sketched initial ideas on my iPad using Freedom app Researched …

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

Day 19 of 30 Day UI/UX Design Challenge: Getting Tidy! 📦

🎨 Today’s Design Task Today’s task was a bit overwhelming but also rewarding. Just like decluttering a home, I focused on tidying up the design and content of a cluttered homepage. Show task description 🚀 My Design Process Content Review: I went through all the content on the homepage, marking key services (green), calls-to-action (red), and redundancies (yellow). I added notes directly onto …