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

Day 7 of 30 Day UI/UX Design Challenge: Modernising an Outdoor Pool Website! πŸŠπŸ»β€β™€οΈ

🎨 Today’s design task Thanks to our hungry cat Teto πŸˆβ€β¬›, I had an early start today. After creating a poster this morning (detailed at the end), I tackled today’s challenge in the evening. After yesterday’s struggles, I was eager to dive in, knowing it could only go up from here! Here is the original website: πŸš€ My design process Gathered existing images from the current homepage …

Day 2 of 30 Day UI/UX Design Challenge: Green is My Favourite! πŸ’š

🎨 Today’s design task Another exciting morning! Today’s project is a nutrition dashboard with a green theme. As a vegan who loves green, this task really resonates with me, even though I’m not a nutrition expert. πŸš€ My design process I started by sketching my initial ideas on paper. My experience with dashboard design as a software engineer came in handy! I researched daily …