Webデザイン・マーケティング課 授業22日目

1-3時間目
プロトタイプwebデザイン

使用テキスト

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

P58-P88まで終了

■ワイヤーフレームの続き

まずは、昨日のワイヤーフレームの続きから。

ヘッダーやフッターのパーツなどを、メインコンポーネント用のアートボードに移動して、コンポーネントにしていく。その後、インスタンスを必要なところに配置していく。

その後、別ページ用のアートボードを作って、共通するパーツ以外を削除する。ここまででChapter2が終了

■トップページのデザインを作る

今度はワイヤーフレームを元に、デザインカンプを作っていく。

ワイヤーフレームの完成形のデータを使って作業していく。

・使う色を登録

まず最初に、使う色をカラーに登録する。

・ヘッダーを作る

メインコンポーネントのヘッダーを修正する。
メインコンポーネントを修正するので、正しく該当のレイヤーが選択されているかを、レイヤーパネルで確認しながら作業するのが大事。

メインコンポーネントを編集すると、全てのページのヘッダーが変更される。

・セクションタイトル、タイトル用のコンポーネントを作る

メインコンポーネント用のアートボードで、セクションタイトル用のコンポーネントと、タイトル用のコンポーネントを作る。

・ボタンのメインコンポーネントを編集する

すでに用意されているボタンのコンポーネントを編集する。ヘッダー同様、メインコンポーネントを編集しなくちゃいけないので、レイヤーに注意する。

・トップページを完成させる

作成したセクションタイトルやタイトルなどを、ワイヤーフレームから差し替えていく。

リピートグリッドの中を編集したりするので、こちらもレイヤーパネルをよく見ながら作業していく。

画像や文言を差し替えて完成。

■まとめ

とりあえずテキストのChpter3まで終了。

オンラインで、このテキストだと本当に淡々と進んでいく。

明日から下層ページのデザインに入る。