Under The Bridge Under The Bridge

Tag: tools
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

Nine Releases Make An Xcode

All these new APIs are very well and all, but now let’s get to the really exciting stuff from WWDC:

What’s New in Xcode 9

  • All new editor. Fast, structure-based editor that lets you intelligently highlight and navigate your code. Includes great Markdown support.
  • Refactoring. Refactoring built right into the editing experience and works across Swift, Objective-C, Interface Builder, and many other file types.
  • Super-fast search. The Find navigator returns results instantly.
  • Debugging. Wirelessly debug iOS and tvOS devices over the network, new debuggers for Metal, and more features throughout Xcode.
  • Source Control. All new source control navigator and integrated support for GitHub accounts for quickly browsing repositories and pushing your repositories to the cloud.
  • Xcode Server built-in. Continuous integration bots can be run on any Mac with Xcode 9, no need to install macOS Server.
  • New Playground templates. Includes iOS templates designed to run well in both Xcode and Swift Playgrounds in iPad.
  • New Build System. An opt-in preview of Xcode’s new build system provides improved reliability and performance.

That is … a remarkable array of improvements. And those are just the highlights! Seriously, go Read The Whole Thing™. Most are runtime and debugging improvements, we’ll just pick out to highlight further here the changes in asset catalogs, since there’s some new resource stuff here you’ll want to be aware of to be iOS 11 savvy:

Asset Catalogs

  • Named colors support.
  • Added wide gamut app icons.
  • Added a larger iOS marketing to the App Icon set.
  • Added option to preserve image vector data for matching Dynamic Type scaling.
  • Added support for HEIF images.

The biggest one there is, as explained here,

Preserve Vector Data

There’s a new checkbox in the Asset Catalog Attributes Inspector called “Preserve Vector Data.” Checking this box will ensure that Xcode includes a copy of the PDF vector data in the compiled binary. At runtime, iOS can automatically upscale or downscale the vector data to output an image in your app whether you’re using the image in code or in a Storyboard scene. Remember: When using PDF vector data, set the “Scales” value to “Single Scale” in the Attribute Inspector to ensure the proper loading the PDF vector data to populate image.

This change also works in conjunction with the new Tab Bar icon HUD that Apple implemented as an accessibility feature in iOS 11. If you enable “Preserve Vector Data” this feature comes to your apps with no additional work. By enabling this feature, iOS 11 can also automatically scale images regardless of whether you’re increasing a UIImageView’s bounds, or using Size Classes to change an UIImageView size…

Screenshot samples at The Unexpected Joy of Vector Images in iOS 11.

And apparently Apple is bowing to popular pressure and making Xcode all but dependent on Github, see Xcode GitHub Integration and The Marriage of Github and Xcode 9. We’d mutter something curmudgeonly about why don’t you go full fanboi and replace the documentation with hotlinks to Stack Overflow too, but we’re worried they might take that idea seriously…

Community support we do find quite appealing though, is how enthusiastically the new stuff is being open sourced:

Apple open sources key file-level transformation Xcode components

This afternoon at WWDC we announced a new refactoring feature in Xcode 9 that supports Swift, C, Objective-C, and C++. We also announced we will be open sourcing the key parts of the engine that support file-level transformations, as well as the compiler pieces for the new index-while-building feature in Xcode…

And if that bit about “new build system” struck terror into your massively scripted heart, fear not, it appears to be pretty much a behind the scenes change all around:

New Xcode Build System and BuildSettingExtractor

The new system is written in Swift and promises to be a significant advance in a number of areas including performance and dependency management. The new system is built on top of the open source llbuild project and lays the foundation for integrating the Xcode build system with the Swift Package Manager

It appears that everything about defining build settings remains unchanged. Moving between the old and new build systems did not cause any build setting changes or recommended changes. The mechanisms for generating that giant bucket of key-value pairs known as build settings seem to be just the same as before.

This is great news. As developers, we don’t need to learn a new complex system for defining build settings. We get to enjoy the benefits of a new, faster, modern build system with our existing build settings left intact…

(And if you haven’t moved to .xcconfig files yet, or if you do them by hand, seriously do go check out BuildSettingExtractor. So handy, we even contributed to it — and that’s as high praise as it gets, around these parts!)

That’s enough for a TL;DR to get you salivating for the new stuff — but if you missed our link to New stuff from WWDC 2017 last time, go check it out now; more details on Xcode changes there … and everything else as well. Veritably encyclopedic, that reference!

OK, one last note that isn’t Xcode 9 specific but you’ll want to refer to it anyways: iOS Simulator Power Ups. Something for everyone there!

UPDATES:

Hands-on XCUITest Features with Xcode 9

Customizing the file header comment and other text macros in Xcode 9

iOS Simulator on steroids: Tips & Tricks

Little Xcode Beta Surprises 🎁: Core Graphics Codable Conformance

Measuring Swift compile times in Xcode 9gist example — Two Useful Environment Vars

Awesome native Xcode extensions

Secret variables in Xcode AND your CI for fun and profit ?

Xcode 9 Vector Images

Managing different environments in your Swift project with ease

Conditionally embed your dynamic frameworks

Everything You Need to Know About Ruby for iOS Development

Optimizing-Swift-Build-Times: “Collection of advice on optimizing compile times of Swift projects.”

Swift compilation time debugging options and their outputs

Let’s Optimize the Work with Terminal for Xcode Developers

Easy XIB and Storyboard Localization

Some useful URL schemes in Xcode 9

IBLinter: “A linter tool for Interface Builder”

AutoLayoutLint: “Provides automated test to detect runtime conflicts of constraints.”

More Interface Builder Tips And Tricks

XcodeGen: “Command line tool that generates your Xcode project from a spec file and your folder structure”

Edit Breakpoints in Xcode

XcodeWay: “An Xcode Source Editor Extension that helps navigating to many places easier.”

Highlight Warnings in Xcode

Care and Feeding of Xcode Configurations

How to find and fix slow drawing using Instruments

How to find and fix memory leaks using Instruments

How to find and fix slow code using Instruments

Xcode Releases

Wrestling with a Monstrous Xcode Project

Compiler Optimizations, Compiling Optimally, and Whole Modules

Periphery “analyzes projects written in the Swift programming language to identify unused code.”

Tip: add “time” to your build scripts

Xcode Project Linter (xcprojectlint): “A security blanket for Xcode project files”

Getting (nearly) rid of Xcodeproject – A (not so) short Introduction to Xcodegen

Periphery: Eliminate Unused Swift Code

Running Xcode and Simulator in fullscreen

Feeling Testy

Here’s an interesting talk on approaches to testing your apps:

An Artsy Testing Tour

Artsy has four iOS applications; all of them are open source, and all of them take different approaches to testing. Why? Because different testing techniques work better or worse in different circumstances…

Like the bit here on Core Data dependency injection,

You might give an object a Core Data managed object context instead of having it access a singleton. We use dependency injection for stubbed managed object context as well as for the network synchronization code. Energy uses in-memory Core Data managed object context that can be quickly and cheaply created, then destroyed for our unit tests. Part of what we can test is how an object modifies the Core Data stores, so we can create a managed object context, inject it into the object that we’re testing, and then the object does something, and then we can inspect the managed object context to see that the changes that had been performed on it are what we expect…

And you can check out all the discussed implementations yourself from this list:

Every element extremely enlightening!

Another one that came out this week is

Running UI Tests on iOS With Ludicrous Speed [EDIT: Translated to ConditionTester.swift]

They’re using a custom KIF fork, mind you, not the Xcode 7 UI Testing hotness. Well, we like it, anyway.

While we’re talking about dependencies and all, there’s been a lot of developments on that front since our last roundup when Swift and XCTest were both brand new. Wow, seems a long time already, doesn’t it? Here’s some articles and code worth checking out:

Swift: The Only Modern Language without Mocking Frameworks

Better Unit Testing with Swift

Four Types of Dependency Injection in Swift

iOS Unit Testing: Dependency Injection with Structs in Swift

Real World Mocking in Swift

Mocks in Swift via Protocols

Cuckoo “was created due to lack of a proper Swift mocking framework. We built the DSL to be very similar to Mockito, so anyone using it in Java/Android can immediately pick it up and use it.”

iOS Functional Testing With User Stories, Ui Test and Local Server

Testing with Swift – Approaches & Useful Libraries

Continuous iOS Code Coverage With Jenkins and Slather

UPDATES:

Mocking Dependencies with Generics “TL;DR: You can inject code dependencies in a transparent way by using generics and typealias.”

Creating a Custom XCTest Assertion Testing Dictionaries with Swift and XCTest Depedency Injection in Swift

Cleanse: “Lightweight Swift Dependency Injection Framework.”

Swifjection: “Dependency Injection library for Swift”

Kakapo: “Dynamically Mock server behaviors and responses in Swift.” + #254: Dynamically Mocking Network Requests with Kakapo

Making burritos with Swift (or How To Mock Classes You Don’t Control)

Mocks in Swift via Protocols

Running tests with Clang Address Sanitizer; Undocumented Xcode Sanitizer Settings

How to Do XCTestCase tearDown Wrong …and Right

Testing the User Interface with FBSnapshotTestCase

How to Make More Useful Swift Mock Objects

Bluepill – Open Source Tool For iOS Testing In Multiple Simulators With Added Reliability Features

Testing in Swift: Protocols & View Models

Testing and mocking without OCMock

Let Your Swift XCTest Methods Throw

XCTest and Optional Unwrapping

Xcode 8.3 new APIs: Waiting in XCTest

Controlling Siri and Asynchronous Testing With XCTest Deep Dive Into iOS Automation At Grab – Integration Testing Making Mock Objects More Useful

Mimus: “Swift Mocking Library”

Using protocol compositon for dependency injection

Introducing Protocol-Oriented BDD in Swift for iOS Apps: Part 1

Time traveling in Swift unit tests

Resetting iOS Simulator for UI tests

Why you should co-locate your Xcode tests

Keeping XCTest in sync on Linux

How to test a Swift package on Linux using DockerTesting Swift on Linux

XCTest closure based expectations

Tests that don’t crash

Avoiding force unwrapping in Swift unit tests

Using unit tests to identify & avoid memory leaks in Swift

Delay/Wait in a test case of Xcode UI testing

Network Stubbing Options for XCTest and XCUITest in Swift

Xcode unit tests with ⌘+S

Mocking in Swift

Unit testing asynchronous Swift code

Xcode’s Secret Performance Tests

Xcode UI Tests with Embassy and Succulent

The complete guide to Network Unit Testing in SwiftWormholy – iOS network debugging, like a wizard 

Behavior-Driven Testing Tutorial for iOS with Quick & Nimble

Stubbing XCUITests With Vapor Server Side Swift Framework

Throwing tests and LocalizedError

UI testing in a snap — iOSSnapshotTestCaseWhy I write Snapshot tests?

Watch out for protocol extensions in your Swift API (unit tests trap)

Customizing the source location of failures reported by XCTest

Visualizing Pointer Addresses as Emoji

Launch arguments in Swift

Xcode 9 UI Testing improvements

Unit Testing UIViewControllers

The iOS Testing Manifesto

Readable and maintainable UITests

Avoiding force unwrapping in Swift unit tests > Making Swift tests easier to debug

What’s in your Larder: iOS testing frameworks

Unit testing asynchronous Swift codeAsync/await in Swift unit tests

Bagel: “a little native network debugging tool for iOS”

Debugging iOS network traffic

iOS Dev Tools List

Here’s a handy site to add to your feeds collection:

iOS Dev Tools

iOS Dev Tools is a list showcasing the greatest iOS development tools, including websites, desktop and mobile apps, and back-end services. I’ve tried to group the tools into logical categories and will mark any newly added tools as NEW.

Think most everything there of great interest we’ve bothered mentioning at some point over the years — with the notable exception of the ‘Networking and APIs’ section, have to check those out sometime —but it certainly is nice to have them all nicely curated in one place!

While we’re on the subject, here’s a recentish list along the same lines:

75 Essential Tools for iOS Developers

and here’s another:

My Ultimate Developer and Power Users Tool List for OS X (2013 Edition)

The only real comment we have here is, where the @)(#$&!! are the translation/localization helpers? Yes, we’re thinking in particular of that poor sad orphan which has been THE. MOST. AWESOME. EVAR. at making our multilingual duties much less effort and far more correct, but none at all? Really?

Any-ways, check those out in case there is something you missed.

And here’s a last one to throw in here, as hey managing a website is a fairly common aspect of iOS development too, right?

Inside BraveNewCode.com: Some Tools We Use

I was going through our own administration panel here at BraveNewCode today and thought it would be interesting to share our set-up with other people. Our WordPress website isn’t just a blog, it’s also a full-featured eCommerce store, support centre and product licensing/upgrade server. To turn a normal WordPress website into one that can handle all of that takes quite a few tweaks, external services, and WordPress plugins.

Here is a list of all the tools we use here at BraveNewCode.com – from hosting, to sales, to support…

By the way, in case you didn’t know, the best way to get your WordPress site mobile painlessly is BraveNewCode’s

Screen Shot 2013-11-17 at 9.01.05 PM.png

Buy and enjoy!

UPDATES:

The nice people at Binpress would like me to remind you all to check out their commercial open source offerings when you’re putting together your toolkit. And hey, if CocoaPods and CocoaControls don’t turn up anything absolutely perfect for your needs, that looks like the next possibly worthwhile stop, sure.

100 Great Resources For IOS Developers

Krzysztof Zabłocki’s iOS Developer Tools

13 Valuable Tools for iOS Development

Tools for Running an iOS Consulting Studio

10 Free Business StartUp Tools You Shouldn’t Launch Without

iOS Dev Weekly Issue 178

awesome-awesomeness: “A curated list of amazingly awesome awesomeness.”

ToolsOfTheTrade: “Tools of The Trade, from Hacker News.”

awesome-ios: “A curated list of awesome iOS ecosystem.”

free-for-dev: “A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev.”

iOS GoodiesTools for iOS Developers

The best resources for learning iOS design and Xcode

Mac Dev Survey 2016

[Non-Apple] Developer Tools Survey (2016)

30 Must Use Tools for Mobile App Startups

My Development Toolset 2017 for iOS

Replace Text Edit as the default text editor

33 awesome GitHub lists for iOS development

Exploring Apps Without Jailbreaking

How to Manage Multiple System Configurations Using Docker Compose

Better iOS projects: How to manage your tooling with mint

iOS-factor “is an experimental project started in May 2018. It aims to provide a collection of best practices for building high-end iOS applications.”