The Unicorn Express
Becoming the fabled designer+developer combo, the Unicorn.
I’d never come across the term Unicorn until I read The Unicorn: Hybrid Designer + Developer. It never occurred to me that the designer+developer combination, in one human vessel, existed. I mean, conceptually it makes perfect sense. Most people have more than one skill set, so why not design and dev. Welcome to the beginning of our story: “From Fullstack to Unicorn in 365”.
Why now? Why at all?
Whenever anyone suggests something new or different, there’s always that one guy; the one at the back who is never really excited about anything. Yip, the “why bother” guy. Let’s be honest though more often than not he has a point. We really should have solid reasons for the things we do.
Why at all?
There is a richness that is added to a digital experience when the design has been informed by a developer’s (or a unicorn’s) view point. Things like:
- Maybe we should only load two font weights on our home page?
- Shouldn’t this also have a hover state?
- Umm, maybe the images should be less than 200k?
- How will the user know that it’s clickable?
If you need more convincing check out this interview with Una Kravets and Scott Hanselman. Informed design is better design.
Why now?
I’ve kind of reach the point at which my skill set has surpassed my imagination. The visual elements I can currently conceive don’t really stretch my front-end dev skills. Now is as good a time as any to jack up my design skill so I can grow my front-end dev skills.
Also, (maybe this is the real reason) Una Kravets started web dev around the same time I did, and she’s slaying. Digital Oceaning and what not. And I’m just splashing in the kiddie pool. Like a Magikarp.
Still not convinced?
No worries dude. I’ve got you. Here you go: So You Want to be a Functional Programmer (Part 1)
The tools
Here are some of the tools I’ll be using initially to get started. I’ve played around with them for the last month so I’m not a complete novice to them, but I’m far from proficient. As we ride along the Unicorn Express, I’ll post some guides, tips and hints to help you navigate this journey. Look out for the #unicornexpress on twitter or check out this twitter moment.
Mo.js for Animation
Micro-interactions really breathe life into a UI. So far I’ve only been able to do the basics in css. Specifically:
.drop-down
{
transition: all ease 0.25s;
}As an interaction designer you should be able to do better than that. And as a self respecting UI engineer you should not use CSS so haphazardly. I stumbled across mo.js then forgot about it then rediscovered it. Then forgot its name which meant I couldn’t search for my bookmark. Luckily, fate threw me a bone one last time.
As you can see mo.js is pretty awesome. I still have a lot to learn, and mo.js needs a ton more documentation. Hopefully, after this journey, I will have generated enough examples to make getting mo.js up and running super easy and understandable.
Figma for UI design
Figma is awesome. My standard answer to “What is Figma?” goes something like this: “It’s like Sketch meets Google Docs. You can collaborate in real time. Like real real-time.” I’m still pretty new to UI but I remember using photoshop 7 years ago. And it was slow. It was massive and my computer often just gave up. Figma has been a dream to work with.
FramerJS for Interaction Prototyping
FramerJS and Framer Studio are quite neat. I’ve been following their progress for a while now. When I first started at the Design Office, I didn’t really have much use for Framer. I mean it took me longer to build something in Framer than it did to develop it using vanilla HTML and CSS. Ah, the good old days.
Now, Framer Studio is more advanced and I’m proficient enough in Figma and Sketch to make use of the import feature. Check my mad Framer skills:
Unsplash, Muzli, Behance and Daily UI for inspiration
Unsplash curates stunning photos. Muzli and Behance both curate inspirational designs. And for the moment, Daily UI is what lets me really stretch my baby-small design muscles. The folks at Daily UI send a prompt that tasks you with a specific exercise.
HTML+CSS+ JS for the Humble Art of Web Development
At the end of the day this is where the real magic happens. Ideas are great but execution is everything.
Where to Next?
The world of design is massive. But we’ll start small. Coz you know, the whole “one bite at a time” thing.
Remember the for loop? It was trivial but super exciting. “Look! I printed out ‘I must not tell lies’ 100 times!”
for(int i = 0; i<100;i++)
{
System.out.println("I must not tell lies");
}We’ll start with the small but rewarding things. So next we’ll do, motion. “Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.”
I’m off to material motion — see you there.
Oh yeah and read this: Design for Developers and Where to Start.
“Only one who has nothing to lose, and everything to gain, would commit such a crime. The blood of a unicorn will keep you alive, even if you are an inch from death, but at a terrible price. You have slain something so pure and defenseless to save yourself, you will have but a half-life, a cursed life, from the moment the blood touches your lips.” — Firenze
You can follow my journey on Behance here or on twitter. Better yet join me. Capiche?
