UIデザインの学習開始

毎週火曜日に行っているFRINGEの定例会議にて、「デザイン」問題について議題に上がりました。

今、開発している「HoteKan」の業務アプリにしても、それを紹介するLPにしても、はたまたホテルの館内案内資料にしても、朝食メニューにしても、何においても「デザイン」が関わってくるのです。

もっとカッコよくイメージが良くなる感じで、欲を言えばデザインで使いやすさも良くなれば、PRもより楽になるのではと思うのです。

ただ、残念ながらFRINGE内に「デザイナー」はいません

なので、私がゼロから学習して、UIデザインを理解して、実践的にデザインできるようになるまで、(モチベーションを保つためにも)その軌跡を今後記録していこうと思います。

学習方法は、自分がゼロから勉強するときの下記の方法をまずは取りたいと思います。

1.Google検索(まとめ系やそれっぽい情報を見つけて、キーワードや全体感を把握する)
2.本屋に行く(該当セグメントの本を片っ端から斜め読み。全体感とイケてる本を選択する)
3.買った本を読む(イケてる本を各章ごとに深堀り、その通りに試してみる)
4.マネする(全体構造が分かってきたら、世の中にあるイケてる実例を探して、そのままマネする)
5.オリジナルを作る(実際に人が見える場所に出してみて、反応を見る)

出来る限り、抽象論に落ちていかないように、具体を意識しながら学習していこうと思います。

まずは、1の「Google検索」から始めたいと思います。「UI デザイン」で検索して、出てくる共通キーワードを整理する所までで今回は終わりたいと思います。(粒度や構造は今後少しずつ解明していこうと思います。)

1.シンプル(スターバックスのロゴの変遷)
2.近接(関連するものを近くに置く)
3.整列(散らばっている情報を並べる)
4.コントラスト(情報に強弱をつける)
5.反復(同じパターンを繰り返す)
6.タイポグラフィ(文字を適切に配列する)
7.グラデーション(連続的な色の変化を活用する)
8.アフォーダンス(ボタンがあれば押す)
9.メタファー(Facebookの画面デザインは紙の学生名簿を引用)

関連記事

  1. アプリ設計におけるUI検討の難しさとAdobe XD

  2. UIデザインの前提理解【本での理解編⑥】

  3. UIデザインの実践準備

  4. UIデザインの前提理解【本での理解編⑤】

  5. UIデザインの実践練習【リアル編】

  6. UIデザインの前提理解【本での理解編④】

  7. UIデザインの前提理解【本での理解編①】

  8. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

PAGE TOP