模写するサイト選びの楽しさ。#1day1design-02
きたる２日目。
やってまいりました、２日目。
実際に作業を始める際に、参考にするサイトを今回から。「pinterestで気になったデザイン」ではなく。「秀逸なデザインをまとめていただいているサイト様から、気になったデザインを選択」。
これがまあ「楽しい」。
選ぶにしても「デザイン的にかっこいい！」のはもちろんなんですが、「自分がまず作らない傾向」＋「ただ見栄えだけでなく機能的なデザイン」＋「とても扱いやすいUIを意識したレイアウト」＋「今どきの流行りをちゃんと抑えてる」…細々といえばもっとあるんですが、選ぶのがもうワクワクして楽しい。
ということで、２日目。
今回作成したデザイン。
ベースにさせていただいたデザイン様。
デザインルールについて。
・フォント：英字を２つ、ロゴ部分は「Amatic SC」、本文は「Rajdhani」。和文は「A-OTF 見出ゴMB31」
・色：#333333 , #CCCCCC
・margin諸々：8の倍数で調整、元も8？？所々不規則な数字だったので8で調整。
デザインを作ってみて。
・左のビジュアルの横幅。ウィンドウサイズ半分を閉めていると思ったらそうでもない。右のテキストエリア＋headerのほうが広い。この割合が気になる。
・元の英字のフォントを崩さない＋Google fontでマッチするのを探してて見つけた「Rajdhani」。フォルムがまず好み、そして数字が崩れていないのでとっても使いやすい。ウェイトも幅広くあるのでこれは良き。
・大胆なエリア、余白。それによって各コンテンツが引き立つシンプルならではのデザインが良き。シンプルなんだけど、記事サイトなのもあってかタイトルは結構サイズが大きい。それでも崩れないほどのバランスがとても良き。
こういうシンプルなサイトほど文字サイズなどを、添える、ぐらい小さくしてしまうデザイナーのエゴなんだけど（主にわたし）。これぐらい大胆にぐっと記事タイトルを大きくしているのは良き、とても良き。
・前回ので模写するさいに「色数減らすぞー」なんて思って調整してみたら、まさかの２色。そもそもこのサイト自体も色数ぜんぜんない。でも灰色＋黒の使い分けがいい。
何がいいか具体的なので言うと、罫線が目立たないんだけどしっかりエリアがわかるほどのバランス、良き。またメニューボタンの濃度もうるさすぎず、わかりやすい。良き。
終わりに。
模写するサイトをキャプチャして上に乗せて作業するんですが、スポイトで取った色と。検証ツールで調べた色が、違う。コレに結構戸惑う。
あとそのまま模写するのはもちろん良き、でも実際に手を動かしてみて変えてみる＝自分だったらこうしたほうがいいんじゃないか？、とやってみるのも、良き。というか、この積み重ねが自分の引き出しにつながると思い。
明日も頑張ろう、わたし。
この記事が気に入ったらサポートをしてみませんか？