Мне нравится мой способ делать вещи:
- Photoshop (или другой графический редактор) для создания визуального дизайна, которым я доволен. Когда я закончу с большей частью этого, перейдите к 2. Это включает, по крайней мере, основные формы, цвета, шрифты, позиции и размеры. Он также может содержать пример содержимого с правильным визуальным оформлением.
- Написать очень простую разметку: элемент заголовка, область содержимого, базовая навигация, нижний колонтитул, боковые панели и т. Д.
- Напишите базовый CSS и примените самые общие изображения из файла Photoshop (для Искусственных столбцов или других "больших вещей").
- Написать больше разметки: добавить больше деталей. Добавьте пример содержимого, чтобы увидеть, как будут выглядеть все типы элементов, которые вам нужны.
- (Если применимо) Снова войдите в свой редактор изображений и получите более детальные изображения.
- Напишите больше CSS - стиль того, что вы написали в 4. и что вы извлекли из файла изображения в 5.
- Повторяйте 4-6, пока не закончите.
После того, как макет и визуальный дизайн более или менее сделаны, начните интегрировать свою CMS, Blog Engine или все, что вам может понадобиться.
Это хорошо работает для меня. Я не всегда могу закончить все детали в Photoshop, прежде чем я продолжу писать разметку или CSS, но обычно это то, что я делаю. Моя рекомендация - начать с общего уровня и перейти к более подробным деталям.
Возможно, у вас есть идеи о том, как выглядят детали на вашей странице. Если так, создайте их рано во всех деталях. В противном случае вы просто забудете это. Затем создайте вокруг него более общие вещи и продолжайте, как обычно.