# 008: Photoshopowanie wzorca modułu - CSS-Tricks

Anonim

Cała witryna będzie oparta na „modułach”. Każda drobiazg będzie dosłownie w pudełku (zarówno wizualnie, jak i ostatecznie w kodzie). Zaczynamy od modułu na najnowszy post na blogu na stronie głównej, ale wzorzec modułu będzie używany wszędzie. Poszczególne komentarze, obszary na pasku bocznym, jak „Sonda”, reklamy… wszystko.

Kiedy już mamy ten podstawowy moduł artykułu, pracujemy nad odrobiną typografii w nim. Używamy prawdziwego tytułu posta (dobry pomysł, aby uzyskać poczucie długości z czegoś prawdziwego), ale następnie używamy Lorem Ipsum (wzdycha!) Jako fragmentu (praktyczne).

Przedstawiamy kilka nowych czcionek. Nagłówki (w idealnym świecie) będą miały postać Whitney Condensed Bold, a kopia ciała będzie zwykłym Whitney.

Przedstawiamy koncepcję „małego kolorowego kwadratu” dla modułów. Wisi to przez długi czas w procesie projektowania, ale (jak widać na stronie, jeśli nadal korzystamy z wersji 10), ostatecznie zmienia się w kolorowy pasek.