Lesson 2: How to Design UI in Xcode 9
Welcome to Lesson 2 of iPhone Apps 101!
You're in the right spot if you've never designed an app UI before. Or if you're opening Xcode 9 for the first time and it looks completely different from previous versions.
Send me an email if you get stuck at any point: Paul@SuperEasyApps.com
Today you'll design your first iPhone app interface from scratch using Xcode 9. Let's get started!
Outcomes
- How to create a new Xcode project
- How to set your iPhone app icon
- How to add both .PNG and vector images
- How to block design your UI
- How to work with Retina graphics (1x, 2x, 3x, and vector)
- How to adjust your UI
- How to customize fonts
- How to use labels, buttons, and text fields
First, Download a Copy of All the Graphics and Code for Lesson 2
The Lesson 2 resources contain all the design graphics, app mockups, UI Sketch file, and the final Xcode project (i.e.: if you get stuck and need a reference).
App Idea
Every idea starts somewhere, this one started in a restaurant when I was in a hurry to do math . . .
I've always enjoyed math, but I never like doing math problems under pressure.
. . . and that's the problem.
I needed a solution, but didn't know what . . .
A solution was painfully obvious when I got the receipt . . .
This delicious restaurant really goes above and beyond what others provide. The servers are attentive, the staff steps in to help, and everyone works like a well oiled machine.
I love it!
On the receipt they printed the recommended tip amounts. Genius. This was super helpful, as I glanced at the amounts for various tip percentages (10%, 15%, or 20%). That small gesture enabled me to just pick one and skip the complex multiplication.
That sparked my app idea, which I quickly wrote down on a notebook that night.
I'm always on the hunt for new app ideas, and I turned this one into a quick prototype in Xcode. It was surprisingly effective, but I didn't stop there.
That week I had a call with my designers (Lisa and Jeremy) and I mentioned this new app idea. They took it and ran with it for 30 minutes and the results were just FANTASTIC!
What they sent back was playful and fun, and I knew I had to share it with you.
Single Screen App Challenge
Today you're going to learn how to make a single screen application.
Why?
A single screen app is the best place to learn, because it forces you to limit your scope, which drives creativity.
In a single screen app, you don't have to worry about all the extra features. The decision is simple: either it fits on one screen or it doesn't.
It's a yes or no answer.
You'll find that when you work with constraints, it will force your creative part of your brain to start thinking of new ideas.
Try It
Set a timer for 5 minutes and sketch your perfect tip app UI. You don't have to be an artist to convey an idea, you just need to use simple shapes and words.
Take a photo and email me your design: Paul@SuperEasyApps.com
Design Your First App UI
If this is your first time making a user interface (UI), I want you to follow along as best you can. If you get stuck, just look at my final version in the resources download.
Download the Resources and Xcode Project
Challenges
Try doing the entire lesson again, but this time do it without watching the video. Start from scratch. Make a new Xcode project, add the images, create the UI, and tweak the fonts and sizes.
Bonus 1: Using your sketch, what would you change? Make the app your own, change the fonts, the layout, or colors.
Bonus 2: Using the single screen constraint, what other app idea could you design?
Summary
Today you had a crash course on UI design for apps. You learned how to work with Xcode 9's Storyboard and interface files.
Now you can add any images (.PNG or vectors) to your app UI to create custom layouts.
Great work!
-Paul
PS Send me a photo of your sketch and take a screenshot of what your version of the tip calculator looks like: Paul@SuperEasyApps.com
Tomorrow, check your email for Lesson 2. I'll show you how to connect the UI to Swift code, fix the keyboard issues, and add animations to move your screen out of the way of the keyboard.