iqon デザインリニューアルのポイント

17
iQON デザイン リニューアルの ポイント 2013.11.20 wed Kwon Mie (株式会社 VASILY)

Upload: kwon-miae

Post on 13-Jul-2015

6.617 views

Category:

Design


2 download

TRANSCRIPT

Page 1: iQON デザインリニューアルのポイント

iQON デザイン リニューアルの ポイント 2013.11.20 wed

Kwon Mie(株式会社VASILY)

Page 2: iQON デザインリニューアルのポイント

権美愛 -こん みえ-

グラフィックデザイナー歴 4年、 VASILYに入社してWebデザイナー歴 2年。 ファッションアプリiQONのUI、コンテンツ等を デザインしています。

Kwon Mie(株式会社VASILY)

Page 3: iQON デザインリニューアルのポイント

What’s iQON?

Page 4: iQON デザインリニューアルのポイント

2012年には Apple社選定の ベストアプリ

利用者 月間 200万人

コーディネート数 1日 2000 3000投稿 平均点ユーザーレビュー 4.5

Google I/O 2013 出展

ファッションコーディネート i Phone/Andro id/PC

※2013年10月現在

Page 5: iQON デザインリニューアルのポイント

2013/11/6 iOSフルリニューアル

Page 6: iQON デザインリニューアルのポイント

Page 7: iQON デザインリニューアルのポイント

Page 8: iQON デザインリニューアルのポイント

よりシンプルに。 iOS7ライクな デザイン

Page 9: iQON デザインリニューアルのポイント

Deference(控えめ)

Clarity(明瞭)

Depth(奥行き)

UIはユーザによるコンテンツの理解やコンテンツとの対話を 助けるが、コンテンツと競合しない。

ヴィジュアルレイヤ(層化UI)と そのリアルな動きがユーザの満足と理解を高める。

テキストはどのサイズでも読みやすく、 アイコンは精密で明快、装飾は目立たず適切、 そして機能性を重視したデザイン。

Page 10: iQON デザインリニューアルのポイント

全画面で見せる。 コンテンツ ファーストUI よりコンテンツに集中できるように、

ナビゲーションバーとタブバーを、通常時

は90%の透かし、スクロール時は隠して

フルスクリーンでみれるように変更。

コーデやアイテムをだら見するユーザーに

とってはひたすらスクロールしても

ストレスにならないUIを目指しました。

Page 11: iQON デザインリニューアルのポイント
Page 12: iQON デザインリニューアルのポイント

最新トレンドを取り入れたUX iOS7での表現であるBlurや、アイテム画像

が拡大するダイナミックなアニメーション

も取り入れ“自分はどこから来たのか迷

わせない、ユーザーの感情を途切れさ

せない“を常に意識しています。

デザイントレンドを取り入れつつも、実際

のユーザーをイメージして、違和感のない

デザインを実現しました。

Page 13: iQON デザインリニューアルのポイント

Heavyな機能はあえて隠す メニューを簡素化し、ナビゲーションを一新、

タブバーで簡単に移動できる。

ライトユーザーの方でも使えるように、

メニューを開かなくても、コーデを作らなくても

ホーム(タイムライン)だけ

みてたら楽しめるiQON をめざしました。

Page 14: iQON デザインリニューアルのポイント

パーツ共通化し、画像やリソースは 最小限に。

キーカラーやフォントサイズ、

アイコンやボタン、テキスト…

iQON内で使われるデザイン要素は

一つのファイルにまとめて、

素早い開発のためにも

エンジニアと共有しています。

Page 15: iQON デザインリニューアルのポイント
Page 16: iQON デザインリニューアルのポイント

VASILYでは、 絶賛デザイナー募集中です。

一緒にファッションのスタンダードとなる

サービスを作っていきましょう。

Page 17: iQON デザインリニューアルのポイント

ご清聴ありがとうございました!

2013.11.20 @Designer’s meetup Vol.2