Apps With Swift: Part 1- Getting Started
This is not a tutorial from an expert, but rather a no-holds-barred story of my journey to learn something new.
Upon reading some things you might think I’m a dumbass.
Or, maybe some things will help you to avoid a few dead-ends.
Three words sum up the first weeks: overwhelmed, intimidated, and inspired.
Each of these feelings come and go at various times and at varying intensities. Without the inspiration bit, the first two feelings will be the reason why I give up. Nonetheless, here we go…
The Absolute Beginning
I have a leased MacBook Pro that I use for my normal work (maintaining websites).
In 2014 Apple came up with a new development language – Swift. This can be used to build iOS and MacOS apps. Previously this was done (primarily) with Objective-C.
Objective-C intimidated me, which was probably why I avoided the thought of app development for so long. So, Swift it is.
Where to Start
With Google. I searched for app tutorials with Swift. Very quickly I came to Meng To’s Design+Code site. A beautiful site that seemed to have what I was looking for.
I was always ready to spend money on this, so the $50 charge for Meng’s iOS tutorial was a done deal. I charged ahead and downloaded all his iBook versions so I could read offline on my iPad.
This was a bit confusing as instead of one cohesive book, it is actually a series of “chapters” and I wasn’t sure where to start. Sometimes he refers to chapter 3 or 2 or whatever, but the “books” aren’t named by chapter number, but names like “Learn iOS Design”.
Hey don’t judge me. Maybe I’m a bit slow but I had no clue where to start.
I learned: There are loads of tutorials out there, yet they all come at things from a different angle. This was going to be a big undertaking and not something learned in a week or two.
To be honest I’m not sure where to fit in time to read some of these. I could easily spend the next year reading full time and still not cover all that’s out there about iOS. I’m starting to get that overwhelmed feeling.
I learned: There are pretty clear guidelines about iOS usability. It takes courage to break the mold and design something different. I also realize the pace of change is staggering and by the time I’m learning something Apple will probably have iOS9 and design would have all changed again!
Designing With Sketch
Then I jump into Meng’s chapter/book on Designing with Sketch.
As luck would have it I already have a copy of Sketch. It’s a nice Mac tool for graphics. I downloaded it from the Mac App Store for $100.
I’ve only used it for cropping and exporting images before uploading to websites. I’m no graphic person. I can’t use Photoshop. But I bought Sketch as it seemed a lot easier to get the hang of.
Meng’s book has a lot of videos of him using Sketch. These were great except for two things:
About 1/3 of the way through the book (I’m reading this on iBooks in a iPad Mini Retina) the videos just stopped working and wouldn’t play anything. So I gave up in frustration for a while.
I then discovered that if I ‘killed’ the iBooks app (by double tapping the home button, and swiping the iBooks app upwards) and then restarted the iBooks app, the videos would work. I guess some issues with memory or something.
Videos Were Helpful But Bewildering
Not meaning to be disrespectful. It’s clear that the author Meng To is superb at his craft – an excellent designer who knows how to code. The web allows us access to some very smart and talented people, who kindly share their knowledge. It can be intimidating and I struggle not to feel like a schmuck (I guess that’s my own issues).
However, the videos show Meng using the tools at high speed. Obviously once you use something for a long time you become proficient at it. However being an expert at something doesn’t necessarily mean you are a great teacher.
The videos in the book had no voiceover explaining what was happening (although some videos in the other books had a narration). I frequently would pause and rewind to try and understand something.
I grew frustrated.
How many times has someone asked you for help on their computer? You quickly click this, type that, and fix their problem. They look at you with a mix of annoyance and gratitude. You solved the problem but they are none the wiser?
I persevered and did gain some extra skills with Sketch but what now? Have I started at the wrong point? Am I building an app or what?
I learned: Sketch is for building prototypes. You can then export out bits of your design that will be used in your app. These bits are called assets.
Sketch is great because there are instant mockups available for various iDevices. These are called artboards. You just type A and choose which size iPhone or iPad and away you go.
Sketch has lots of tools to get the design accurate to the pixel.
Making things look like iOS 8
To get things looking like iOS you try and get things a standard size and place on the screen (remember the iOS Guidelines?). Sketch helps here as it has Templates, including one for iOS.
This means you can copy and paste different UI elements into your own design that conform to the guidelines. There are some must-have resources out there which helped me:
- IOS8 UI Kit for Sketch (Another useful template)
- IOS Design Guidelines (in one brilliant page with sizes and explanations).
Why another UI template file? Because I ran into some problems to do with Retina. Let’s deal with that.
1x, 2x, 3x… Huh?
On Meng’s book he just dragged in a header from the Sketch template. When I did that it was too small. This held me up for a long time.
In a nutshell: The iPhone 3 was 320×480 points and 320×480 pixels.
Great! 1 Point = 1 pixel so I could use the word point and pixel interchangeably. Then came the iPhone 4 with a Retina display. The screen was the same physical size (3.5″ diagonal) but had twice the resolution. Suddenly 10×10 pts = 20x20px
Then there is the iPhone 6 Plus which can handle 3x assets (see all different iPhone sizes here).
So if I wanted to export pixel perfect assets for these 3 devices I would need 3 different images – Myimage.png, Myimage@2x.png, Myimage@3x.png
Sketch makes that easy with its export box. However – a trap here – because I’m working on a Retina (2x) macbook, I don’t need to do any resizing at the export stage for a 2x image.
So… for a 2x asset, the size will be 1x and the suffix will be @2x. If I want that asset at 1x (although these devices are disappearing) I would have to set the size to 0.5x — hope that makes sense.
It’s important to understand these concepts (or so I’m discovering).
Moving on From Sketch and Design
I’m not sure whether I started at the right point. Never mind.
I’ve messed around with a few screens of an app that I wanted to start (very basic). But I’m still confused. I want to make an app, not just a prototype.
So a deep dive into another of Meng’s books/chapters – building an app with Swift.
Meng drags in various assets from his beautiful design in sketch. Very quickly he wires them up to make some sort of working prototype. It was about now that things start to fall apart for me a little.
I like to understand things, and I’m a task-by-task person. I could see that Meng was knocking up an app. He even provided a narration for one of the videos. But I had no clue why he was doing the various things. I realized there are many approaches to app development and I was seeing one approach, but without the bigger picture.
So… time to put the Design+Code books aside and go elsewhere. I’m sure I will come back to them. It’s clear that the author’s strength is design. I’m pretty rubbish at design. I guess like to know what’s going on under the hood.