Here’s another Q&A post. Today I’m answering a question from my friend Benedikt Deicke. He’s a super-awesome software engineer and founder of Stage — a CMS for music bands (have you heard of Nightwish? Their website is running on Benedikt’s CMS, too).
“When it comes to design, my biggest problem is that I’ve got ideas in my mind which I usually can’t get out of it. It takes me a lot of time to design something that I actually like in the end. So in the end I usually throw everything away. Is there a way to better convert ideas into the actual UI?”
—
Hello Benedikt! It’s a tough process and you’re not the only one struggling with it. Let’s clarify: by “ideas” we probably mean a certain founder’s vision, while the actual audience and their pain has already been defined.
In my old days as an agency creative director, our CEO would always praise me for creative ideas. From my standpoint, I never created anything new. I just interpreted his general pitch (“Let’s build a super-awesome educational platform and make students excited!”) and broke it down into executable chunks that I knew our staff could implement.
Working backwards, it boils down to knowing what you’re capable of, and trying to think in these terms.
Where do you get this knowledge when it comes to UI, especially if you’re not a UI/UX consultant? Most often, it grows naturally from your personal experience with other software products you use daily. You observe and memorize common UI patterns: how lists, calendars, graphs look and function.
You can add to that empirical knowledge and hyper-stimulate this area of your brain: go to sites like Behance and Dribbble and look at cool app designs. Get an eyeful of those. Something will stick. You’ll also get better grasp of modern visual aesthetics, which is also great to have.
This is how we accumulate this pool of UI patterns.
Then we write down key user stories (top things they’ll be doing with your app) and lay out suitable patterns to create the best experience for them. Preferably, the simpler the better: preferably one key function per screen.
Your tool of the choice here is any prototyping software: I personally love Balsamiq Mockups, but there’s also OmniGraffle, Axure, UXPin, and many other great apps. Or just a pen and a piece of paper!
As a developer, you’ll have a natural urge to skip wireframes and jump right into code (I used to be the same way as a designer, doing high-fidelity mockups right away). But wireframes create that 10,000 ft view to objectively revise your functionality.
So, summing up this post, here’s what you do to convert ideas into the actual UI:
Hope this helps, and good luck!
Submit your question using this form (it should only take a couple minutes). And make sure you are on my email list to read the answer!
Join 8,000 awesome people on my mailing list — SaaS founders, product managers, designers & developers who are business-driven and want to build better software.
