Our beloved UI tools - Make Helsinki

Our beloved UI tools

by: Joonas Kilappa
  •   Palvelumuotoilu •  15.6.2018   •  6 minuutin lukuaika

UI without the UX? How dare you?

When talking about user interface design it’s natural that the discussion also goes to user experience design. And it’s understandable. You can’t have the one without the other if you wan’t to build a good product or a service. But I’d like to separate those two for just a while. I know I shouldn’t but I’m going to. And please, hold the scoffs to a minimum.
UI is a part of the whole process of creating a digital service. Making sure that the UX is solid, the wireframe is logical and the UI is intuitive are but a few of the hurdles that we have to clear before releasing it to the digital wilds. Personally it’s my favourite part. Making something that looks attractive to the user and have them thinking “this doesn’t look like crap”.
 
From the old to the new
 
The industry has come a long way from the days of creating web and app layouts with photoshop, illustrator or even – god forbid – InDesign. Now we have a multitude of dedicated UI design programs that each have their own pros and cons.
Here at Make Helsinki we have the possibility to test different programs on different projects because of the size of our design team. It’s small and adaptable and we can make changes very easily without breaking our own processes or risking the projects. Even one project, be it big or small, is enough to get a good initial feel for a UI design program and if it’s something that we’d want to use in a longer run.
 
The tools of the trade
 
At the moment our team is using a couple of different programs when creating UI. They are Photoshop… wait! Come back, I’ll explain. So yeah, we still use Photoshop and Illustrator. BUT! We use them in conjunction with the dedicated UI programs. See? They do serve a purpose still. At the moment we use Sketch, Adobe XD, Flinto and ProtoPie. Photoshop and Illustrator are mainly used when creating icons. graphics or pixel images for the UI.
I’ve been mainly using Sketch for the last two years. The team behind the tool is very active and it get’s updated fairly often. They even added a new feature of making prototypes with it.
 
 
What I personally love about Sketch is that it has all these nifty tools for making pixel perfect UI that is easily modifiable, organised and can be exported for the developers in a smart way. No more creating 1x 2x and 3x artboards and exporting a crap ton of assets and then doing it all over again when there’s a small change to the UI.
There’s still some oddities when importing vector designs from Illustrator though. It seems that Sketch likes to create the art file into a folder and put each vector path on their own layers. There’s also an extra layer that is created and the layer order seems pretty random at times as well. I usually end up cleaning up vector files in Sketch just to make sure that everything is as I want them to be. Even though Sketch has it’s own tools for creating vector graphics I find that I’m more comfortable with using Illustrator for those.
 
Prototyping
 
The tools for prototyping your apps and projects have taken great leaps in the last 1,5 years. There’s so many different programs that one can use to prototype your layouts and add functional and beautiful animation and flow without a snippet of code.
Around the same time that I started to use Sketch I gave Adobe XD a trial run as well. It was still in it’s early phases and at that time the prototyping and the limitation of it’s tools left me needing more. So I moved on with Sketch and used Flinto for my prototyping needs. Flinto is very handy with it’s options of doing animations, transitions and UI flow. But if you’re not being careful the photo can get out of hand as you just keep adding screens and animations with reckless abandon.
Now Sketch has added prototyping to their tools as well and the short demo that I tried seemed that it’s still got a long way to go if they want to compete with programs that are specialised in prototyping. But it’s a great start for making those quick and simple protos.
What I’m interested in trying next is ProtoPie. The price range it about the same as with Flinto and I’ve heard some good things about it so I’m eager on giving it a go.
Other opinions
 
I also asked about our other designers’ thoughts and feelings on the matter and the programs they’ve been using lately:
Marjo’s thoughts about Adobe XD:
 
“Well when your comparing it to Photoshop I love everything about it! It’s so much more streamlined and fast. I also love the ease of creating prototypes on the fly. I think the major point of Adobe XD was that it got me to stop hating UI/UX-design. What it still lacks in my opinion is that the options for different types of animations in prototypes is still limited. For example locking a certain element in place while scrolling the rest of content.”
Joonas’s thoughts on Adobe XD: 
 
“After XD and Sketch came out they’ve been playing in their very own league of UX/UI-design and prototyping when comparing to Photoshop for example. The features that set them apart from old design programs are good templates for UX/UI-design, material libraries, optimised tools like guides and grids, handling of typography and elements, prototyping possibilities and planning of user flow. It also helps that handing over the assets for development properly with programs like Zeplin is easy now.
What I’m still hoping for is more powerful tools to handle typography: outlines and vertical aligment to mention a few. I also wouldn’t mind that the vector tools would be more robust like in Illustrator.“
Joonas’s thoughts on ProtoPie:
 
“It’s very versatile and has many features, and it has the ability to demo even very small details of applications functions. But it’s really hard to give a thorough answer yet as I feel I still need to spend more time with it to form a cohesive opinion. “
What are your thoughts about UI design programs, pros and cons? I’d love to hear your opinion.

Leave a Reply

Your email address will not be published. Required fields are marked *