【Webデザイン模写】10月-2 まとめ
成果物
スクリーンショット
動画
続:
— ふーしゃ@web (@fuchsia_84) 2019年10月23日
きょうはスマホ版🙌
スライダー複数配置したプロトタイプはじめて作ったり、文字サイズや行間、改行位置など細かいところも考えて変えてみた。
制作⏰: 2.5時間
月末まで、1週間でコーディング目標💪#今日の積み上げ #XD #Webデザイン模写 pic.twitter.com/aGxN3aLKNn
制作期間
10/22~10/23 合計6.5時間
学習項目
XD
復習
- 自動アニメーションでスライド作成
- PC版XDデザインカンプを模写してコンポーネント生成
- 自動アニメーションでグローバルナビ/トグルのアニメーション作成
new!!
- 複数のスライドを持つプロトタイプ作成
- フッターのレスポンシブデザイン
まとめと感想
先日に引き続き、Webコーディング模写で使用したPC版デザインカンプから、
タブレット版とスマホ版のデザインを自作。
今回は初級編で、コンテンツ量やロゴ配置が増えている。
ちづみさんnote初級編
デザインの工夫
前回と同様、レスポンシブ対応にはトグルボタンで開閉するグローバルメニューを用いた。
コンテンツ量が多くただ縦に一列に並べると非常に縦に伸びやすいので、
スライドを複数導入し、さらに文章量と色味から画像の上に文字を配置させた。
XDでの再現
前回と同様、はじめはPC版XDをXDで模写し、
そこからパーツをもってきて、細かいところに修正を加えた。
前回よりもコンテンツ量が増えたこともあり、
そのままレスポンシブ対応で拡大縮小させると位置や大きさに小数値をもつことが多くなって扱いづらかったので、工夫が必要だった。
今後
11月第1週目(10/28~11/2)の前後、1週間程度でコーディング予定。
