ページのデザインに挑戦!

こんにちは、コウノです。
ふたっぱさんでのインターンも残すところあと僅か・・・。
前々回から引き続き、
TOPページのデザイン制作を行っております。

今回は僕が作ったのを見て頂きながら
配色が与える影響などもをお伝えれできたらと思います。

まず今回の課題が「お母さんのためのマタニティ図書館」
頂いたワイヤーフレームを元にデザインを設計していきました。
僕の場合は、ほぼ、ワイヤーフレームの通りに取り掛かりました。

ふたば図書館_PCトップ
↑こちらがワイヤーフレームです。

○配色が与えるイメージの違いとは

「お母さんのためのマタニティ図書館」ということで。
どんな人が来るのか、年齢は何歳ぐらいかなど、色々考え
僕の中では30代の子供が一人いて、二人目を妊娠している女性。
市内在中の方をイメージしながら制作に掛かろうと思いました。

その後、参考になるようなサイトをいくつか見ました。
図書館ということで、図書館のサイト。
お母さんが対象ということで、産婦人科。
子供がいるということで、幼稚園などなど。

そして、テキストを嵌め込む部分に
僕が勝手に作り上げた架空のイベントなどを入れ込み。
どうにかこうにか、一度、形にしてみました。

それがこれです。

6-24-2
ん・・・・何かイメージと違う。

ふたっぱさんに感想を頂くと、
「迷いが見える。いっそのこと、産婦人科よりに配色を振り切ってみたら?」とアドバイスを頂きました。

僕はこの時、「図書館」というイメージに捕らわれ。
ピンクを多用し過ぎると、産婦人科みたいになるのかな?とビビッていたのですが。
よし、ピンクに振り切ってみよう!と。

前回のブログで載せたサイトなどを使い、配色を整えました。

それがこれです。

6-24-4

ものすごく整理されて見えるーーー!!!
配色の力でイメージがこれだけ変わるとは・・・。

○何か足りないと思ったときのヒント!

しかしこれだけだと何か物足りない気がしませんか?
僕は、何か一つ抜けているなあ~っと思い。
今度は色々と装飾を付けてみることにしました。

まずは「お母さん・子供」という題材から
手作り感っぽさをイメージして、
そこからページ全体がコルクボードに貼ってあるメモ帳のような感じにしてみよう!っとアイディアを膨らまし。

試行錯誤をしながら作成してみました。

6-24-1

ちょっと影などを付けるだけで、イメージが変わりました!

何か少し足りないなあ~っと思ったら
もう一個テクスチャを付けてみてください!
コレで少しボリューム感が出ると思います。
あと、今回初めに作成した青色の方も
配色を整えてみました。

6-24-3

見やすくなったと思いますが、どうでしょうか?
やはり、配色によってイメージが180度変わります。
そして物足りないときは、テクスチャを足してボリュームを出す。

一通り、形になってきたので、
次回からこのデザインを元にコーディングも開始していきます!
それでは。