“Liquid to Light” - 10 minute summary on iPhone Design Philosophy
iPhone’s Transformation to Light Design starting from iOS7
-
iPhone has always been the center of attention and admiration. I believe that it has been remaining in an irreplaceable position despite so many competitors because it has two qualities that are the opposite — familiarity and innovation.
In this post, I would like to analyze how iPhone can provide both intimate beauty and innovative novelty at the same time by looking at its philosophy of the recent designs. It is a 10-minute summary on iPhone Design Philosophy — Liquid to Light.
**This post focuses more on GUI(Graphic User Interface) rather than hardware design. You can also check “Extreme minimalism- iPhone Design Philosophy in a word” emphasizing on iphone device itself.
-
21th century humans touch the light for the first time
We humans have never been able to touch light. It has not been long since our lives have been filled with looking at luminescent objects. Maybe about one century. But then in the recent decade, we are newly experiencing not only looking at a light but also touching it. Such behavior involves smartphones, and iPhone was the beginning. However, new things always face resistance. For this reason, if a product of a new category that has never been out in the world faces serious challenges in the market and takes a long time to gain popularity. In that sense, iPhone summoned a new experience of touching light.
-
Touching liquid before light
To make it easier to adapt to such new experience, iPhone is designed by applying a metaphor of an experience that humans are familiar with. It adds a familiar, positive experience, on top of touching a light, which is something that we never knew of. By doing so, users will feel less resistant and adapt to the new experience easily.
The first design concept of iPhone was “liquid”.
Let’s see what it means by looking at iOS 1 to 6.
What users loved the most on the initial iPhone screen designs was the icons that looked like a transparent pudding. They looked as, if you touch one, it will bounce, so you want to keep on touching it. The design maximized the feel of ‘transparent materiality’, which did not exist in other screen devices. For those who started using the iPhone since 5 or 6 (since iOS7), may not know about this, so let’s look at the previous icons. Do you remember these icon styles?
This bouncy, brimful, pudding-like icons used a luminescent property of a screen very appropriately. Although flat screens cannot make any shadow, such design made use of transparency and reflection to add authenticity. You can imagine one substance with transparency and reflection — liquid (water). iPhone designed the new experience of touching the screen, which is new (thus unnatural), by using the metaphor of touching liquid or jelly, which is familiar and natural. It made the experience amazing and fun.
Since the screen changed dynamically, a liquid was a good metaphor with similar properties. To maximize such effect, the depth of transparency and details of reflection became more and more sophisticated as the version updated.
-
Unified liquid concept design components
The liquid concept design that goes well with the luminescent screen continued in parallel with other components, such as the background. From iOS4, iPhone made use of background — translucent window with water drops and waving water surface — to further highlight the liquid concept. Such types of background were not accidental.
Like this, iPhone made touching the screen familiar to users by using the sense of touching liquid.
The dynamic interface of fluid screen transition with a feedback of bouncing back with natural acceleration when pulled to the edge made users feel a jelly or liquid-like material, rather than solid. Additionally, since liquid does not have an acute edge, the icons had a round-edge, and the shadow was light-greyed as other semi-transparent materials. These detail strengthened the overall unity. These were different from Android’s, which had square shape and shadow as default. Moreover, the design that emphasized the sense of reality by reflection from the bottom as if seen reflected on water surface became the representation of Apple’s design. There were gradual, unnoticeable improvements in details to emphasize such expressions. Did you know that color and the chroma of red number alarm on the right top of icon changed every iOS version?
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.
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”.
-
Dematerialization of Icons
So how did the icons change? Let’s look at some key changes.
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.
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.
-
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.
-
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.”
