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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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