No designer wants to spend a week putting together something only to be told that it can’t be done.
Knowing how to use Storyboard, Auto Layout and a little bit of Swift will not only allow you to build your own app, but also share the workload with your developer. You don’t work in a silo, you iterate at the same pace as your team. A project can only move as fast as its slowest process. Development takes 80% of the time; the first 20% is attributed to visual design. There is 30% up for grab. Since designers are especially trained for that part, there is a huge win.
In this chapter, we’re going to learn how to own that missing 30%. It’ll be written from the perspective of a designer.
While Xcode allows to do really powerful stuff, it can also do simple prototypes. And without writing a single line of code.
There are 6 types of transitions between screens in iOS: Cover Vertical, Flip Horizontal, Cross Dissolve,Partial Curl, None and Push (requires Navigation Controller).
Bonus: if you want to download the Xcode project for this demo, get it here. Made entirely in Storyboard.
Designing in Storyboard
The Storyboard works very similarly to Artboards in Sketch. It’s incredibly intuitive once you get past that fear of Xcode. In Storyboard, you manipulate your UI in a very visual way. It’s even easier than HTML and CSS because you don’t need to code.
As a designer, to be able to implement your own design is empowering, not to mention fun as well. We’re fortunate to have a functional visual tool like Storyboard that even developers use. Not only can you prototype with it, but also you can create production-quality layouts that co-exist with production code.
Adaptive Layouts is one of the most important skills you can develop. In a future where there is a growing number of mobile devices and screen sizes, we can no longer afford to focus on just static designs.
Auto Layout requires 2 things: position and size. As long as you set those constraints, Auto Layout will be happy. There are 2 ways to respect those requirements: Align and Pin.
Align allows you to center things and align elements with each other.
Pin lets you set the size and the spacing from the edges.
Setting constraints between two objects
Remember the smart guides and the distances in Sketch? Well, constraints are sort of like that, but made for adapting your layout.
With the Assistant Editor’s Preview, you can quickly check how your layout looks on the iPhone 3.5’, 4’, 4.7’, 5.5’ and iPad in portrait and landscape modes, without having to run the app every time.
This neat tool allows you to set specific Auto Layout constraints and content based on groups of devices. You can decide to add an extra menu or make some content bigger based on the device that you’re on.
Working With Colors
As a designer with a Web background, I typically work with HEX colors. These tools will help you do the conversion efficiently from Sketch to Xcode.
HEX Color Picker – A dead-simple HEX color picker. Very useful when you work with the Mac’s color picker that exist both in Sketch and Storyboard’s Color Picker.
Sip Color – A great tool for collecting colors and converting them to Swift code.
Instead of generating 3 images (1x, 2x, 3x) per asset, you only need one single file. In Sketch, you need to export them in PDF. However, there are 3 things to note.
The resolution matters. You must export at 1x to make sure it looks good in Storyboard.
You cannot resize the vector image in Storyboard as you please.
Xcode re-renders them to PNG files to 1x, 2x and 3x.
A year ago, I released Canvas, an iOS animation library meant to make it far easier to do animations using Runtime Attributes in Storyboard. It was simple enough that any designer without a coding background could come in and play with these animations.
A lot has happened since. Swift took over and Xcode 6 made things much easier. Runtime Attributes can now be set using IBInspectables. Instead of writing manually a few attributes such as animation type, delay and duration, you can just set the values directly in the Attribute Inspector.
So I decided to go back to the drawing board and work on a new animation library called Spring, with the help of two iOS developers. This project started when I released my book’s Swift Chapter to help designers and beginners learn Swift by shortening some of the animation code and allowing them to set layer properties that aren’t readily available in the Attribute Inspector such as cornerRadius, shadowColor, shadowOpacity, etc. It has grown into a full-blown animation library that supports every View, Transitions, Loading Animation and a lot more.
Just drop in the Spring folder to your Project Navigator like shown in the video.
Using Spring, you can quickly animate any layer without a single line of code. You have access to over 25 preset animations like slideDown, zoomIn,squeezeUp, etc. You even have the flexibility to play with x, y, scale androtation properties. For your animation, you can experiment with curve,damping and velocity values.
For simple animations:
In Identity Inspector, set the Spring Class to your layer.
Play with Spring attributes.
Play with the Spring App
Animations In Code
With code, you can do a lot more. Spring was built so that you can trigger animations or a chain of animations with any event.
You can trigger this during viewDidAppear() or in an IBAction.
layer.animation = "squeezeDown"
I suggest storing all the animation properties in Storyboard and just call theanimate() or animateTo() function in code. Like this, you avoid putting too much UI code in the Class files.
Learning Swift as a Designer
With Swift Playground, you can experiment with code in real-time. It’s a perfect place to experiment with all the possibilities without the limitations of a GUI. Learning how to use functions, classes and working with UIKit can make your app infinitely more powerful.
I like to think of code as another design tool. Software is made of code, it is unavoidable.
This book was written in a way that it respects all the latest standards encouraged by Apple. I consulted two iOS engineers in the process and they kindly reviewed all the code to make sure that I respected the best practices.
As a designer learning code, you can:
Perform any animation or UI change based on events.
Work with real data from any database or API.
Collaborate better with engineers by understanding their constraints, and pushing beyond those constraints.
Building your Swift App
In this updated chapter, we won’t skip any step. You’ll learn everything in great detail: the Xcode UI, Storyboard, Auto Layout, Animation, the Swift language and a lot more. Each section is extremely visual and has videos with voice as well as downloadable Xcode projects. The whole process has been simplified for designers and beginners who have never touched code in their entire life.
If you are not yet aware of this, Apple has introduced a new programming language calledSwift in this year’s WWDC, alongside the new Mac OS X Yosemite. Swift aims to simplify the codes used in Apple platforms iOS and OS X. Despite the new name, Swift is compatible with the roots of predecessors like C, Objective-C and Cocoa Touch framework.
If you have been programming with Objective-C, learning Swift would be a breeze as it has inherited a number of syntax that you may already have been familiar with. And if learning Swift is in your to-do list but you haven’t started, here are a few free sources that is going to make things a lot easier for you.
Available for download for Mac OS and iOS, the Swift Programming Language is available via iBooks. It is Apple’s very own Swift reference, and it covers the essentials, concepts and workflow with code examples. An official guide like this book is always the best place to start with something new.
Not a fan of eBooks? Not a problem. How about a video course instead? Apple has also released a video playlist on Youtube containing short courses on Swift, covering the introduction and a number of its syntax such as Constant and Variables, Integers, and Arithmetic Operations.
Here’s a third source on Swift by Apple, a dedicated blog called The Swift Blog. The blog covers tips, insights, and examples on Swift utilization. Despite only having a few posts published at the time of writing, this is still the best source to stay up-to-date with Swift.
Many developers have also put their hands on Swift and shared their findings on their blogs. TeamTreeHouse in their post, An Absolute Beginner’s Guide to Swift, summarized the essentials for beginners; what Swift is, the prerequisite tools, and a basic run-through of the Swift syntax.
Swift is designed to be as easy to understand as possible so that non-programmers or entry-level users will be able to pick it up quickly. This free course from Udemy, titledIntroduction to Swift for Non-Programmers, consists of 8 videos that will walk you through the fundamentals even without prior programming experience.
SoSoSwift is a collection of sources on where to learn Swift. Here you can find videos, articles, tutorials, code examples, and libraries to build Apps for iOS and OS X, with Swift. Do you have suggestions of sources or tutorials to be included in the collection? You can send a request or submit the link to the site to have it listed.
LearnSwift is similar to SoSoSwift. It is a collection of sources for tutorials, video screencasts, and libraries for Swift. LearnSwift laid out the sources in three sections: Beginner, Intermediate, and Advanced. Pick the level you are most confident in and start learning Swift today.
SwiftLang is another good place to dive into Swift. SwiftLift has put a pile of references from various sources together. SwiftLang also has a forum where we can ask for help or help others with regards to Swift programming.
Swift consists of a lot of syntax that would be hard to digest all at once. So, here is a Swift cheat sheet for quick reference, composed by Ray Wenderlich. It summarizes a number of Swift syntax, all in one page.
Now that you have run through the basics, let’s start building your first app. What about creating a game? This eBook, Learn Swift Build Your First iOS Game, will teach you the steps required to build a game named Swiftris, which mimics the popular classic game,Tetris. The book is available via email subscription.
In this 10 minute video screencast, Jeannot Muller shows you how easy it is to use Swift. The App created is very simple, as it comprises of only input fields and a button.
12. Drawing With Swift In Playgrounds
One significant feature Apple brought to Swift is the Playground. Within the Playground, we can immediately see how our codes act and turn out, immediately. Join Nate Murray in this video to see how to “play” in the Playground.
13. Creating A To-Do List App Using Swift
There are plenty of to-do list apps in the App Store. Many of them bring a set of great features with a nice user interface design. But, if you feel like creating your own to-do list App, here is a video screencast to get you started.
14. Developing IOS 8 Apps With Swift
With iOS8 on its way, you’ll want to get yourself ready to build that app. Jameson Quave in his posts series – Part 1 and Part 2 – will teach you how to use Swift to build an App for iOS 8.
15. Swift On StackOverflow
Having bugs in your App is unavoidable. So, in case you have bug trouble, head over to this OverflowStack for Swift to get help from other developers. You are also likely to come across some threads where you can pick up a couple of tips and tricks on how to use Swift.