The latest articles on DEV Community by Jayvee Rasos (@jara_intech). https://dev.to/jara_intech https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3019470%2F5f14a938-c1cc-4478-a7ca-bdafe5ef1852.png https://dev.to/jara_intech en Jayvee Rasos Thu, 31 Jul 2025 10:00:07 +0000 https://dev.to/jara_intech/my-first-steps-into-uiux-building-a-weather-app-prototype-2bdc https://dev.to/jara_intech/my-first-steps-into-uiux-building-a-weather-app-prototype-2bdc <p>Hi everyone! 👋<br> 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.</p> <p>🌦️ Why a Weather App?<br> 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.</p> <p>💡 What I Learned</p> <ul> <li><p>User-centered design: I focused on what users need most, like clear visuals of weather conditions and easy-to-read text.</p></li> <li><p>Using design tools: I used Figma to create my prototype and Canva to design custom backgrounds for different weather conditions.</p></li> <li><p>Responsive design: I made sure the app looks good on different screen sizes, especially mobile phones.</p></li> <li><p>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.</p></li> </ul> <p>🖼️ Screenshots<br> Here are screenshots of the Kliima app prototype:</p> <ul> <li><p>Loading screen showing app logo and weather icon.<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbf6hyig5mx1oa1fr1pmq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbf6hyig5mx1oa1fr1pmq.png" alt=" " width="369" height="742"></a></p></li> <li><p>Home screen displaying current weather conditions<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8avn8q3vt9bxi8alz0j.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo8avn8q3vt9bxi8alz0j.png" alt=" " width="380" height="736"></a></p></li> </ul> <p>🚀 Next Steps<br> I’m excited to keep improving my skills by:</p> <ul> <li>Adding interactive elements to the prototype</li> <li>Learning more about accessibility</li> <li>Getting feedback from other designers and users</li> </ul> <p>🛠️ Tools I Used</p> <ul> <li>Figma (for prototyping)</li> <li>Canva (for background design)</li> <li>Free icon libraries and UI templates</li> <li>Figma Community plugins and resources</li> </ul> <p>📌 Credits<br> 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.</p> <p>Thanks for reading!<br> This is just the beginning of my UI/UX journey, and I’m looking forward to sharing more projects and lessons along the way.</p> <p>👉 What was your first UI/UX project? I'd love to hear about it in the comments!</p> ui learning beginners uxdesign