Under The Bridge Under The Bridge

Tag: UI
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?

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

 

Any more design resources to add, Dear Reader? Or any experiences with these tools — especially Adobe XD — to share? Let us know!

iPhone X Notch-alance

Remember those innocent days a few short months ago when we all spotted the new safeAreaLayoutGuide and thought

Our constraints are now with the top and bottom anchors of the safe area layout guide. This is not a big change…

Oh, sweet naiveté. Did anybody actually call out in advance that subtle little change was foreshadowing THE NOTCHALYPSE? Yes, yes, every time something changes it brings out the fear and loathing no matter what it is, but the level of OMG NEVER BUY APPLE AGAIN … we saw this time, that was unprecedented. Personally, we think a phone with a bat-eared screen is kinda neat, but we’re weird. 

There’s a certain level of enthusiasm out there for clipping and masking and otherwise working around the new roundedness and notchedness … but we think Marco has it right here:

This is the new shape of the iPhone. As long as the notch is clearly present and of approximately these proportions, it’s unique, simple, and recognizable.

It’s probably not going to significantly change for a long time, and Apple needs to make sure that the entire world recognizes it as well as we could recognize previous iPhones.

That’s why Apple has made no effort to hide the notch in software, and why app developers are being told to embrace it in our designs…

So, we’ve got some rewriting to do in the next few weeks to have our apps fit nicely into The Brave New Notched World, and you probably do too we imagine; let’s see what resources are out there!

First off, go over the relevant stuff over at the mothership:

Building Apps for iPhone X

Designing for iPhone X

Updating Your App for iOS 11

Human Interface Guidelines — iPhone X 

Positioning Content Relative to the Safe Area

The great PaintCode people have updated their invaluable 

The Ultimate Guide To iPhone Resolutions

and also have specs for all the Notch attributes at

iPhone X Screen Demystified

More good reads on upgrading UI for the X at

Design for iPhone X

Supporting iPhone X

iPhone X: Designing for the Notch

iPhone X: Dealing with Home Indicator

UI Design for iPhone X: Bottom Elements

How iOS Apps Adapt to the iPhone X Screen Size — and the Adaptivity app showcased here looks like a good purchase!

Adaptivity is an app for developers and designers to visualize how iOS’s Size Classes and margins for layout and readable content look on real devices and how they change with respect to orientation, iPad Slide Over/Split View and Dynamic Type size changes…

Templates to help you out at

Apply Pixel’s iPhone X and iOS 11 UI Kit

iOS Design Kit’s Free iOS 11 GUI for Sketch

If you’re concerned with how your web sites will deal with the Notch, check out

Designing Websites for iPhone X 

Understanding the WebView Viewport in iOS 11

And let’s finish off with the niftiest idea we’ve seen for adapting in a non-approved way with the Notch:

ScrollSnake: “What if scroll bars on the iPhone X worked like the game “Snake”?”

UPDATES:

UI Design for iPhone X: Top Elements and the Notch

Designing for iPhone X: Guidelines to designing for iOS 11

Challenges of Supporting iPhone X

Fix for the missing network activity indicator on iPhone X

Finding the Real iPhone X Corner Radius

iOS Design Central

Here’s a new place to bookmark for your designer friends, or yourself should you fancy yourself a designer: Apple’s pulled together all their various design resources onto a new page

Desiging Great Apps

Exceptional user experience is a hallmark of Apple products, and a distinguishing feature of the most successful apps built for iOS and OS X. Use the resources below to learn how to build the polished, engaging, and intuitive apps that Apple customers expect…

Indeed. Don’t think there’s actually anything new there at the moment, seems to be WWDC videos and previously released documents pulled together in one place, but no doubt a good place to keep an eye on in future.

It’s also been quite a while since our last design roundup post back when iOS 7 was a polarizing novelty, so let’s see what else is new we haven’t tacked on to its updates since:

Pixel Perfect Precision Handbook 3 is out now (h/t iOS Dev Weekly), that should be on every designer’s must-read list.

This is a pretty nifty iOS 7 UI Kit Photoshop Action Set:

You’ve probably seen many iOS 7 UI Kits. But this one is slightly different, as there is no psd file involved. All you need (apart from love) is this little 1.4 MB .atn file that creates entire default look iPhone mockups for your wireframes, design mockups (use it with care) or just quick ideas…

iOS Dev Tools is an ever more comprehensively curated set of links in all categories of development interest we don’t think we’ve got around to linking to before, for design-related stuff check out these sections:

Check out all the non-design categories while you’re at it, and follow @iOSDevTools for updates!

And while you’re thinking about designing your apps and their icons and all, 

The Psychology Of Colors in Logo Design

No, we aren’t just talking about the literal words that might be included, such as in a wordmark logo. We’re talking about other ways of sending messages — specifically, the psychology of colors and how it influences how your logo is viewed and received…

Especially check out the differences between cultures before picking a final color scheme!

UI Design for Artists

[EDIT: Discontinued.]

You getting a bit tired of explaining over and over to artists the specifications for what iPhone applications need for artwork and pointing them at helper files and goodies? Yeah, us too. But these great people actually went to the trouble of collecting info to get past all the common artist questions in one place:

iPhone Guidelines And Resources For Artists

Covers device specs, icon specs for app and tab bar, fonts, and layout helpers, with links to various helpful resources overlapping a good bit with the ones we’d previous mentioned in the links above. Excellent to have it all in one place to send a link to for people who’d rather ask you than use Google!

UI Design Patterns

If you’ve got anything to do with designing iPhone interfaces — on paper or not — do not miss this post over at the new to us but worthwhile looking Flyosity blog about the advantages and disadvantages of different types of conventional iPhone application view organization

These three main interaction concepts correspond to three different types of View Controllers: Navigation Controllers, Tab Bar Controllers, Modal View Controllers and Table View Controllers respectfully. These are the building blocks for crafting iPhone applications.

and designing custom interfaces as well, with several paradigms of each type. Nothing overly surprising, but a nicely crafted overview, and the custom examples chosen are particularly interesting.

h/t: Daring Fireball!

Vector UI design

Now this has some excellent potential for improving our work with designers: the charming people over at Mercury Intermedia have released a set of iPhone UI vector elements for your Illustrator-using pleasure!

Rather than cry over the lack of good vector elements, we took it upon ourselves to recreate a large portion of the iPhone’s UI elements so we would have them available for future projects. Obviously, we aren’t telling you all of this just to wave it in your face and tell you we have fancy tools that you don’t. Because we care so much about our fellow iPhone developers, we are making our vector files available to you today. (I think I just made myself throw up a little.)

And people say we have attitude. Ha! This Rusty fellow seems like he’d be excellent company indeed for a drink or twenty. But yes, the file is well worth the download. Also note references to

Ultimate iPhone Stencil (OmniGraffle)

Now, if someone would write an importer to transmogrify designer-created Illustrator files directly into .xib files, then we’d really have something going…

h/t: WebResourcesDepot!

iPhone GUI PSD

[UPDATE: Long obsolete.]
Here’s something useful for your iPhone presentation mockup needs: a layered Photoshop file with a comprehensive set of assets:

Over the past few months we’ve had to create a few iPhone mock ups for presentations. The problem we’ve encountered is the lack of resources to help us design something efficiently. Up until now we’ve used a nice PSD from 320480.com but we still found ourselves having to build out additional assets or heavily modifying bitmap based buttons and widgets.

h/t: Leif!