webデザイン

現場で普段やってるWebデザインのブラッシュアップポイントまとめました。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
普段やってるWebデザインの ブラッシュアップポイントまとめました。

今回はデザインのブラッシュアップについて自分がいつもやっている技術的な方法を記録します。

カフェのピックアップメニュー部分をお題としてみます。
クライアントの要望に沿ったという前提で ザインをブラッシュアップしていきます。

要素は見出しタイトル、メニュー写真、メニュー名のみです。
デザインブラッシュアップ用の架空のメニューになります。

「もうこれ以上動かせない。。何も浮かばない。。発展しない。。」というときに参考になれば幸いです。

※デザインをする上での基本的なこともつづってますが自分特有のやり方などありのまま記録してます。

以下がなんの変哲もない元デザインになります。

まずこのデザインからどんなイメージ をユーザに与えたいのかをゴールとします。
健康的でおいしそう、暑い日に飲みたいなど、、簡単でよいので一度決めてみます。

今回のゴールは「もう少し夏っぽく前向きに」にします。

今のところ印象もうすく脳内ですぐ埋もれそうなイメージなのと商品の魅力(おいしいアピール)が伝わってこないので写真やロゴなどのすでに変えられない色を軸として配色を見直します。

よく使っていた配色ツールがこちらです。
配色ツールを使って最終的にはいつも調整しています。
Color Hex – ColorHexa.com

飲食系なので寒色メインにならないようにしつつメニュー写真と合う色を選びました。

特に見出しはフォントでかなり印象が変わるのでフォントの見直しは必ずしています。
可読性とおしゃれを兼ね備えたもの、サイトの印象にあわせて、などなど考えて探しています。
フォントはやはり手っ取り早くGoogle Fontsで探すのがおすすめです。

マスキング、フィルター、枠などいくらでも伸びしろがあるのでここではマスキングしていきます。

「 商品 」に分類されるものは写真の状態がよければマスキングするのがおすすめです。背景を取り除くことにより見た目の情報がユーザに伝わりやすくなります。

「選択とマスク」と、 「 地道にペンツールでマスクする 」の2つを組み合わせています。
「選択とマスク」 のみだとまだちょっと厳しいときがあるので。

グラスの影を追加したり、前述したアクセントカラーを背景カラーに変更して「Seasonal recommendations」(夏のピックアップメニュー)のイメージに沿った太陽や水の雫型を追加したり調整します。

ようやく夏っぽく前向きでおいしそうに見えてきました。

部分的でもいいので別パターンの作成もおすすめです。

例えばクライアントの要望に忠実なパターントレンドを盛り込んだ大胆なパターンなどパターン分けすると交渉材料としてわかりやすく提案がスムーズに進みます。

また提出する予定が無くても自分はほぼ必ず何パターンか作成しています。
数パターン作成することで見出し一つとってもよりよい見せ方や修正点がはっきりしてきますし複数パターンからいいとこどりもでるからです。

まとめ

webサイトのデザイン時には必ずユーザーがページを閲覧することクライアントにプレゼンすること( 自分でプレゼンしなくても )などを想定して作成しています。

WEBデザインに限らず商品を手に取った人たちがなんらかのリアクションしているところを想像しながらつくるのは楽しいですよね。

次回は上のデザインにthree.jsを使用したオンマウスアニメーションを組み込んで作っていきます。

uhaha

一番重要なペルソナはクライアントのユーザー層なんですが自分の場合デザインを決定する担当者さんの好みも考えています。(てかまずここ抑えるw)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*