Webデザイン勉強note：3月⑴

こんばんは！引き続き勉強しています。

アイキャッチは（特に意味もなく）プチ和風にしてみました。

荒波に立ち向かう小さい鳥が私です。笑
毎回ちょっと違う雰囲気で作っていきたい。
灰色格子柄は、完全に透過に見えますね…。今後は止めておこう…😅

卒業制作

ShelikesのWebデザインコース、卒業制作に取り掛かりました。

理想のカフェの集客LPを作りたいので、コンセプトやターゲットのプラニングをして、XDでワイヤーフレームを作成します。

・・こんな感じです。

何だか微妙…？

それっぽく情報を乗っけただけ、感が…。うーん。

ワイヤーフレームを作ったのも初めてなので、この前に何パターンか手書きで書いてみたのですが、それでもピンと来ませんでした。

デザインに落とし込む前だからかもしれない、ここで手を止めたくない！と思いPhotoshopでデザインにしてみました。

（右2つは参考用）

う〜〜〜ん・・・・

やりたいことの方向性は出してるつもりだけど、本当にこれで良い？
伝わるサイトになっている？見たい、行きたいと思える面白みがある？？

よく分からなってしまいました。。これ以上一人で進めても良く出来なさそうなので、もくもく会で見て頂くことにします！

※写真、店名は、理想のカフェのイメージで実在したものを使っています。閉店してしまっていて恐らく許可は難しいので、アップ時にはフリー素材に差し替え予定。

バナートレース

一つだけトレースしました。

（元）

（トレース）

こういう幾何学的なデザインも、とても可愛い！😚

・細かい図形は一つずつ作成しました。恐らく、効率の良いやり方は出来ていない…

今回作成したものをパターンにしておけば良いのかな？

・波線をPhotshopで作ろうとすると指定が良く分からず、イラレで作成すると一瞬でした。

・上の放射状の円と、縦線の破線（？）枠の円が作成できませんでした。
恐らくイラレで作るはず、ググり方が分からず…これも聞いてみようと思います。

モダンコーディング 

HTML5/CSS3 モダンコーディング の本をやっています。

スタンダードレイアウトの、今はメイン画面の途中まで。
こんな感じです。

一要素ずつ理解しながらコードを書け、（これは何だろ？）と思うプロパティや指定が出てきたら即座に説明が入る点がとても気に入ってます！

適切なサイズの指定方法（remや%）、なぜこの指定は<li>でなくその中の<a>にかけるのか、などなど、正に知りたい疑問を解説してくれて気持ちいいです！

擬似要素とか、よく分かっていなかった所もガンガン試せる😊

作業が不慣れなのを別としても、Webサイトを一つ作り上げるのって、すごく地道で大変な作業なんだな〜！というのを改めて感じます。