WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

既存サイトのトレース|フルスクリーンレイアウト

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。
今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

今回のレイアウトのポイント
  • フルスクリーンでのグリッドレイアウト
  • ドミナントカラーを使ったデザイン
  • 可変のブロックに固定値のマージン
  • ある程度スクロールするとグローバルナビがページ上部に固定

などです。



作例
http://yachin29.webcrow.jp/bloom/


生徒の作例
http://yoshi1004.webcrow.jp/content/kaguya/


http://tkd27.webcrow.jp/responsive/designhotel/