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

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

Составление структуры сайта (внутренней и внешней)

На основании технического задания и базы образцов создается внешняя структура сайта (список страниц и ссылки) и внутренняя структура первой страницы (список модулей сайта). Структура может быть создана в виде документа MS Word или схемы, созданной в растровом редакторе, и представлена клиенту на утверждение.

Рис.32. Структура сайта учебного центра.

2. Прототип

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

Прототип создается только на основании утвержденной структуры сайта. Если прототип создан без структуры, которая нужна клиенту, веб-дизайнера ждут долгие доделки прототипа. Пример прототипа, созданного по утвержденной структуре, смотрите на рис. 33.

Правила и особенности создания прототипа сайта вы узнаете в следующих главах.

Рис.33. Прототип сайта учебного центра

3. Веб-дизайн страниц сайта

Самый главный этап разработки сайта – это создание дизайна страниц по утвержденному прототипу. На самом деле программисты и разработчики сайта считают, что основной этап – это настройка «движка» сайта, но без веб-дизайна это не возможно. Попытки программистов создавать сайт без продуманной структуры и хорошего дизайна приводит к плохим результатам: по сайту видно, что нет дизайна, и он не является продающим.

Рис.34. Сайт, созданный без веб-дизайна

Веб-дизайн (от англ. web design) – отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.

Веб-дизайнеры делают следующие необходимые для сайта работы:

– проектируют логическую структуру веб-страниц;

– продумывают наиболее удобные решения подачи информации;

– занимаются художественным оформлением веб-проекта.

Конечным результатом веб-дизайна является макет сайта, созданный в растровом редакторе (как правило, в формате PSD), представляющий собой будущий внешний вид страниц сайта. Файл является многослойным, где почти каждая деталь дизайна – это отдельный слой, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи.

4. Дизайн мобильной версии

После того, как дизайнером создан макет первой страницы, делается веб-дизайн типовых страниц («О компании», «Статьи», «Контакты», «Каталог» и т.д.) с соблюдением общего стиля и цветового решения сайта. После типичных страниц веб-дизайнер приступает к следующему этапу: созданию дизайна мобильной версии сайта.

Дизайн мобильной версии начинается с первой страницы и создается в нескольких размерах: для мобильных устройств, для планшетов.

Здесь главное учесть правило адаптивности, так как мобильные устройства и планшеты имеют разное разрешение и размеры экрана. Поэтому веб-дизайнеры упрощают мобильный дизайн так, чтобы он корректно отображался на любых мобильных экранах. При этом отдельные элементы укрупняются с учётом маленьких экранов (например, текст большего размера; заголовки, логотип, иконки – укрупненные).

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

И только после того, как создана мобильная версия дизайна сайта – его передают для дальнейшей работы программистам.

Рис.35. Дизайн модуля «Оплата» в мобильной версии

5. Подготовка дизайна сайта к вёрстке

После того, как сделан веб-дизайн, его разработчик должен передать файлы дизайна сайта верстальщику или программисту (часто это один человек) для того, чтобы веб-дизайн был реализован как сайт в сети Интернет. Может так быть, что веб-дизайнер сам создаёт сайт по своему дизайну, если он обладает знаниями веб-программирования или реализует его на конструкторе сайтов.