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

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

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

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

2. Прототип

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В любом случае, при передаче веб-дизайна в разработку сайта, необходимо соблюсти некоторые правила:

– Удалить из файла с веб-дизайном всё лишние (скрытые и пустые слои, черновые слои и т.д.).

– Сохранить дизайн сайта в формате PSD (родной формат программы Фотошоп), с разрешением 72 dpi, в цветовой модели (режиме цвета) RGB.

– Сделать предварительную «нарезку» сайта на фрагменты. Для этого в программе Adobe Photoshop есть инструмент, который называется «Раскройка».

Рис.36. Нарезка веб-дизайна на фрагменты

Нарезка сайта требуется не всегда, часто программисты сами «нарезают» веб-дизайн, как им удобно. Но всё же, веб-дизайнер должен уметь это сделать по первому требованию.

6. Вёрстка и реализация сайта, наполнение контентом

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

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

Заполнение сайта материалами

После того, как верстальщик и программист сделали сайт, наступает этап заполнения контента, то есть, заливки на сайт товаров из каталога, текста, статей, фотографий, видеороликов, файлов для скачивания и т.д.

Заполнением контента через административную часть сайта может осуществляться заказчиком (или его сотрудниками), веб-дизайнером или программистом по договоренности с заказчиком.

На этом же этапе на сайт размещаются СЕО-фразы (ключевые слова), соответствующие статьям на сайте.

Ключевые слова размещаются на сайте в специальных тегах:

– В тегах заголовка.

– В тегах мета описания.

– Мета-теги ключевых слов.

– В подзаголовках.

– В содержание страницы.

– В тексте ссылки.

– В Breadcrumbs. «Хлебные крошки» (breadcrumbs) – это элемент навигации на сайте или в программе. Он отображает маршрут от стартового элемента до места пребывания пользователя и позволяет легко вернуться к предыдущим разделам.

– В атрибутах (тэгах) ALT и TITLE.

– В именах встроенных файлов.

Последним этапом перед реализацией (запуском сайта) будет проверка