Hi! If you’re reading this you’re probably just as hyped about Framer X as we are. Who are we? Label A, a digital product company based in the Netherlands.
Framer X has a lot to offer. So much that we decided to do something cool, something that lets us explore Framer X and have fun at the same time. Welcome to our weekly Framer X Challenge. We’ll explain the challenge and immediately show you the results of the first edition, so scroll down!
Challenge explanation
3 designers, 1 topic and 1 winner: that’s the challenge in a nutshell. We test the skills and creativity of our heroes by challenging them to make a concept in Framer X in just 1 hour. Blood, sweat and tears guaranteed!
Picking the winner
Every week, we will show the designs to the whole Label A team. They will choose the winner based on design, creativity and implementation of Framer X tools.
Clear? Let’s move on to the first challenge!
Challenge 1: Weather app
Dutchies’ favorite topic: the weather. We put our challengers to the test to see how they combine the basic functionalities of a weather app with these of Framer X. Time to put their creativity to the test.
This week’s challengers
Raúl — Fixing the wardrobe madness
For this challenge I wanted to create a weather app that helps me with my wardrobe madness every morning.
The concept is really simple: based on your location it shows inspirational clothing pictures. These so-called Lookbook images are contextual aware of the current weather. On the top-right corner you can push the refresh button and based on the selected date it will render a new inspirational image. On the bottom you can also look forward to the coming days. With this app you’ll look prepared and sharp!
Components used
Get Weather
Material design
Maik — Your personal morning routine
As I have just started with bringing Alexa in my life and trying out Siri Shortcuts, I tried to combine the best of them!
By running the Morning routine skill, the Amazon Echo Show turns itself into the hotspot for your routine. It runs a Hue command for your scene, plays some music for you and gives you important morning information. To give it a more personal touch I included a shoe that is pulled from my portfolio that is a perfect fit for the weather. I imagine hooking up routine cards in the settings to create the perfect morning routine companion.
Packages used
Unsplash Images by Unsplash
Feather Icons by Cole BemisTech Notes
Cards are components
Cards are in a stack for easily replacing them
Unsplash grabs random `Weather` photos
Syara — Dress for the weather
For this challenge I had the idea to create an app that helps you dress to the weather by learning what you personally experience as warm and cold. The app will remember what clothing works for what weather.
I created an interface rather quickly, although I had to adjust a bit to working with frames and the way items get grouped together in a more automated way. The stacks feature worked great and building and rearranging the diagram was easy. For this UI, I first used ‘Get Weather’ by Bart Simons, although it broke a couple of times (along with the rest of Framer). That’s why I replaced it with static text in the end. I’m a big fan of the Icon Generator, it really saves some browsing time. I hope more icons will be available soon. Creating the notification was super easy as well with the iOS kit.
Packages used
Icon Generator by Benjamin den Boer
iOS kit by by Edoardo Mercati (edited)
This week’s winner.. 🎉
Label A came together and came to a conclusion. The winner of the first-ever Framer X Challenge is…. Syara! Congratulations Syara with your ‘Dress for the weather’ concept!
➡️ Next week: Netflix-like interface
Next week our challengers will create a movie interface a-la Netflix in their own style. They’ll have to think about how Framer X can make it intuitive and personalised! Check it out here.
Do you want to work with the latest design tools? Do you want to keep developing yourself and the products you make? You might be a good fit for Label A! Check out our vacancies here.
