Sponsored Link
前回はデザインルールの重要性を解説しました。
今回はいよいよFigmaを使ってウェブページデザインを作っていきましょう。
デザイン作業初回ですので、少しゆっくり進めたいと思います。
ウェブページデザイン作業は基本的に、別途作成した作成手順のページを確認しながら進めていきます。
作業の性質上、わからないまま進めてしまうと、あとから取り戻すのが極めて困難ですので不明点は必ず都度挙手してください。
学生の皆さんは気にするかもしれませんが、私は授業がストップしても全く問題ありません。
この記事の目次
Webページデザイン演習〜header・mainimg作成編〜
完成イメージの再確認
以前一度「専用デザインファイルの確認」を行いましたが、時間がたったので再度確認してみましょう。
今回皆さんがWebデザイン制作体験を行うページの完成図は以下です。
非常に基本的な構成のデザインですが、Figmaによるデザイン作業に最低限必要なスキルはほとんど入っています。
Webページデザイン作業開始
ではページデザイン作業を始めるため、Figmaのチームのプロジェクトから、自分の「Webページデザイン演習」ファイルを開いてください。
header作成編
ではまずはheaderの作成手順を見ながら作業を行いましょう。
以下のページをCtrl + クリックください。
mainimg作成編
次にmainimgの作成手順を見ながら作業を行いましょう。
以下のページをCtrl + クリックください。
本日のまとめ
いかがでしたか?実はFigmaでのデザイン作業は私もさほど経験がありません。
しかしながらPhotoshopやIllustratorに比べると驚くほど簡単で、すぐにページが出来上がってしまいました。
次回は続きで「service」のページデザインを行なっていきましょう。
