こんにちは、コウノです。
ふたっぱさんでのインターンも残すところあと僅か･･･。
前々回から引き続き、
TOPページのデザイン制作を行っております。
今回は僕が作ったのを見て頂きながら
配色が与える影響などもをお伝えれできたらと思います。
まず今回の課題が「お母さんのためのマタニティ図書館」
頂いたワイヤーフレームを元にデザインを設計していきました。
僕の場合は、ほぼ、ワイヤーフレームの通りに取り掛かりました。
↑こちらがワイヤーフレームです。
○配色が与えるイメージの違いとは
「お母さんのためのマタニティ図書館」ということで。
どんな人が来るのか、年齢は何歳ぐらいかなど、色々考え
僕の中では30代の子供が一人いて、二人目を妊娠している女性。
市内在中の方をイメージしながら制作に掛かろうと思いました。
その後、参考になるようなサイトをいくつか見ました。
図書館ということで、図書館のサイト。
お母さんが対象ということで、産婦人科。
子供がいるということで、幼稚園などなど。
そして、テキストを嵌め込む部分に
僕が勝手に作り上げた架空のイベントなどを入れ込み。
どうにかこうにか、一度、形にしてみました。
それがこれです。
ん・・・・何かイメージと違う。
ふたっぱさんに感想を頂くと、
「迷いが見える。いっそのこと、産婦人科よりに配色を振り切ってみたら？」とアドバイスを頂きました。
僕はこの時、「図書館」というイメージに捕らわれ。
ピンクを多用し過ぎると、産婦人科みたいになるのかな？とビビッていたのですが。
よし、ピンクに振り切ってみよう！と。
前回のブログで載せたサイトなどを使い、配色を整えました。
それがこれです。
ものすごく整理されて見えるーーー！！！
配色の力でイメージがこれだけ変わるとは・・・。
○何か足りないと思ったときのヒント！
しかしこれだけだと何か物足りない気がしませんか？
僕は、何か一つ抜けているなあ～っと思い。
今度は色々と装飾を付けてみることにしました。
まずは「お母さん・子供」という題材から
手作り感っぽさをイメージして、
そこからページ全体がコルクボードに貼ってあるメモ帳のような感じにしてみよう！っとアイディアを膨らまし。
試行錯誤をしながら作成してみました。
ちょっと影などを付けるだけで、イメージが変わりました！
何か少し足りないなあ～っと思ったら
もう一個テクスチャを付けてみてください！
コレで少しボリューム感が出ると思います。
あと、今回初めに作成した青色の方も
配色を整えてみました。
見やすくなったと思いますが、どうでしょうか？
やはり、配色によってイメージが180度変わります。
そして物足りないときは、テクスチャを足してボリュームを出す。
一通り、形になってきたので、
次回からこのデザインを元にコーディングも開始していきます！
それでは。