CSS デザインのワークフロー |CSS|

CSS デザインをする人に、面白い GIF アニメーションを紹介。

• MBoffin.com - Disignline - A Design Timeline

というブログ記事の Designline for the Open Air blog template (879k Animated GIF)。

覚え書きさんの説明が、ほとんど全てを言い表しているので引用。詳しくはリンクを辿って下さい。

このアニメーションでは、実際にブラウザのデフォルトスタイルしか適用されていない状態でページ上に記載されるべき内容を書き並べ、ソースオーダー（文書上における記述順序）を確定してから制作者スタイルを適用し始めている様子が確認できます。「文書構造ありき」のデザインフローを可視化すると、大雑把にはこれと同様の流れになるのではないかな？という意味で、なかなか興味深いです。

構造とデザインの分離については、言われ始めて久しい。でも、自分は本当にそれをやってきていたか? レイアウト・デザインの行程は行き当たりばったりではなかったか? 本当に自分が意図した通りの見た目になっているのか? そんな問いかけを、このアニメーション GIF はつきつけてくるような気がする。

このサイトも、実はこのアニメーションの行程方法を真似てフル・スクラッチで書き直してる。CSS でデザインする人も、したことのない人も一度は見て欲しい動画です。

via

• 覚え書き: CSSによる見栄えの実装作業の可視化

ref

• [2005-06-09] 「"デザイン(構造も)がかっこいいブログ@2chブログ板"まとめサイト」
• [2005-06-08] CSS Zen Garden