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 6 of 30 Day UI/UX Design Challenge: Decoding Cat Body Language ๐Ÿˆ

๐ŸŽจ Today’s design task Another day, another challenge! Today’s task pushed me out of my comfort zone, focusing on cat body language. ๐Ÿš€ My design process Researched cat body language (despite having a cat, I realised there was a lot to learn!) Sketched initial ideas on paper Selected ethical colour palette Chose font pairing: Poiret One & Montserrat Found and incorporated cat images โ€ฆ

Day 27 of 30 Day UI/UX Design Challenge: Designing the Blog Article Page! โœ๐Ÿป

๐ŸŽจ Today’s Design Task I was really excited about todayโ€™s task! After designing the overall layout for my blog yesterday, I focused on designing how each article page would look. ๐Ÿš€ My Design Process Component Research: I started by examining other blog articles to identify the components I wanted to include in my design and made a list. Initial Layout Testing: I added some of my existing โ€ฆ

Day 28 of 30 Day UI/UX Design Challenge: Landing Page for Cat Poopy Tracker! ๐Ÿพ

๐ŸŽจ Today’s Design Task Today’s task was a lot of fun, especially since I got to play around with animations in Figma! Task Overview: Poopy Tracker App Landing Page with Animated Features Design a landing page for the Poopy Tracker mobile app using Figma, featuring an animated transition for the key features section. Hero Section: Create a hero section explaining the app’s purpose โ€ฆ