Day 26 of 30-Day UI/UX Design Challenge: Creating My Custom Blog Design! 👩🏻‍🎨

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

🎨 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

  1. Inspiration Gathering: I explored various blogging websites to gather inspiration.

  2. Initial Sketches: I sketched out my ideas on my iPad.

My initial sketches
  1. Lo-fi Mockup: I created a lo-fi design in Figma to visualise the layout.
  1. Custom Icon: I designed a lotus flower icon, which I love—let’s agree that it does look like a lotus flower, shall we? 😂

  2. Style Guide: I developed a style guide for colours and typography.

  3. Navbar Design: I started with the navbar, keeping it simple and consistent with the lo-fi design.

  4. Tag Section: I made the “#” symbol larger to better align with the tag names and article counts. I also removed the “Other Tags” button, as I won’t have many tags to display.

  5. Latest Posts Section: I designed this section with a focus on using Open Graph images at a 1200 x 630 ratio for consistency.

  6. Challenge Section: I created a section for the “30-Day UI/UX Design Challenge,” reusing the card layout from the “Latest Posts” section.

  7. All Posts Section: Initially, I considered adding images here but decided against it for a cleaner look, especially as the number of posts increases.

  8. Footer Design: I experimented with the footer, initially giving it a different background color, but eventually opted for a more cohesive look with the rest of the site.

  9. Card Shadows: I added subtle shadows to all cards for a polished effect.

  10. Improving Readability: The date text on the article cards didn’t have enough contrast, so I darkened it for better readability.

  11. Feedback & Adjustments: After receiving feedback from my partner, I made the following tweaks:

    • Aligned stroke widths for the icon, “#” lotus flower icon, and line under menu items.
    • Increased letter spacing for capital letters to 4%.
    • Lightened the line under the navbar to reduce its prominence.
  12. Final Checklist: I finally created a checklist to ensure I cover everything before considering a design complete (better late than never, right? 😅).

🧠 Challenges and Solutions

Designing from scratch allowed me to fully express my style, but it was challenging to think deeply about the purpose behind each design element.

🖼️ The Final Design

I’m really happy with how it turned out! I’m not sure when it’ll be implemented, but I’m super excited about the next steps.

💡 What I Learned Today

I’ve found that it’s easier to design when I understand the values, purpose, and desired user experience. This understanding is crucial for translating a client’s vision into a precise design.

⏰ If I Had More Time

  • I’d add hover effects to enhance interactivity.
  • I’d also plan out the design for individual blog posts, which I’ll do in tomorrow’s challenge.

💌 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 26 of my challenge. See you tomorrow for Day 27!

With love and light, 🫶🏻
Yoshie

P.S. I’m currently reading a book called DESIGN IS A JOB by Mike Monteiro. Even after just a few pages, it’s helped me focus more on the problems I’m solving through design rather than just making things look good. I’m eager to dive into more books on design, UI, UX, and psychology ☺️ What’s your favourite design book? 📖

Related articles

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

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

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 …

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 …