12in12: Fantasy UI
October’s monthly madness took the tried and true ‘random app design’ side project off the beaten path and into the realm of fantasy (and I don’t just mean dribbble).
The Project: Fantasy UI
Going mad with literally fantasy UI design.
The Checklist:
- Built up a stable of fantasy UI prompts
- Have stupid fun with a silly idea
- Reignite the old dribbble account
Undone:
- Instagram still languishes. I tried to buffer but it wasn’t working for some reason. I need to sit down and have a proper plan for what direction this goes. But that’s another side project…
I sketched far more designs than I ended up making and even then didn’t get to as many of the prompts as I would have liked but at the end of the day I still consider it a successful side project. Why? Because it was pure fun and reignited my passion for the whole initiative again. Who said you can’t develop your skills while making the silliest, most impractical designs?
Highlights of the Month:
Side Project:
- Thinking up ridiculous prompts in spare moments at work or on the bus or just about anywhere. I already want to start another project to collect these somehow and build a generator for an alternative daily UI type starter.
- Getting back to paper. In my last few projects I’ve been fixing up code or following a software tutorial so it was great to break out the old notebook again and start from scratch. Messy wireframes FTW!
- Putting aside preconceived notions.
At Work:
- 1.6 release at Puppetize Live conference launching new features (plus some of the new designs I’ve been working on). Oh and gelato, waffles, and KFC for two days of streaming and conference. What’s not to like?
- Students poured in for the office open night and provided an excellent opportunity to not only catch up with others from my course but also dust off those print design chops for some posters to illustrate the type of work placement students can get up to here.
- Diving head first into core product workflows and finally beginning to tackle the bigger beasts lurking on the roadmap that will bring a significant UX improvement.
Lessons Learnt
Structure First
Learning at work: “Don’t use the design to structure the application. Structure the application then design for that.”
Applying on the side project: It’s tempting with this kind of work to just focus on coming up with the wildest design and visuals. For these Fantasy UI I consciously focused on creating a list of ‘needs/wants’ for the fantasy folk (whether that be a dwarven miner or a hoarding dragon) and structuring the app around that before diving into visuals. Not only was this fun (and surprisingly thought-provoking), it resulted in more interesting final pieces (sometimes wildly divergent from original concepts) than if I started with the implementation and visuals.
Head in the Clouds, Feet on the Ground
Learning on the side project: Cut loose and brainstorm. You can always come back to earth later and sometimes the seemingly wildest ideas can inform the most practical implementation. But you’ll never reach above the status quo if you only focus on what’s perfectly possible and matching the existing design.
Applying at work: Working on a ‘serious’ product with very real technical constraints and where eye candy is much less value to the user than what the software can do, sometimes I worry too much about reigning in my wild side and making something that fits. Turns out worrying about what ‘fits’ can be as constraining as what’s feasible/technical. Reigning in the final result doesn’t mean reigning in your process. Still go for that 20 ideas in 30 minutes. Why not? Turns out the same process still helps, whether it’s a ghost chat app or planning how people can take action on their infrastructure.
What happens next?
Learning at work: Working on blank states (a surprisingly bigger task than they seem) brought up interesting issues around the seemingly simple: what happens when you click? It’s easy to design a link or say this let’s you do X but what actually happens? How does that action work in practice? It’s that bit where interaction design stands out from graphic design but can be easy to overlook if you become too absorbed in only the current state.
Applying on the side project: What bothers me sometimes is when making a few app screens it’s so easy to gloss over how it actually works. What happens if I tap that button? Is it even necessary in the first place or just there to make the grid line up nicely? We all do it sometimes but it was amazing practice this project to keep asking ‘what’s that? what happens if I do X?’ and how that ended up changing and informing the design of what was generally a single screen when you stop approaching it as a single screen in isolation. It’s not a poster, it’s part of an ecosystem.
Don’t be afraid to look silly
Learning on the side project: I thought Fantasy UI was a tad ridiculous and wasn’t sure what the response would be. Would I look like a crazy person? Maybe I should just stick to the same old UI design prompts everyone else does. But I decided to say screw it and have fun. The worst that can happen is you look a bit silly and that’s hardly the end of the world.
Applying at work: Just because something is not being done don’t assume it can’t be done or you’re stupid for questioning it. Ask. Being new to the product (and company as a whole) I sometimes feel I need to follow what exists but the most interesting design work so far has come from asking ‘what if…?’ And the response being surprisingly positive. It never hurts to ask: at worst there’s a reason it’s not done, at best a new door is opened for improvement. Either way you (and the users) are better off than if you’d kept your mouth shut for fear of sounding foolish.
Next Time
Cooking up on the side is a childhood dream: where my current work in design meets my love of museums and all things science & history. For the last few Saturdays I’ve been dabbling in it but coming up in November I’ll be able to dedicate some proper project time to it. Stay tuned…
To find out more about The Side Project Project, see how it all began here.
