Skip to main content

The law of beauty hidden behind the iCloud icon.

On the other day, iCloud has been introduced to the world and it became a big topic of conversation. The design of icon is refined as ever. Let's think about why it looks so beautiful. Changing the point of view a little, I'll try to find out the reason of its beauty by focusing on icon design itself.

At first, let's take a look at its appearance.
Its shape is balanced while the outline is irregular. It may looks easy to settle the whole shape as cloud-shaped with simplicity and balance, however, it's not that easy. It's actually a refined design.


We can't approach the reason of beauty only by just looking at. So, let's peer into its design.
As some of you may already notice, there are four circles hidden in the whole shape. At first glance, the curve looks irregular. Although, if you look at it further, it turns out that it has a balanced shape composed of precise circled.

In short, it tells that the beauty of icon comes out of the geometry. However, it's questionable that aligning circles at random can produce the balanced design.


So, I explored it further and measured the diameter of circles.
Surprisingly, the ratio of two pair of circles is 1:1.6, which is close to the golden ration.

Furthermore, I measured the ratio of the whole cloud.

It's truly "One more thing".

It's shaped as perfect design which casts its beauty on our unconsciousness by utilizing fundamental principle such as the golden ratio as well as the geometry.


To summarize...
•Geometrically-set curves generates the balanced shape.
•Applying certain law to random shapes brings the balanced design in whole.​



Simple, but profound.
Awesome Apple's design philosophy.

Original Japanese article is here.
(Uploaded on June 09.)

Popular posts from this blog

AvenirとFuturaに込められた、共通する1つの想い。『30 Essential Typefaces for a Lifetime』

30 Essential Typefaces for a Lifetimeが届きました。 渋谷のLIBROで見て欲しいなと思い、何となくamazonで調べてみたら海外の書店だと新品で半額以下だったので、書店にいながらもamazonで注文してしまいました。 アメリカからの発送でよほど過酷な旅をしてきたのか、新品にもかかわらずカバーがくたくたで、労をねぎらってあげたいぐらい疲れた本でした。まあ、半額以下だったのでよしとします。 本の内容は、世界中で多く使用されている主要な欧文書体の制作背景・主な用途・作品事例が様々なデザイナーのインタビューとともに掲載されています。 Avenir,DIN,Frutiger,Sabon,Times New Romanなどについてまとめられていて、様々な定番書体の背景を理解するのにとても参考になります。 和書だと欧文書体に関する本が限られてくるので、英語を身につけて洋書で知識を広げる事の大切さを痛感します。 この本で面白かった部分は小林章氏のAvenirついての話です。 ・「Avenir」は「Futura」より良いデザインを目指した書体(Futuraとはラテン語で「未来」の意味) ・Avenirはフランス語で「未来」を意味する AvenirはFuturaを出発点とし、共に未来を意味する書体でありながら、より良い未来への想いが込められた書体だということです。 書体の名前の由来を知る事で、また違った視点で関わり合う事が出来る。 知れば知るほど面白い世界ですね。

細かすぎて伝わりづらい!
iOS 5のデザイン変更点まとめ。

iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。 3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。 2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。 さて本題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので 前回のLion と同じようにまとめてみました。  細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。  1.アイコンバッジ  iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。 全体的に比較してみると、iOS 4のシャドウは浮いている感じがするので、明るくなったことで画面全体のトーンにまとまりが出たように感じます。 2.ボックスデザイン 設定画面などのボックスデザインが、iOS 4ではフラットなラインに対して、iOS 5ではシャドウとハイライトが追加されて立体的なデザインになっています。  iOS全体で同様の立体的なデザインが適用されているので、デザインの一貫性がより高まった感じがしますね。  3.メッセージのハイライト これは賛否両論ありそうですが、iOS 4ではメッセージの文字がプレーンなテキストだったのに対して、iOS 5ではハイライトが追加されてこれまた立体的なデザインになっています。 他にも吹き出しの背景色やシャドウが明るくなったことで、背景と文字のコントラストが高くなり、個人的には文字の可読性が高まって良くなったと思います。  5.回転ロックボタンの厚み iOS 4では回転ロックボタンのシャドウ距離が3pxだったのに対して、iOS 5ではシャドウ距離が4pxとなって、より立体的に見えるようになっています。 反対にミュージックアイコンのシャドウ距離は3pxで変わらずのままですので、1pxの違いをデザインすることで、回転ロックという 機能アイコン と、ミュージックを起動するという 起動アイコン の違いを表しているのではないかと

Appleのフォント「Myriad Pro」と「Myriad Pro Web」から読み取るWeb用フォントの秘密。

先日AdobeのCS5をインストールしたら、Macに始めから入っているフォントの「Myriad Pro」の他に「Myriad Pro Web」がインストールされていて「Web? 何か違うの?」と気になりだしたら止まらなかったので調べてみました。 Appleのコーポレートフォントである「Myriad」を解剖していくことでデザインの美しさの秘密に迫ると同時に、Webの冠をつけたフォントはどの様に改良されているのかに迫ってみたいと思います。 まず、始めに「Myriad」とはどんな書体なのでしょうか。Wikipediaで調べてみると… ミリアド (Myriad) は、サンセリフの欧文書体で、いくつかあるフルティガー体 (Frutiger) 模倣フォントの一つである。アップルやアドビシステムズがコーポレートフォントに採用している Apple、Adobeと、世界のITを牽引する企業が採用しているという事から、先進的なイメージを与えてくれるフォントだということが分かります。 では「Myriad」と「Myriad Web」は、具体的にどこが違うのか、はじめにアウトラインにしたものを重ねてみました。 可読性を高めるために、カウンターを広げたためか、全体的に横長になっている印象を受けます。 その中でも、特に違いが見られたのが大文字の「N」です。 左の「Myriad」のNは直線的に構成されているのに対して、右の「Myriad Web」は中心部が少し膨張気味になっています。 では、どのくらい違うのか、試しに直線を入れて見ると…。 こうして比較してみると、右の「Myriad Web」の方は斜線部に肉付けがされてることが分かります。 何故でしょうか、その理由に迫るために、スクリーン上で実際に多く表示されるであろうサイズへと徐々に縮小してみたいと思います。 視力検査ではありませんよー。 相対的に見てみると、左の「Myriad」は、だんだんと小さくなるにつれて中心部が少し頼りなさそうな感じになり、1番上のものと比較してみると違った印象が感じられます。 反面、右の「Myriad Web」の方は中心部に肉付けしているために、安定した感じがしますが、大きくなるに従って肉付けしている部分に違和感が感じられます。 あちらを立てればこちらが立