Like this, iPhone smartly implemented this new experience of touching screen with the liquid concept. People worldwide loved it, and other application designs of Windows, Android OS have been influenced by this concept. However, when such design trend became the norm, Apple shocked the world once again with a totally different GUI design.

-

Impact of iOS 7 — Liquid to Light

Until iOS 6, iPhone continuously focused on using the liquid concept to touch light, but with the release of iOS 7 it proposed absolutely different design philosophy.

iPhone started to design the screen using “light”.

This approach is very innovative, but would it be unfamiliar to the users? The answer was no.

Surprisingly the new generation kids of the 21st century are born with touching the screen, so such experience was mundane to them. A few month-year-old babies see Pororo cartoons on iPad, and 3 to 4-year-old kids already use smartphones and apps. For this reason, iPhone, which used the liquid design as an analog experience for the older generation, did move on to the future generation design by removing the previous approach. The new generation is more used to touching wood-like screen than touching actual wood. Let’s look at what innovation iPhone brought up until today.

<Evolution of iPhone design>

As seen from the image above, iOS 1~6 design emphasized liquid materiality of transparency, reflecting light, and convexity but iOS 7~9 removes such concept and evolved to “nonmaterial sensation”. Material and nonmaterial — are these concepts a little bit hard to understand? “Materiality” indicates basic attributes of real world’s objects, the touch, shape, thickness, weight, and shadow of things we sense every day. However, from iOS 7, iPhone design starts to remove these “materiality”. Some people call such trend as “flat design”, but I think it is different, so I call it “light design”.

<Compare the “materiality” of iOS 7 (left) and iOS6 (right) by analyzing the depth and weight>

-

Dematerialization of Icons

So how did the icons change? Let’s look at some key changes.

<iOS 6 (left), iOS 7 (right)>

As you can see, the design concept clearly changed. Elimination of materiality — use of much more simplified shapes and high-chroma colors with the removal of shades and icon shadow — makes the screen design look like one lighting. Dramatic change can be noticed by looking at the icon background gradiation; whereas former icons made upper part brighter than the lower to express shading, new icons just have colors with gradiation, thereby increasing the feel as a whole.

Moreover, “Photos” icon have the feel of the three colors of the light, and “Calendar” icon is simplified to only show the date and day with a light font by removing the former paper calendar design.

Overall, the icons have become thinner to remove weight. As a result, materiality has disappeared, and everything is expressed with light. Such design concept is shown in the background, too. As I mentioned above, a liquid was the default theme, but how about that of iOS 7?

-

Background changes to shattering lights

The default background of iOS7 has changed to a scene that seems as a light is shattering into pieces. It contains soft border with gradiation between bright and dark sides. The overall design of iOS7 evolves into the same concept of this background — “space filled with light”. It is totally different from the previous “liquid” concept. For this reason, the screen becomes lighter without any weight, like a space without gravity. This concept also corresponds very well with the online cloud services that Apple provides through iPhone. I will talk more about Apple’s cloud services in depth on another post.

-

The direction of Android platform

When first iOS 7 was released, the preferences about its new design were divided. I think it is because of its dematerialized feel. Such design approach with light was the first at that time, and touching light, which is intangible in reality, may not really feel legit for our fingers in the beginning. However, now we feel as if such approach is natural and normal. Let’s look at the default background of Galaxy S4 (released March 2013) which came out nearly together with iOS 7 (released June 2013). Apart from which design is superior, we can feel the different approach that Galaxy S4 tried to take by sensing the feeling coming from this very realistic background. Its approach was very different from iPhone, which converted everything to light in order to express them.

<The background of Galaxy S4>

Moreover, looking at Android’s default background of the new material design, which expresses materiality effectively on screen, shows a totally different approach from that of iPhone’s light concept. Android’s design gives an impression of paper, rather than light. It has an intention of conveying sophisticated authenticity through improving screen resolution. Considering this direction, Google might want to apply a technology that can express “texture” on screens in the future.

<The default background of Android’s Material Design>

-

Blur is an attribute of light

Another characteristic of iOS7 design is the “blur” layer. When a control center panel is pushed up from the bottom, a blur layer overlaps the previous screen. This kind of blurring expression is using light. Such blurred layer carries a feel of infinite space, just like the gradiation image from the iOS 7’s default background. Furthermore, the border shows the attribute of light by not being so clear but softly spread. In photography, blurring out by loosening focus is a way to express light and space, rather than the object itself. When the control center layer comes up, the background falls behind.

Android pull down menu demonstrates an apparent contrast. It uses black, semi-transparent layer as if a black, transparent cellophane sheet is covered on top.

On the other hand, iPhone distracts the focal point and gives light so that the background will become a shattering light. The light design concept appears everywhere with harmony.

<iOS Control Center vs. Galaxy S6 Pull Down Menu>

-

Progress of touching light, iOS 8

Now you might have more sense of what direction iPhone is seeking — the sense of nonmateriality and touching light. Such phenomenon started from iOS 7 until today’s iOS 9. Nevertheless, due to some dislikes, iOS 8 had some changes to lower the overall color tone and express a little bit of materiality to find balance. The purple flower image from the iPhone 6 advertisement was one example. It seemed like conveying the image of the flower, but actually it really was more about expressing the light that was being reflected from the flower in a dark space. The main object in that image was not the flower but the purple light. Also, another default flower image background showed the object as semi-transparent from a very bright light, so that it removed the flower and looked like one lighting. As you can see, the liquid concept from iOS 1~6 had been removed. Light and dark expressed fluffy light and infinite space.

-

Continuing iPhone’s light design, iOS 9

iOS 9 selects the bold default background that represents “light design” with high chroma and soft graduation, just like iOS7 did. This time, it is not an image of infinite space filled with light, but a wave to reinterpret light. Such change indirectly demonstrates that Apple’s thorough study on light GUI design is proceeding. I believe that this direction will be developed numerously. The design will become better for us humans who become capable of touching light without the metaphor of paper or liquid.

-

How is your design?

If you are a designer working on apps or websites on iPhone, I believe these are good questions to ask yourself, based on the details I discussed in this post.

- Will you have the same direction with iPhone design philosophy which directly expresses light without any metaphor? - Then how will you decrease weight and materiality to maximize the fluffy feel? - How can you come up with a new sense of light that even Apple did not think of on the screen? - What are the characteristics of light in a certain space, surface, and curve? How can these be utilized in a design? - In reverse, how about emphasizing materiality so that the app will convey a totally different feel when it is launched by the user? - How the design can be differentiated from the Android’s material design?

If you have a design philosophy that embraces the whole, you may have more insights and will be able to express things that no one ever thought of.

If you are developing or designing something, think about the objective and methodology in your design philosophy in comparison to that of the iPhone. You may find something unique.

P.S : As mentioned at the very beginning, this post focused more on the screen design(GUI). My next post is more about the design philosophy of the device itself. Take a look at the post “Extreme minimalism - iPhone Design Philosophy in a word : iPhone represents the minimalistic design that intensively simplified cognition.”