Design to Code No.01：デザインをコードにする実践ステップ | Webtraining　- Webトレは、初心者から実務までのWeb学習トレーニング

Figmaを使ったワイヤーフレームと、実際のWebサイト制作で用いるコンセプトシートをもとに、
「考える → 設計する → コーディングする」 という一連の流れを体験できる実践教材シリーズです。

DesigntoCode01：ワイヤーフレームからの実装トレーニング

STEP

Figma / XD / PowerPoint / Illustrator / Photoshopでワイヤーフレームを作成します。

STEP

ワイヤーフレームを見ながら、セマンティクス要素を正確に反映できるようHTMLファイルを作成します

STEP

ワイヤーフレームを見ながら、HTML後のCSSコーディングを行います。

STEP

Figma / XD / Photoshopで、デザインカンプを仕上げます。写真の挿入・全体のバランス・コンセプトシートとの連携を考えます。

STEP

デザインカンプ通りにCSSが作成できるかを行います。