Day 20 of 30 Day UI/UX Design Challenge: Smart Animation! 🪂

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

🎨 Today’s Design Task

Today’s task was something I knew I’d have to tackle eventually, so I’m glad I took it on!

See task description

🚀 My Design Process

  1. Understanding the Task: I carefully read the task to ensure I knew exactly what was required.

  2. Lo-Fi Design: I started by creating a lo-fi design of the navigation bar and hero section, adding a path for a paraglider silhouette.

  3. AI Assistance: I used AI to generate a fictional paraglider company, complete with a name, headline, and colour scheme.

  4. Icon Collection: I gathered paraglider icons from Streamline for use in the design.

  5. Color and Typography: I selected colours and typography that matched the brand concept.

  6. Hero Image: I found a paraglider video for the hero section and converted it into a GIF since I don’t have Figma Pro.

  7. Logo Creation: I designed a logo to tie the brand together.

  8. Another Animation Work: I created animations with delay.

  9. Another Animation Work: I created animations with smooth mouse enter effects.

  10. Design Adjustment: Realising that both a video and an animated icon in the header were too much, I replaced the video with an image.

  11. Icon Placement: I moved the icon animation to the section below the header to reduce visual clutter.

  12. Headline Addition: I added a clear and compelling headline to the design.

🧠 Challenges and Solutions

  • Figma Limitations: As a former software engineer, I found Figma’s animation tools a bit frustrating.
  • Finding the Right Resources: While there are many Figma tutorials online, finding exactly what I needed was challenging. I’ll need to streamline my learning process for future tasks.

🖼️ The Final Design

While I’m not entirely satisfied with today’s outcome, it was a valuable learning experience.

💡 What I Learned Today

Adding movement to a website is fun, but it’s crucial to balance it with other design elements to avoid overwhelming users.

⏰ If I Had More Time

  • I’d add more sections and create a full page with paraglider animations. It would be cool if the paraglider returned to the logo in the footer!
  • As my partner pointed out, having a video in the header is key for a paraglider company, so I need to find ways to make the video engaging without distracting from the main call to action.

💌 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 sticking with me through Day 20 of my challenge. I can’t believe I’m already two-thirds of the way through! I’m excited for the upcoming challenges. See you on Day 21!

With love and light 🫶🏻

Yoshie

P.S. A few days ago, my partner and I finished watching Frieren: Beyond Journey’s End. It was amazing. I’m usually hesitant to start a new anime, but I’m glad I gave this one a chance. The biggest takeaway for me was that nobody is perfect. But by trying to understand each other, putting ourselves in each other’s shoes, and communicating openly, we can resolve conflicts and build deep connections. Can’t wait to dive into the new manga next!

Related articles

Day 22 of 30 Day UI/UX Design Challenge: Diving Deep into Accessibility! 🕵🏻‍♀️

🎨 Today’s Task Conduct an accessibility audit for pickuplimes.com Today’s task was both challenging and valuable. Accessibility is a crucial aspect of design, and I learned a lot from this deep dive! 🚀 My Process I followed the Accessibility Insights for Web assessment guidelines closely to ensure I covered all necessary checks. 🧠 Challenges and Solutions Finding the Right Guidelines: Initially, …

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 …

The Sanat Ensemble website, showing the homepage with a colourful design and images of the performers on laptop and mobile

Finding Balance Between Fun, Joy, and Seriousness

Designing the Sanat Ensemble website was both a rewarding and challenging experience. The task was to capture the vibrant energy of the 70s whilst honouring Turkish people and other communities who fought for equal rights. I also wanted the design to reflect the joy and lively spirit of their music and performances. Here’s a breakdown of the key struggles I encountered and how I overcame them! 1. …