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 15 of 30-Day UI/UX Design Challenge: Mobile App Lo-fi Design! ✍🏻

🎨 Today’s design task Today’s project was so much fun because it allowed me to think about my baby, Teto πŸˆβ€β¬›β€οΈ πŸš€ My design process Brainstormed key features for the app: Started with a brainstorming session to identify essential features. Defined the primary user persona: Essentially, I used myself as the primary user persona. Listed potential data points to track: Created a list of data …

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 …

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 …