iOS UI/UX Design Workflows

It’s been pretty much a given for a while that Sketch is the go to UI design tool of choice for our pretty, pretty apps — but we’ve never examined alternatives suited to the indie developer, or indeed the full workflow; so let’s look at some options for that today!

As a starting point, here’s the Nodes Design Stack 2018 for their selections from end to end of the design process:

Sketch – Complete design tool for static mockups

The keystone of app design tools, when we asked one of our designers what projects they used Sketch for, the response was: “Pretty much all of them…”

Abstract – Version control and seamless collaboration on design files

…then Abstract came along, offering the type of collaborative platform that developers had found in tools like Github. Now, Sketch files can be added to a project, and team members can jump on board, editing and saving their progress into a master file.

InVision – Prototyping focused on flows

Another indispensable entry. InVision picks up where Sketch leaves off, with an emphasis on functionality. Once they’ve got their static designs done in Sketch, our designers move over to InVision and start making a dummy prototype with some of the transitions and animations that go beyond just visuals to define UX…

Zeplin – Design handoff for development

Once your prototype is up and running, and everyone’s happy with the result, it’s time to hand over the reins to your developers. That’s when we use Zeplin…

Principle – State based prototyping tool for complex interaction

Once you’ve designed your interface, Principle is there to build on animated and interactive elements. It’s particularly adept at refining micro interactions, which play a big part in the overall experience of using an app…

All well and good, probably most large shops would nod along with that as being a solid stack, but that’s a pretty large investment for a little indie shop that’s you and a designer … at most … right? So, what kind of alternatives might you consider? Well, there is one in particular that we’ve noted with interest:

Adobe XD

Adobe XD is made for designers like you, by designers like us. It’s the fastest way to design, prototype, and share any user experience, from websites and mobile apps to voice interactions, and more. And it’s free.

Adobe XD reimagines the way designers create experiences with fast, intuitive tools that get you into your designs and get out of your way. Power up prototypes with voice. Automatically resize elements for different screens. Create amazing animations between artboards without timelines. It’s everything you need for what’s next in UX — and it’s only in XD.

Switch from Design to Prototype mode in a click, then drag wires between artboards to turn your wireframes into interactive prototypes. Make changes on the fly and see them on your phone. Share auto-saved cloud documents securely with your team from anywhere—you can even edit them offline.

Well, that seems to cover the entire stack — and at a price of FREE?! Mind you, that is for only one actively shared project at a time … but you probably are working on only one at a time, and it’s probably a good bet that a designer you work with has an Adobe CC subscription, so that wouldn’t apply to them. And between integrating other Adobe tools plus your entire design workflow in one tool … seems pretty unbeatable to us, really. But let’s see what real designers think, shall we?

Will Adobe XD kill Sketch and InVision?

Prototyping, design, and animation all happen in one space when using Adobe XD, meaning testing and iterating on design happens easier and much faster. The design process is effortless, interactions and animations all happen in context of each other allowing these disciplines to become part of the design process, rather than independently of each other. This is very powerful and enables design to happen at the speed of thought.

The ability to move from wireframe to hi-fidelity prototyping, to developer handoffs in one piece of software shows how much Adobe focuses on workflows. By making workflows simple and easy, they are addressing some of designers biggest pain points — something only Adobe is truly equipped to do via its software ecosystem…

Read the whole thing if you have time, but TL;DR the claim is that things go exactly as we would expect! So at the very least, next time we have a greenfield project, we’re going to actively look for a designer to work with us on an XD workflow.

There’s many other tools out there — check out 18 Of The Best Tools For Mobile App Designers for instance — but we’re going to stick with Adobe XD being the next one we’re going to deep dive into, hey the price is certainly right!

 

So much for tools; now, let’s turn to the philosophy of UX design to give you some inspiration when you sit down with them! Here’s some excellent articles we’ve noted:

How to design an Apple Design Award-winning app

For a mobile designer, winning an ADA trophy with its crisp aluminium body and touch-activated glowing Apple logo represents the pinnacle of design achievement. In Apple’s own words, the ADA’s recognise the “creative artistry and technical achievements of developers who reflect the best in design, innovation and technology on Apple platforms.”

So what does it take to end up on the receiving end of one of these coveted accolades? As the creative director and co-founder of a successful app development agency, I was more than a little bit curious to find out…

How To Design Emotional Interfaces For Boring Apps

When your product deals with repetitive tasks, it’s hard to keep users excited about it. That’s where UI comes into play. Let’s talk about elements that make an interface more emotional…

How to simplify your design

Companies are in constant pursuit of building simple and usable products. More features, new technologies, and advanced capabilities but still in a lightweight and simple to use format. More often than not, making it simple is the hardest thing there can be…

10 cheat codes for designing User Interfaces

Design can’t be simply explained by colors, shapes, and text. It is a process that has a “Why” behind it, that whenever we create a text bigger, add a shadow, or change the color, there has to be a reason of why things have to be…

And finally, let’s turn to resources that give you some immediate practical help with your mock up designs and layouts, from ready to use UI kits down to individual assets, shall we?

Apple Design Resources

60+ great UI kits for iOS engineers

Sometimes we have to release products when we don’t have a nice design in place. We need to ship fast but keep good UX inside our iOS apps… Using prepared UI kits is done exactly for those moments!

UX Design Patterns for Mobile Apps: Which and Why

Mobile Patterns – UI UX Inspirational Gallery for iOS and Android

Mobile Design Patterns – Pttrns

Mobbin – Latest Mobile Design Patterns

User flow design inspiration

All in One Bookmark Links for Designer

UPDATES:

30 Things We Often Forget When Designing Mobile Apps

Dark Mode — Working with Color Systems

Health iOS app redesign sprint in 8 hours

Alex | April 5, 2019
  • Tom May 6, 2019 at 2:27 am
    Indeed, Adobe XD might be the future of design tools. What caught our attention is the mention of Zeplin which we have reviewed ourselves some time ago. As you put it, Zeplin is great when it comes to collaboration with developers. Read our review here: https://www.polidea.com/blog/Review_Sympli_VS_Zeplin/

Leave a Reply