- Selected projects
- Spektrum Sports
- HIGH&OVER
- Vidd Agency
- Contact
- +46(0)70 147 96 63
- hej@mid-air.studio
Introducing —
"Design in-code™"
It all began when we were working on the re-design for Spektrum Sports...
Though we'd hoped it was in the past, Covid-19's autumn 2022 come-back caused us a bit of a dilemma. Spektrum's lead developer on the project got hit with long-covid and our goal of having phase 1 of the new site live for Black Friday was fast approaching.
Originally the plan was to create the designs for each breakpoint/device in Figma and, as things got signed-off, hand them over to the developer to build and implement. A fairly standard process.
Time and availibilty meant this plan wasn't going to work if we were to hit the deadline. We had to think on our feet — or actually, we got to thinking while out riding a bike...
The thought process went something like this —
"I suppose you could say it felt like a Eureka moment. I'd never say that for real though."
— Danny, at a roadside near Stockholm sometime in Autumn 2022
"Our lead designer knows their way around front-end code... So let's drop the entire Figma step and, instead, execute the design phase in-code. Since we're using TailwindCSS for the front-end things should fall into place nicely. I mean, why can't Marketing be an arm of Sales?"
A road-side phone call was made immediately to our contact at Spektrum and, after discussing the pros and cons, a new plan was set. Creative development FTW! Design would start immediately in VSCODE (our text editor of choice). Goodbye Figma.
This was something of an alternative — dare we say, pioneering? — approach. But the process worked beautifully. We were able to create and test our designs on real devices in realtime. It was easy to check how things looked and felt on different size screens and in different browsers without the need to spend unnecessary time making long-winded (and often still inaccurarte and unsatisfactory) prototypes in Figma.
Importantly, another benefit of this approach was nothing fell short of expectations. There weren't any time-consuming ideas dreamt up and sketched in Figma which would only ever remain there. We built everything tested and working for the World Wide Web and ready to handover to the developer for implementation.
Is this now our favoured approach? We think so — with the right team it's certainly something we'll be considering for future projects.
Bottom line — it's a great approach to get the most out of your budget.