第8〜9回は、Webサイトデザインのコラージュ実習となります。
参考サイトを元に『どう組めば、このデザインにたどり着けるのか』、限られた時間の中で挑戦してみましょう。
目次
練習用 参考サイト
STUDIO DesignAward2021 – ポートフォリオ部門ノミネートサイト
TANT GRAPHICS
https://designaward2021.studio.design/nominees/tantgraphics
STUDIO DesignAward2022 – SHIFTBRAIN賞
湘南クラウド会計事務所コーポレートサイト
https://designaward2022.studio.design/website/shonan-cloud
制作時のポイント
- まずは構成を真似てみよう
- そっくりそのまま同じではなくても良い=ブロック構成まで厳密に再現する必要はない
- シングルページ テンプレートの中から、似たレイアウトを探してみて組んでみよう
- 使用テンプレートは各々にお任せします(使用して良いテンプレートか不安な人は聞いてくださいね)
- これまでの授業で、最初になにを行ったか?思い出してみよう
- 配置する画像は「Unsplash」でOK
- 自分の作品を配置しても◎(課題実習時のイメージも湧いて一石二鳥!)
- 動く文字/マウスホバー時のアニメーション/出現時のアニメーションの再現は不要
- レイアウト(構成)を真似ることが最優先
- サイト全体のカラーリングは基本的に参考サイトのカラーで
- 検証ツールでカラーコードを確認すること
- 構成がひと通り出来たら…
- 自分なりのアレンジを追加してみよう
- 並び順、重ね順、整列の変更でもアレンジ出来るかも?
- カラーリングを変更する場合は、統一感のあるカラー構成を行うこと
- ホバー時や出現時のアニメーションに挑戦しよう
- 自分なりのアレンジを追加してみよう