UI design: a dream tool
Like a lot of UI designers, I moved on from Photoshop to Illustrator, and from Illustrator to Sketch. But when I look back, I feel like something is missing.
I remember when Flash and Dreamweaver were the tools of choice for web projects. I used them every day for a very long time.
And I remember when Steve Jobs killed Flash and why.
I also remember that, back then, we were promised that the new tools would do the exact same things in HTML5, and rid us of the clumsy, energy-hungry, prone-to-virus Flash ecosystem.
But where are those dream tools?
Don’t get me wrong, I think we’re heading in the right direction (have a look at Sketch 47!) but I don’t feel like we’re there yet, and apparently I’m not the only one.
So here’s my wish list for the perfect UI design tool, which I’ll explain more precisely below:
- push for a systematic approach
- include best practices and accessibility rules
- work in 4 dimensions (2D/3D + time)
- integrate real data
- offer dynamic text placeholders
- switch views between GUI and code (à la Dreamweaver)
- be able to prototype and test fast (à la Flash), internally and externally
- export assets for different development frameworks
- stay on top of new technologies (i.e. AR/VR, dynamic fonts, CSS grids, etc.)
A systematic approach
No experienced designer should create anything without thinking about the whole design system. We’re not designing in a silo, but rather displaying components that are reusable and scalable, with the same atoms of design reassembled. Our tool should imply exactly that.
Even when you’re starting from scratch or after a design exploration phase, you will start to make design decisions that should be consistent across your project (colors, sizes, curves, etc.).
Having a place to store (and refine) those decisions is crucial.
Best practices and accessibility rules
We designers are not reinventing the wheel each time. We’re following rules, conventions and best practices. But we’re also human and sometimes we forget. And sometimes we’re bending a rule for a very good reason (French people like me are champions of bending rules, trust me!). Hence, a perfect UI design tool should know those rules and warn you if you’re breaking one, or even better, invite you to follow them.
There’s no reason for you to design a block of text that is larger than 80 characters; your tool should know that and assist you.
Work in 4 dimensions (or at least have animation capabilities)
For how long has a UI stopped being a static image? Was it ever? Not being able to design animations in your favorite design tool is nonsense. Motion designers are using After Effects. You guessed it right: the post-production tool.
So yes, a thousand times yes, depth and time should be part of your design tool.
Use of real data
Being a front-end developer, I can immediately tell when a designer is not: when a mockup has a perfect vertical alignment between an image and a text placeholder. Because you don’t design the same way for a 2-word title than for an 8-word one, you need to know the content of your project as soon as possible. And if the real data is not attainable, have some dummy data that is as close as possible to reality.
Content is driving design and it should not be the other way around.
Dynamic text placeholders
Since we’re using real data (see previous point) and its nature is inconsistent, text placeholders should be fluid with constraints, like a maximum width for example. And they should be able to push the rest of the elements around them, because very rarely would you want your text to go over the illustration next to it.
This behavior is so ingrained in UI development that it should be reflected in a UI design tool.
Switch views between GUI and code
Maybe it’s the front-end developer in me, but being able to go between a GUI and code would be much appreciated. Some tasks are easier done in code, some are not.
That was one of my favorite features in Dreamweaver and at the very least, it was a great opportunity to learn how to code.
Prototype and test
Because we’re designing an interface, it’s better to judge it in context. Fortunately (I hope) we’re past the days of printing designs for a critique session. Even for yourself, as you design, it’s good to be able to try it out. I remember when giving something a try was a [Command]+[Enter] away in Flash. I’d like that feature back. The next step is to share it with teammates, stakeholders and finally some users/testers.
Getting precise feedback as fast as you can is critical for success.
Export assets for different frameworks
You’re done and it looks beautiful on your screen: the design system is consistent, the animations are timely, thought out, and the user flow is perfect. Now it’s time for the handoff and for the development team to kick in. What are you going to give them? Still images? Redlines? Does it make sense for them to start from scratch again?
We need to find a better workflow, more linear and not as siloed as it is right now. If you’ve ever tried to work in Unity, you know you can export your project (which is an entire game most of the time) for very different platforms. And I don’t think that a UI design tool should dictate which framework your company uses to develop its projects.
Stay on top of new technologies (AR/VR, dynamic fonts, CSS Grids, etc.)
Every day, new possibilities for design are emerging. New devices, new technologies are pushing the limits. But it’s our mission as designers to know what to do and how to integrate those new possibilities into our designs, and that’s only possible if our tools are integrating them as well.
Try designing a VR project in Sketch if you don’t believe me.
Bonus points and extra thoughts
So that was my list of essentials for the perfect UI design tool, but here are some extra features and thoughts about the existing ones:
First, in my opinion, online tools always feel clumsy, unreliable and worse, have privacy and security issues for big companies (sorry InVision, UXPin, Atomic et al.).
Secondly, I think most of the solutions out there are trying to do too many things and it seems like they’re subscribing to the idea that constraints are limiting designers’ creativity. I understand the business concept of pleasing more customers but I much prefer to use the right tool for the right function than relying on a swiss army knife to do everything. I still love Photoshop to work on… photos. I still love to use Illustrator for… illustrations. And I’m using Sketch right now on most of my design projects with plugins that are answering (more or less) my needs that are missing in the core application.
Lastly, I’d like to think about this dream tool as an assistant, as more and more applications around you are meant to become. And I think there’s a great opportunity here for Machine Learning to kick in: wouldn’t it be helpful if your assistant could browse thousand of websites and apps to give you trends and new inspirations?
What if you could give it a few key aspects (classy, casual, B2B etc.) so that it would give you a different template every time according to what’s hot right now? It’s up to you to change it all but it would be just a starting point rather than a blank slate or a stiff template.
If you liked what you’ve read, please consider sharing or promoting this post. And if you have comments or even better, a solution for me, I’d be happy to start a conversation with you!
Originally published at www.ventrebleu.com on October 11, 2017.
