去年の夏ごろにまとめたものです
uiの原則
ひと目で意味がわかるデザイン
簡単な操作性
オブジェクトとインターフェースの距離を近くする(ユーザー名が表示されている付近に、編集ボタンが設置されているようなイメージ)
2018年のトレンド
1シームレスインターフェース
Webサイト上のすべてのコンテンツを1ページに配置するUIデザインです。全コンテンツを1ページで確認できると、ユーザーはほかのページへ遷移せずにスクロールのみですべての情報を得られます。 そのため、別のページへ遷移する際にかかるストレスを軽減できます
https://lewislopez.com/#whoiam
2タイポグラフィの活用
巨大な文字を配置するデザインです。文字を大きくして目立たせると、ユーザーの視線を引き付けることができます。
文字にアニメーションで動きをもたせるデザインもトレンド
3グラデーション
Webサイトの背景に用いられたり、写真に重ねてオーバーレイとして使われたりするケースが多く、ユーザーの目を引く印象的なサイトにしてくれます。
4イラストレーションの活用
Webサイトのコンセプトに適しているデザイン
http://nasaprospect.com/
5動画の活用
トップ画面の背景が動画
https://designcase.jp/
6活気のある鮮やかな色
色は注目を集め、気分を変え、ユーザーの感情や行動に影響を与えることができます。
モバイルアプリのデザインについて言えば、これからは間違いなく鮮やかな色の時代です。
鮮やかな色✖️グラデーションという今年のトレンドを組み合わせたアイコンがインスタグラムのアイコン
機能要素としての色、、、さまざまなタイプの通知を視覚的に分離します。
https://www.seleqt.net/cms/wp-content/uploads/2018/01/d62f58fb9a8ebeeaf8b0bf38869648e1.gif
7ミニマルデザイン
少ないパーツでページを構成するthe simpleって感じのページ
余白を大切にすることで演出できるオサレ感
https://makr.com/
8スプリットスクリーンレイアウト
画面を大胆に分割してレイアウトするデザイン手法
画面を大きく2つに分け、左側にメニューを表示し、右側に画像を表示するようなデザインとなっています。スプリットスクリーンを使う場合は、どちらか片方にメニューを固定表示しておき、もう片方にコンテンツを表示してスクロールさせるようなデザインにすると、使いやすくてデザインも優れたページに仕上げることができる
9美しいローディングアニメーション
読み込み中に美しいローディングアニメーションが増えています。読み込み時間が長くなるほどユーザーの離脱率は高まってしまいますが、アニメーションを上手く活用することによって離脱率を抑える効果が期待できます。