Этапы создания дизайна сайта

Начинаю работать над созданием серии уроков по разработке дизайна и верстке их в шаблоны CMS.

По многочисленным вопросам подписчиков, которые в основном новички и не способны найти нужную информацию в Google. Но тем не менее мне это также интересно, даже неплохая идея появилась, но об этом позже.

Небольшое предисловие прежде чем я начну обучать вас делать дизайн любого сайта, от его задумки до окончательной доводки.

Для себя я лично выделил следующие этапы создания веб дизайна сайта, которых я придерживаюсь в последнее время, – потому что я делаю очень много шаблонов для DLE.

Этапы создания дизайна сайта

1. Подготовка. Образно в голове представляем, что хотим увидеть на сайте. Мы же не будем делать того, что даже не представили?

2. Наброски. Желательно на бумаге набросать предварительные элементы сайта, такие как шапка, блоки, подвал и центральную часть. В основном я делаю классически установившийся трех-колоночный шаблон DLE, такой как вы видите на рисунке ниже. Множество сайтов на DLE имеют подобное размещение блоков, хотя это не обязательно.

3. Рисование макета сайта. По тематике нашего сайта в фотошопе рисуем макет, или же можно заказать на стороне у дизайнера. В нынешнее время за это придется заплатить 20-100 долларов. Я для себя делаю сам.

4. Резка макета на кусочки. Далее нарисованный макет режем на мелкие кусочки, чтобы потом из этих кусочков сверстать html-страницу.

5. Верстка страницы. Из кусочков нам придется собрать цельную html-страницу, которая впоследствии и будет на нашем сайте в качестве его дизайна.

6. Резка html-страницы. Любой шаблон CMS состоит из нескольких файлов – темплейтов, каждый из которых отвечает за вывод кусочка сайта. Например темплейт shortstory.tpl в DLE отвечает только за вывод короткой новости на сайте. Реально я совмещаю 6-й и 7-й пункты вместе.

7. Создание шаблона CMS. В этом пункте мы собираем шаблон по кусочкам html-кода, вырезаем из сверстанной ранее страницы необходимые кусочки кода. Все шаблон готов и дизайн сайта тоже.

Осталось только установить созданный шаблон на сайт и радоваться своим успехам. Но для всего этого надо знать HTML, CSS, Photoshop (минимальные знания – копирование, вставка) и естественно CMS DLE. Здесь нет ничего сложного.

Из HTML мы будем использовать всего несколько тегов, такие как div, a, br, h1, h2, img, span. В CSS коде буду использовать ограниченный набор свойств – padding, margin, width, height, border, background, font, color и еще десяток других.

Если честно я владею фотошопом не очень, знаю простейшие операции копирования, вставки, работу со слоями, параметры наложения слоя и меньше половины инструментов.