Chipstar Lightのメモ - デザイン手法
スキューモーフィックデザイン
実物に似た質感の再現を目指したリアルなデザイン
写実性を特徴としており、立体感、奥行き、質感、光沢感の演出などの要素を取り込んで細部までデザインされている
スキューモーフィックデザインから解き放たれたiOS 7のコンセプトイメージ
フラットデザイン
よく使うグラデーションや影(シャドウ)、skeuomorphism(現実のものに似せたUI)を使わずにデザインすることである。
今年絶対おさえておきたいフラットデザインのまとめ
スキューモーフィックデザインよりコストがおさえられる
ワンソースなので管理がラク
UAなどを使った)事前のページ振り分けを考えなくていい
解像度にデザインが左右されない
Retina解像度を持つスマホや、画面サイズの異なるタブレットの登場
自然とコンテンツを引き立てるデザインである
マテリアルデザイン
「物質的なデザイン」
現実世界のモノがもつ物理的な振る舞いや構造を、UIの基礎的な原則として取り入れたデザイン
我々が実世界で体験し、学習している感覚・知覚を利用することで、デジタル媒体における情報空間を、より直感的で分かりやすく使えるようにすること
フラットデザイン」の傾向ですが、
フラットデザインはスキュモーフィックなデザインと比較すると、シンプルで平面的な表示のため、ユーザが操作できる部分の「手がかり」が分かりにくい
その課題に対しフラットデザイン的ビジュアルスタイルの世界観を踏襲しつつ、現実世界における物質性の基本原則を効果的に取り込むことで、次の次元のUIを作り出す
レスポンシブデザイン
1つのHTMLソースで複数のデバイスでの表示に対応したサイトを作る
viewportを固定しサイトを拡大・縮小して表示する方法
Appleはスマホサイトを作らない。
パララックスサイト
ウィンドウスクロールに応じて演出を発生させる技法の総称
イベント型
http://shop.nikon-image.com/nikon1/nikon1aw1/
ページ分割型
http://panasonic.jp/shaver/lamdash/dna/
参考資料
CCL web vol.6にて「Webデザイントレンドの潮流」について講演しました
スキューモーフィックデザインから解き放たれたiOS 7のコンセプトイメージ
今年絶対おさえておきたいフラットデザインのまとめ
Appleはスマホサイトを作らない。
Googleの新しいデザインガイドライン「Material Design」をみて感じたこと考えたこと