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

Day 26 of 30-Day UI/UX Design Challenge: Creating My Custom Blog Design! ๐Ÿ‘ฉ๐Ÿปโ€๐ŸŽจ

๐ŸŽจ Today’s Design Task Iโ€™ve been using a template for my blog, but my partner suggested I design my ownโ€”and heโ€™d handle the coding! I was super excited to dive in and create something uniquely mine ๐Ÿคฉ ๐Ÿš€ My Design Process Inspiration Gathering: I explored various blogging websites to gather inspiration. Initial Sketches: I sketched out my ideas on my iPad. Lo-fi Mockup: I created a lo-fi โ€ฆ

Day 10 of 30 Day UI/UX Design Challenge: Icon Design! โžฐ

๐ŸŽจ Today’s design task Last night, I discussed my task for today with my partner. I’m grateful for his input, as he’s always thinking about how I can upskill as a designer. ๐Ÿฅนโค๏ธ Todayโ€™s task: Itโ€™s a 2-day series focused on icon design! ๐Ÿš€ My design process Understanding the task: I started by reading the task requirements. Research: To understand how to make consistent icons, I โ€ฆ

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