Day 3 of 30 Day UI/UX Design Challenge: First Lo-Fi Web Page Design! 😮

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

🎨 Today’s design task

Despite feeling a bit tired from a late night, I was excited about today’s task: creating a wireframe for a medieval artist’s portfolio website. It’s a two-day project, but my partner helped me break it down into manageable steps. As a fan of medieval art (thanks to playing Pentiment), I was thrilled to work on this.

The task:
Create a lo-fi design for a single-page portfolio for Andreas Maler, including a header, hero section, about, portfolio gallery, commissions, testimonials, contact form, and footer. I decided to make a lo-fi design of a modal to prepare for tomorrow.

🚀 My design process

  1. Got inspiration from the Pentiment video game website.

  2. Created a mood board using images from the website.

    © 2024 Obsidian Entertainment, Inc.
  3. Sketched initial ideas on my new iPad (a surprise gift from my partner!).

  4. Transferred my sketch to Figma, making minor adjustments.

🧠 Challenges and solutions

  • I’ve been designing sections, not an entire web page, so it was easy to go right ahead with hi-fi design. Today I learned the importance of doing lo-fi design to see the entire page so if I am actually designing a web page or a whole website, I know which section I am working on and what’s left. It helped me see the big picture.
  • Working without colours was a bit dull, but I recognised its importance in the design process.

🖼️ The final design

My lo-fi design is simple and straightforward. I’m excited to work with colours and design the art section tomorrow!

💡 What I learned today

Lo-fi design is quick but valuable. It helps me appreciate colours and typography more. I realised I’ve been doing this step on my sketch in previous days, but I’ll make sure to include it in Figma from now on.

⏰ If I had more time

  • I’d spend more time on the Hero section to make it more engaging, perhaps centring the self-portrait.

💌 Any thoughts?

What are you working on lately? I’d love to hear your thoughts on my design or any advice!

Thanks for reading until the end of Day 3 of my challenge. See you tomorrow for Day 4!

With love and light 🫶🏻
Yoshie

P.S. I’m so grateful for my new iPad. As a child, I enjoyed drawing but gave up thinking I had no talent. Now, 20 years later, I’m giving it another shot, focusing on learning rather than relying on talent. I might share some artwork here too!

Related articles

The image of the current homepage of Droople's website and Yoshie's redeisng of it

Improving Accessibility & UX on Droople’s Website! 💧

👩🏻‍🔬 Accessibility Insights from My Review While reviewing Droople’s website, I identified 23 accessibility and UI/UX issues on the homepage. Of these, 10 could be fixed with design changes, 12 required programming fixes, and 1 involved content editing. Let’s explore how I approached these issues and improved the design! ✅ How I Solved Accessibility and UX Issues 1. Colour Contrast Many text …

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 …

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