How An Entry Level iOS Developer Can Learn UI Design?…. Just Trace It.
I started Swift coding to make an iOS app three months ago. However, I didn’t know how to design the user interface at all.
So I decided to learn UI design by tracing the UI of famous applications, using Sketch.
Tracing UI gives us a lot of sense how to design our app. For the first of my series on UI design, I would like to share my takeaways from the Instagram UI tracing.
1. Spacing
This is a 750 × 1334 pixel Story board (the same size as iPhone8, iPhone7, iPhone6s, iPhone6). The units of numbers is points (see links for further explanation).
There are 3 main points that I learned from the Instagram UI.
i) It uses a custom tab bar
For the tab bar, the height is 45pt. However the default iOS UI tab bar height is 49pt. I suppose the reason why they use a shorter tab bar is that they don’t put text below the icon.
For example the tab bar below is Facebook Messenger tab bar. They put text below the icon, and the height is 49pt.
As people tend to like simple and spacious design, using a shorter tab bar without text makes for smarter and more stylish communication.
ii) Spacing is important (even 1 pt spacing makes a difference)
Until I traced it, I didn’t realize this but Instagram spaces their images by 1pt.
Below I changed the spacing to 0 to see what happens. Actually, the UI without spacing seems a bit noisy and glaring.
With only 1pt of spacing, it is easier to see each image, and creates a more clean and stylish vibe.
iii) Consistent size of tab bars
Consistency in design is important — once someone recognizes a design structure, they will remember that pattern and have a more fluid in-app experience the second time.
Regarding the consistency, I found that the tab bar at the bottom and the tab bar in the middle are the same height. It helps people find the section they want to go to more easily, because the design is consistent.
2. Color
I identified the color schemes of the Instagram profile page. For the gradient ring around the profile image, I used the colors at the two ends of the gradient.
Sometimes the Sketch color picker doesn’t work properly, so please refer to this as just one example.
Since the main feature of the app is pictures, they don’t use assertive colors and use monochromatic colors for most of the space.
However, if we focus on the sparsely used colors, we can see there is a regularity in the color patterns.
Following the classic color scheme theory, they use
i) Analogous (orange, red, purple)
ii) Monochromatic(dark blue, light blue)
iii) Complementary(blue and orange)
color schemes for the Instagram UI.
3. Text Font
Most iOS apps use San Francisco System Font in its UI.
Instagram uses the following system fonts:
size : 12–17
weight : Medium and Regular
The biggest letter is the title header in the UI Navigation Bar. In general, medium font is used for main information, and regular font is used for the sub information.
There are always a lot of things we can learn from tracing the world’s most popular apps. Please comment if you guys have any additional discoveries or opinions!
Thank you for reading the article.
Kohei
