Hi! Last week we had a laid-back edition where our designers reimagined the Netflix interface, but this week we‘ll change directions and drip in sweat. We asked our designers to put on their sporting clothes, enter the field and design anything sports related. Definitely much space to let their imagination run wild. Welcome to the last Framer X Challenge of this series: Edition 3!
For the ones that missed the previous editions: we are Label A, a digital product development company based in the Netherlands. Every week, 3 of our designers make a concept in Framer X in just 1 hour. The one with the most original, creative and useful design, wins. Jury? The whole Label A team.
This week’s challengers
Isa — All-in-run
I don’t have a favourite sports team, so when I was thinking about something else with sports, I thought about running. When going for a run I am currently using 4 apps: Maps for a route, Spotify for music, the weather app for my outfit and Runkeeper for tracking. I asked myself: why not combine those?
I didn’t work with Framer X before, so making something in one hour was hard. But thanks to the components it was very easy to make something nice and get a real app feeling. I especially liked the Spotify component, because I could add all my running playlists. I cheated by making the player invisible and designing my own play button. Unfortunately I couldn‘t animate this play icon.
Components used
Spotify by Jurre Houtkamp
Icon generator by Benjamin den Boer
CARTO maps by Emilio Garcia
Radial Gradient by Sebastiaan Graz
iOS kit by Edoardo Mercati
Maik — Animating Lionel Messi
For the third Framer X Challenge I focussed on animations and code overrides. Code overrides allow you to change any Frame or Component on the canvas with code. Think of animating objects when clicking on a button or applying real data. As the theme was sports, I was aiming for a nice animation when opening the detail page of a sports person, for example Lionel Messi.
For my tiny prototyped I used a button to allow the user to see a soccer player, an animation which could happen when opening a detail page for example. The `app.tsx` file uses a `Button` override to toggle scaling and opacity of the other Frames in the view.
For more about code overrides, make sure to read the docs here (https://framer.com/docs/overrides) and here (https://framer.gitbook.io/framer/code/code-overrides) and here (https://medium.com/@benjaminnathan/how-to-create-a-simple-prototype-with-code-overrides-in-framer-x-4ab14a4b329d)
Rick — Social sports
Personally I don’t practice any specific sport, but I do like to watch a match every now and then. Most of the times I watch it with friends and we end up hanging out on the couch with a small group and watch the Champions League or UFC.
This challenge I wanted to visualise an app that’s capable of viewing all the games of your favourite teams in different sports. Besides that I wanted to make it more social with a feature to invite people to watch the game or actually go watch the game in real life.
Components used
Video player by Krijn Rijshouwer
Icon Generator by Benjamin den Boer
Profile by Benjamin den Boer
iOS Kit by Edoardo Mercati
This week’s winner.. 🎉
Label A came together and came to a conclusion. The winner of the last Framer X Challenge is Isa! Congratulations Isa with your All-in-run concept!
A word of thanks from our designers!
Thank you for reading the last edition (and hopefully the others) of the Framer X Challenge! We all had a lot of fun being part of it and were able to make some really cool designs in the short time we were given. Framer X has proved itself to be a nifty design and prototype tool with a crazy amount of possibilities.
