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 …

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 …

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