DEV Community

Jayvee Rasos
Jayvee Rasos

Posted on

My First Steps into UI/UX: Building a Weather App Prototype

Hi everyone! 👋
I’m currently a software design international student, and I’m excited to share my very first experience learning UI/UX as part of my Human-Computer Interaction course. This was my first time diving into user interface and user experience design, and I decided to start by building a weather app prototype called Kliima.

🌦️ Why a Weather App?
Weather apps are great for beginners because they combine simple, familiar content with useful design challenges—like showing current conditions, forecasts, and creating intuitive navigation. It’s a practical project that helped me apply the basics of layout, color, and usability.

💡 What I Learned

  • User-centered design: I focused on what users need most, like clear visuals of weather conditions and easy-to-read text.

  • Using design tools: I used Figma to create my prototype and Canva to design custom backgrounds for different weather conditions.

  • Responsive design: I made sure the app looks good on different screen sizes, especially mobile phones.

  • Community engagement: I joined design communities on Discord, followed UI/UX creators on Instagram, and read articles on Medium and Dev.to to learn best practices and get inspired.

🖼️ Screenshots
Here are screenshots of the Kliima app prototype:

  • Loading screen showing app logo and weather icon.

  • Home screen displaying current weather conditions

🚀 Next Steps
I’m excited to keep improving my skills by:

  • Adding interactive elements to the prototype
  • Learning more about accessibility
  • Getting feedback from other designers and users

🛠️ Tools I Used

  • Figma (for prototyping)
  • Canva (for background design)
  • Free icon libraries and UI templates
  • Figma Community plugins and resources

📌 Credits
Icons, UI plugins, backgrounds, and templates used in this prototype were sourced from free design resources, including Flaticon, Icons8, and the Figma Community. All assets were used in accordance with their respective licenses.

Thanks for reading!
This is just the beginning of my UI/UX journey, and I’m looking forward to sharing more projects and lessons along the way.

👉 What was your first UI/UX project? I'd love to hear about it in the comments!

Top comments (0)