Blog Subscribe

SIGN UP to SUBSCRIBE

To get the latest and most quality designer news.

WHAT IS MOCKPLUS?

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Tell me more
<< Blog

iOS 11 UI Kits Freebie & What’s New UI Design Changes in It

Mockplus Team 10299 Views

iOS 11 has already launched on Tuesday, September 19, which is exactly one week after the iPhone 8 and iPhone X launch event. It's come out of beta after a four-month test phase. iOS 11 is undoubtedly a big system update, ios UI kits, OS kernel, lock screen, and many other aspects have been improved to varying degrees.

I sort out the free iOS 11 Sketch kits at the first time and will talk about the new changes behind the iOS 11 UI Kits.

1. New UI Design changes in iOS 11

Before preparation for the design, first of all, we should sort out the design concept of iOS 11. In the long-term development, the iOS system keeps a continuous enrichment of features and interfaces that make the entire system become increasingly complex, as well as the App internal functional architecture. Therefore, the Apple design team emphasizes such design thinking of “guidance” in the new system, and carried out it fully in every aspect of iOS 11.

In addition, let us look at the UI design principles of the Apple design team:

• The first principle: prioritize the content;

• UI elements do not compete with content unless they help users understand the role of potential features.

On the basis of such design thinking and principles, we analyze from the following angles.

(1) The bolder navigation bar

In the flat design, the typography affects the clarity of the information hierarchy, establishes a clear hierarchy of information through the type size, font weight, color in UI design and other contrast, without too many decorative elements. The most impressive in iOS 11 is the change in the bolder navigation bar.

If you want to build App with the label structure on the top, this design pattern will be very suitable, the use of bold headline allows users quickly aware of their current location among a large number of label switching;

Bolder navigation

Especially APP with rich content, which has a large number of pages and a variety of depth of the structural level, it can play a very good page guide role after the use of the bolder title.

App with rich content

But we see that the clock application still maintains the original typography, the reason is that its content and function are parallel and independent to each other and very easy to distinguish. If you continue to use the bolder title on each interface, the UI element will potentially cause competition on content, thus violating the basic design rules. While the App with similar content and layout, the bolder title will play a very good indicator.

 iOS clock app

(2) Enhance the design level

"Level" is a very important element of the UI, making the important and unimportant things separated to guide the user's moving line while reading. A Clear level can reduce the user's reading burden, and reduce mental consumption of finding the information so that the primary and secondary relations will be more coherent.

• Card view and shadow

The interface of the new iOS 11 used a lot of card or grid arrangement. It not only consistent visually but also easy for iteration. This is mainly applicable to the channel page for distributing data flowing. The structure level can clearly show the hierarchical relationship between the graphics and words, which plays the role of regulating graphic content;

Accompanied by the card view is the large number usage of shadow so that the design elements will be more independent and eye-catching, grasping the user's attention.

App store interface

(3) White space in the interface layout

The headline text of iOS 11 contains a set of elements with pictures and descriptions that keep a large spacing between group elements. In this case, the design elements maintain sufficient spacing and can be used to distinguish the hierarchical relationship between the unnecessary decorative elements.

White space

(4) Color / font size / font weight

iOS 11 also uses a lot of elements, including color depth, font size, and weight to show the different levels of the label. We can see the chapter title and pictures in photo App in iOS 10 have not obvious contrast. After the update, the chapter title has bolder and larger font, while the subtitle has a larger font, the color becomes gray, which makes the overall level get improved.

Font weight in photo app

(5) Rounded-rectangle icon

A large number of icons in iOS 11 changed from 2px linear to the areal type, from the wireframe to more rounded and become more affinity. In general, corners are more rounded, the hollow became solid, the color becomes heavier, all the changes resulted in a lighter and softer visual effect.

Among system icon, the signal status bar changes from ••••• back to the ladder, line scale ratio of the power icon becomes more balanced, the label bar icon change from the hollow/solid into a full solid line design, matching the overall style.

Rounded-rectangle icon

2. Prototype design

After using Sketch to design a static mockup based on the iOS 11 system, if we want to continue to make interaction design and team collaboration, it is recommended to install the Mockplus plugin in Sketch. Once you completed design in Sketch, you can export it as an MP file and make Sketch prototyping in Mockplus, which allows designers collaborating and adding annotate with team members.

Sketch with mockplus

Download: https://www.mockplus.cn/download

3. iOS 11 UI Kits Resourc

(1) Apple official download (Photoshop & Sketch):

https://developer.apple.com/design/resources/#ios-...

 Apple official download iOS 11 Sketch kit

UI elements

(2) iOS Design Kit:

https://www.iosdesignkit.io/ios11-gui/:

iOS Design Kit

(3) UI 8:

https://ui8.net/products/sparks-ios-11-ui-kit

UI 8 for download iOS Sketch kit

(4) Sketch APP Source:

https://www.sketchappsources.com/free-source/2689-...

Sketch APP Source


(5) Applypixels

https://applypixels.com/template/ios-11-ui-kit/

Applypixels for download ios 11 sketch kit

I believe that you can quickly design mockup and prototype matching iOS 11 with these resources and tools. To get more detailed design guidelines and iOS 11 UI Kits, you can refer to Apple's official human interface guidelines:

Human interface guidelines:

https://developer.apple.com/ios/human-interface-gu...

iPhone X:

https://developer.apple.com/ios/human-interface-gu...

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial