Why is Design Important?

Why should we spend the time and effort into designing great user
interfaces and experiences?
Unit Overview
• Design
• Why is it important?
• Layout, Colour Theory, Contrast, Typography

• Challenges
• Clone an App
• Redesign an App

• Prototyping Journal
App Review Guideline 4.2.0
Your app should include features, content, and UI that elevate it beyond
a repackaged website. If your app is not particularly useful, unique, or
“app-like,” it doesn’t belong on the App Store. If your App doesn’t
provide some sort of lasting entertainment value or adequate utility, it
may not be accepted. Apps that are simply a song or movie should be
submitted to the iTunes Store. Apps that are simply a book or game
guide should be submitted to the Apple Books Store.
Getting the Right Design
• Determining if your design is good is extremely difficult, it
usually comes with practice

• By understanding the rationale behind other designs, you can

learn from them and adapt it within your designs

• It is important to do multiple iterations and try different things

out to see what truly “feels right”
Ensuring that UI elements are arranged in a way that makes sense
Layout
Safe Areas
You might remember safe areas from the modifier in SwiftUI, it
is essentially a space on the device’s screen that your interface
elements can safely be placed without getting obstructed by
things like notches. Learn more.
Layout for Everyone
• Your layout should work for every device, from iPhone 12 Pro
Max to iPhone SE and, if you supported it, iPads

• SwiftUI automatically scales your UI for you, however, to save

you a lot of work later on, it’s good to design a simple layout,
thinking about how you would translate that layout into actual
SwiftUI code.
Layout Considerations
• When designing your layout, think about “What is most
important to my user?”

• You only have a limited amount of space on the user’s

device, you cannot, realistically, fit everything.
• When you lay things you, think ahead, how will you
implement this in SwiftUI? Is this feasible?
• Search to find out how you can do up a particular feature
 Panda-mic
• Let’s say you’re a designer, working on Panda-mic, a
COVID-19 contact tracing app

• Here are the features in the app

• QR check-in • Location History

• Favourite locations • Possible Exposure
• Bluetooth contact tracing • Digital NRIC (Non-Rhino
• Vaccination status Identification Card)
• Profile Screen
 Adding Features
• After integrating all the features in the app, it
starts to look very cluttered.

• You’re greeted with too much information

and it’s all over the place
• The app is functional, yes, but to the user,
the app seems clunky and hastily put
together
 Fixing Layout
• When designing the home screen, it’s
important to consider which information the
user would value the most
• Things of greater value should be larger and easy
for users to access
• Things of less value can be hidden away in menus
or smaller

• Having empty space isn’t a bad thing

Colour Theory
Colours have meaning
Colour Harmonies

Analogous Complementary Triadic

Split-Complementary Monochromatic
Colours have meaning
[mass noun] the property possessed by an object of
producing different sensations on the eye as a result of the
way it reflects or emits light: the lights
• What moods do these colours evoke? flickered and changed
colour.

red yellow green blue purple

Colours have meaning
[mass noun] the property possessed by an object of
producing different sensations on the eye as a result of the
way it reflects or emits light: the lights flickered and changed
colour.
red yellow green blue purple

• Speed • Cheerful • Harmony • Trust • Luxury

• Efficiency • Warming • Balance • Calmness • Wealth
• Passion • Intelligent • Safety • Integrity • Power
• Power • Energetic • Growth • Stability • Dignity
Colours within your app
• Colours are an integral part within your app’s experience.
• Red can be used to draw attention to a button or action the
user might take. Most notably, for “destructive” actions.
These buttons have a text colour of red to make sure the
user knows what will happen when it is clicked.
Consistency matters
• Colours can help to form your app’s visual identity
• It is important to choose a limited colour palette as it allows
you to communicate your brand
• Think about how you would associate Microsoft Office /
Google Workspace apps with their respective colours
What about Gradients?
• Gradients are dangerous
• Done right, they can make your user interface look professional,
modern and beautiful
• Done wrong and it can look very unsightly

• General guidelines
• Don’t integrate too many colours into your gradient
• Ideally, stick to a monochromatic gradient
• The background is an example of a bad use of gradients
 GrabPanda
• Let’s say you’re a designer, working on
a start-up, GrabPanda, a ride-hailing
service
• The colours do not go well together
• Its hard to tell what is clickable
• More colours != nicer UI
• Less is more
 GrabPanda
• Let’s try sticking to a triadic colour scheme
of green, blue and red.
• The new colours make it clear what is
clickable and what isn’t
• It now has a clear brand colour, green with
red and blue as accent colours
Colour Harmonies
• As you have seen from the previous slides, getting the right
colour scheme is important in making your app look
user-friendly
• It requires a lot of time and practise to effectively figure out a
good colour scheme for your app
• If you want to find a basic colour scheme to start off with,
you can use resources online to help you in finding it
• You could try using Adobe Color:
https://color.adobe.com/create/color-wheel
Contrast
It's not all black and white, there's some grey area to it.
What’s the use of contrast?
• Contrast can be used to increase readability
• Not everyone can see clearly, therefore good contrast will make it
easier for them to use the app.

• Contrast can be used to create a content hierarchy

• Contrast can be used to separate sections of an app

 PandaNews
• This app is called PandaNews which gives news and articles
related to pandas

• But, users are now complaining about text readability as shown

 Change the colour?
• You could try to change the titles to black but the text is still hard
to read
 Problem
• Its obvious we cannot choose black or white as the text colour,
they both look terrible

• How can we fix it?

 Solution
• Darken / lighten the image to ensure the text remains readable
Determining the Right Contrast
• It is not really necessary to determine a really good contrast
• Just making sure it looks right is enough, no need to go
maximum contrast
• With the internet, you can make use of:
https://coolors.co/contrast-checker/112a46-acc8e5

• This will help you determine the right colours and have a
good enough contrast
Typography
Fonts and how (not) to use them
Stick to 1 or 2 fonts
• If you have too many fonts, no one knows what’s going on
• Having multiple fonts will make text appear unprofessional
• Therefore, we standardised the font of the entire deck of slides as Helvetica
Neue

• If possible, stick to the system fonts, it requires the least efforts and
allows for a more consistent theme
• It may be tempting to use a bunch of different fonts but, honestly, it’s
not worth it.
• Design-wise, it can lead to inconsistent designs
• Coding-wise, importing fonts into your project can be quite difficult
System Font Styles
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890
Serif - New
San Serif - SF Pro
York
Has a tail at the end, like Times New Roman Has no tail

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890

Monospaced - SF Mono Rounded - SF Pro Rounded

Characters are equal width Edges are rounded instead of square
More System Font Styles
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890

SF Pro Expanded SF Pro Condensed

Wide characters Compressed but wider

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

SF Pro Compressed SF Hello

Very condensed According to Apple, this font is not
allowed for use
SF Symbols and Fonts
• SF Symbols are just normal character glyphs
• Think of it as better emojis

• That’s why font sizes would not work with SF Symbols

• You can also customise the weights on an SF Symbol
• Heavy: 􀈂
• Light: 􀈂
Font Weights
• When displaying information, you can use different font
weights to create a hierarchy and add emphasis on relevant
information
Swift.pdf Swift.pdf
12 mb 12 mb

▲ Varying font weight instead of size for emphasis

▼ Emphasising first name in contact card

Yin Jie Soon Yin Jie Soon

Swift Instructor Swift Instructor
Don’t cram too much info
• Ensure that your text remains readable no matter what
• Use short description that the user can quickly read.
Don’t paste in entire paragraphs of information from
Wikipedia and expect it to look good
Font Choice is Important
• What font you choose affects how easy it is to read. If you
are using a custom font, make sure it is easily readable at a
smaller size
• You are strongly recommended to stick with the system fonts
• You’re not a big company with your own typeface (see
Twitter, Google)
 PandaChat
• Imagine you’re a designer fixing an old
PandaChat app design. PandaChat is a
chat app for people to communicate
• There were complains that the original app
made things difficult to read
• There’s no emphasis on different aspects,
you don’t really know where to look at
 PandaChat
• By varying the font size of the sender and
the message, it shows the focus of the
content clearly
• By using 1 consistent font, the system font,
it makes the app appear more professional
• By altering the font weight in various parts,
it adds emphasis on titles and the thread.
Prototyping in Figma
Unit 10.2: Creating your high-fidelity prototype in Figma
Why should we Prototype?
• Prototyping gives us an opportunity to experiment with ideas
before implementing it within Xcode

• Creating a prototype ensures everyone in the team is on the

same page about a project before moving on
Paper Plane Animation
• Wanted to create an animation to fold a paper plane for an
onboarding sequence

• Creating a prototype like this allows you to plan ahead

• They don’t need to be elaborate, this was drawn in Notes
Paper Plane Animation
• Implementing in SwiftUI
WWDC 2017: 60 Second Prototyping
Expensive digital design tools
Free prototyping and design tools
Attend Today at Apple and use Keynote?
Figma
• It's free

• Easy to use

• Simple to use prototyping tool

• Collaborative

• Fairly popular tool

• It was used for Microsoft's new fluent design emojis
• https://www.figma.com/community/file/11382549422
49677742
Step 1: Go to figma.com and sign up for an account
Step 2: Click the + sign to create a new project
Figma User Interface (UI)
DESIGN
PROJECT
MENU TOOLS
OPTIONS

CANVAS INSPECTOR
LAYERS (where you draw)
(the Design tab lets you
customise
(objects in your colour/size/etc)
design)
Getting Started: Sidebar
• Shows contextual properties
• Alignment tools up top are useful for aligning and
distributing objects
• X, Y, W, H properties
• Corner radius
• Constraints (Similar to Auto Layout in UI Kit)
• Layer for blending modes
• Fill (inner colour), Stroke (outline colour), including gradient
effects
Figma Frames
• Tutorial messages will pop up. You can close these.
• Firstly, we need to create a frame to house our design.
• Click the frame button (shortcut: f)
• Select a device size on the right side (e.g. iPhone X)
Figma Quick Tips
• Cmd + Mousewheel scroll (or +/-) to zoom in / out
• N to zoom to next frame

• Shift + N to zoom to previous frame

• Spacebar + Click and drag to move canvas manually

• Can drag and drop images directly into a frame

• Double click an image to see editing options

Figma Text Boxes
Try: Create some text

• Click the to draw a text box (shortcut: T)

• Try to figure out how to change the:

• Font
• Size
• Colour
• Alignment
(Hint: try the Design tab)
Figma Rectangles
Try: Now create a rectangle to go underneath
your text

• Click the to draw a rectangle (shortcut: R)

• Try drawing it over your text. What happens?
• In order to make the text appear on top of
the rectangle, we need to modify the order of
the layers Drag and
drop the

• In the Layers pane, drag your Text layer Text layer

up!

above the Rectangle layer

Figma Rectangles
Try: Now let’s modify the rectangle
• Change the background colour of the rectangle
• Can you make it a linear gradient?

• Change the corners of the rectangle to be rounded

• Hint: click the ellipsis (the 3 dots) under Stroke

Try: Rename your project

• Now that we have some content, let’s rename our project to a more appropriate
name than 'Untitled'

• Click the 'Untitled' on the top of your screen and it will turn into an editable text field.
Figma Column Grid Once you enable column grid,
you will see this grid appear on
Often, designers use grids to help them layout your frame

and space elements

Try: Add a column grid to your project

• Select your frame by clicking on the Frame

name (e.g. iPhone X)

• In the Inspector, click the + sign to the right of

Layout Grid.

• You can click the Grid dots to change between

Grid, Column, and Row layout
Figma Saving
• Click the menu (the 3 horizontal lines in the upper left)
• Select File > Save to Version History
• Every time you save, you can keep track of what you changed /
updated
• This is really crucial especially when working in group
Collaboration
• Create a new Figma Project (File >
New)
• Click the Share Button at the top
right
• Invite your group members and
change their permissions to ‘can
edit’
• Now all members can start
designing at the same time
Figma Prototyping
We can add multiple frames to simulate multiple screens of
an app:

• Click the Frame button (shortcut: F) to create

another frame

• Select your device size in the Inspector (e.g. iPhone X)

Figma Prototyping
Let’s rename our frames to keep track of them easier. In the
left-hand Layers area, double click your layers to rename
them. (e.g. Welcome Screen, Success Screen)
Figma Prototyping
Click the Prototyping tab in the Inspector:

• Select the button you created on your first frame.

• Under Trigger, select 'On Tap' and under Action select

'Success Screen’
• We’re making it so that when our button is tapped, it
displays the Success frame

• Once done, click the Play button in the top right to

test it out!
Clone an App
Recreate an app in Figma
Why clone an app?
• Cloning someone else’s design will allow you to familiarise
yourself with the tools within Figma

• Cloning someone’s design will allow you to better understand

the design rationale behind the original design
• When doing that, ask yourself several questions such as
• Why would they put the text here instead of there
• What’s the purpose of dedicating a large space to an image?
What are we cloning?
• We will start by cloning a famous delivery app, FoodPanda
Task: Clone FoodPanda
• Feel free to use whatever images of
food you want.

• Task: Copy this interface using Figma

to familiarise yourself with the tools
Design an App
Recreate an app in Figma
Task: Create a Weather app
• In pairs, come up with a design for a weather app
• Discuss and collaborate on a Figma

• While designing, think about what information would be most

important to your user, try referring to other weather apps out
there and gain inspiration
https://developer.apple.com/videos/play/insights/103/
Why is the app great?
• Not only is it a well-designed weather app, it gives you the
information you want from it directly

• Try to mix things up and combine things together to see if it

looks right
• Read more about Carrot:
https://developer.apple.com/news/?id=kf623ldf
More on Design
• Here are some useful design videos we didn't have time to cover in class
• WWDC21 Discoverable Design -
https://developer.apple.com/videos/play/wwdc2021/101
26/
• WWDC18 Qualities of Great Design -
https://developer.apple.com/videos/play/wwdc2018/801/
• WWDC18 Intentional Design -
https://developer.apple.com/videos/play/wwdc2018/80
2/
• WWDC18 Designing Fluid Interfaces -
https://developer.apple.com/videos/play/wwdc2018/80
Unit Overview
• Design
• Why is it important?
• Layout, Colour Theory, Contrast, Typography

• Challenges
• Clone an App
• Redesign an App