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 8 of 30 Day UI/UX Design Challenge: Redesigning Checkout Process! ๐Ÿ‘›

๐ŸŽจ Today’s design task Today’s challenge felt more comfortable, given my previous experience with forms in both design and coding. As always, Thomas Sensei provided valuable feedback! Task: Redesign the cart/checkout for Freibad Hornberg, improving upon their current design. current website ๐Ÿš€ My design process Sketched initial ideas on iPad Researched best practices for login, account โ€ฆ

Day 23 of 30 Day UI/UX Design Challenge: Making Accessible! ๐Ÿ‘€

๐ŸŽจ Todayโ€™s Design Task I was excited about todayโ€™s task because I got to turn the accessibility issues I identified on Day 22 into actual design improvements! ๐Ÿ› ๏ธ Today’s challenge: Choose one page or screen and create a redesign that addresses the accessibility issues: Sketch or create a digital mockup of your improved design Focus on fixing the problems you identified while maintaining the โ€ฆ

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 โ€ฆ