Постановка задачи и создание проекта будущего макета.
Прежде чем приступать к дизайну сайта, необходимо определить его специфику и тип. Дизайн главной страницы должен целостно представлять компанию или продукт и рекламировать деятельность, товары и услуги. От сферы работы организации и вида сайта (одностраничник, интернет-магазин, визитка, портал) напрямую зависит специфика разработки макета и дальнейшие технические тонкости.
Акценты при создании дизайна сайта расставляются по-разному в зависимости от масштаба проекта. Как правило, дизайн сайта – «средней» компании требует рабочего времени одно дизайнера. Если в отрисовке участвуют несколько человек – необходимо создать своеобразный «гайдлайн», которые позволить стандартизировать макеты.
Для того чтобы описать системно описать дизайн – возьмем в качестве примера корпоративный сайт организации с 15 сотрудниками.
Опустим технические моменты, такие как: создание сетки и подробности отрисовки макета в фотошопе. Основное внимание обратим на очередность работы и ключевые проблемы, с которыми сталкиваются разработчики.
Системный подход к разработке макета позволит достичь наиболее точного результата в достаточно короткие сроки. Дизайн сайта — это еще не сам сайт, но максимально приближенный к реальности внешний образ будущего ресурса.
Макет должен соответствовать требованиям верстки (резиновая, статичная, адаптивная). При открытии страницы на большом экране полезное пространство экрана не должно быть резиновым, растянувшись на всю ширину монитора, страница станет не читабельной, а мелкие изображения потеряются на ее фоне. На больших мониторах (более 1280 пкс) страница должна иметь фиксированную ширину, а на маленьких мониторах — пропорционально сжиматься.
Дизайн сайта должен быть в меру лаконичным, акцент на четкую и грамотную подачу информации. Страница состоит из блоков, каждый из которых имеет свою функциональную нагрузку.
Дизайн сайта: бриф и коммуникация
Для успешной реализации задачи – необходимо составить понятное всем участникам процесса техническое задание. Важно наладить эффективную коммуникацию и оперативную обратную связь. Случается, что представители заказчика не вполне владеют знаниями в области веб-технологий. Этот недостаток компенсируются опытом и внимательностью исполнителя, который объяснить специфику.
Заполнить бриф на дизайн сайта лучше совместно с ответственными за проект специалистами, а затем «пройтись» по всем пунктам с исполнителем. Это позволить более точно обозначить цели и задачи и определить и заполнить «пробелы», если они присутствуют.
Разработка технического задания отнимет в среднем – от нескольких часов до недели.
Дизайн сайта: эскиз
Для начала определяемся с размером будущего сайта и решим, какие цвета будут использованы в макете. Цветовая гамма зависит от многих факторов. Если у вас есть логотип и другая айдентика, то цвета должны сочетаться, а если логотипа нет, то руководствуемся существующей «отраслевой», тематической палитрой и ее производными.
Далее определяем целевую аудиторию, средний возраст, предпочтения, уровень заработка и, исходя из этих данных, делаем выводы о поведении пользователей. Молодая аудитория лучше воспринимает современный и легкий дизайн, старшее поколение отнесется с доверием к более традиционным решением с прозрачной структурой и хорошо читаемым текстом. Беспроигрышный вариант – это светлые в качестве фона, а темные для – плашек блоков. Это создает контраст и акцентирует внимание на важных элементах.
При разработке дизайна важно учитывать функциональные характеристики каждого элемента: грубо говоря – понимать, какую задач он решает, и насколько дизайн помогает решать ее эффективнее. Рассмотрим основные элементы страниц.
Элементы айдентики.
Обычно логотип располагается в левом верхнем углу, это обосновано тем, что именно сюда «бросает» взгляд, заходя на сайт, пользователь. В процессе создания макета может потребоваться доработка логотипа (адаптация к сайту) или его создание с нуля.
Хорошо, когда элементы фирменного стиля – используются в дизайне сайта. Помимо цветовой палитры можно использовать – шрифты, паттерны, плашки. Логотип также принято размещать в подвале сайта; его можно использовать в качестве копирайта – на оригинальных фотографиях, права на которые принадлежат клиенту.
Делаем шапку сайта.
Шапка или хедер — центральный элемент макета будущего сайта. Она должна быть функциональной, так как это – первое, на что обращает внимание посетитель страницы. Традиционно шапка содержит дескриптор (краткое описание деятельности компании), контактную информацию, логотип.
Фон шапки напрямую зависит от общей цветовой схемы страницы и не должен быть очень ярким, так как иначе он будет излишне фокусировать внимание, а остальные блоки на фоне станут менее заметны.
Чтобы разместить в шапке сайта как можно больше полезной для пользователя информации, в него часто включают дополнительные элементы, повышающие информативность и функциональность.
Например, в качестве фона можно использовать слайдер, с фотографиями и текстом. Такое дополнение позволяет наиболее эффективно распределять пространство сайта. За счет использования слайдера, в несколько раз увеличивается объем информации на первом экране.
Дополнительным решением для улучшения функциональности шапки будет размещение на ней ссылок на внутренние страницы сайта (меню или кнопки). Зачастую в хедере располагают форму регистрации, входа в личный кабинет или ссылку на страницу обратной связи.
Не следует перегружать шапку информацией. Правильней будет расположить ссылки, оформленные в виде кнопок, иконок.
Дополнительные графические объекты на хедере – популярная тенденция последнего времени, они могут стать изюминкой вашей шапки и придадут ей функциональности и информативности.
Дизайн сайта: навигация
Главное меню или навигационное меню позволяет пользователю переходить на внутренние страницы сайта. Оно может быть – вертикальным, горизонтальным, многоуровневым.
Для меню подойдут простые схематичные блоки, главная задача — это определение стиля. Если аудитория респектабельная, то лучше использовать простые формы и острые углы, это добавит строгости.
Выбираем наиболее подходящее место для расположения меню. Оно может быть расположено над хедером, внутри хедера или под ним.
Определяемся с высотой и шириной меню, они зависят от информации, которая будет в нем располагаться. Ширина меню, выступающего в виде отдельного модуля или являющегося продолжением шапки, равняется ширине шапки или макета.
В процессе разработки — экспериментируем, ищем подходящее именно для конкретного макета расположение меню, находим ту позицию, в которой оно будет смотреться выгодно и обращать на себя максимум внимания пользователя. Параллельно разрабатываем «активны» дизайн сайта — рисуем реакцию кнопок на нажатие, наведение курсора.
Новостные ленты и футер
Определяемся с примерным расположением новостного блока и рисуем границы футера.
Темный футер удлиняет страницу, делая ее тяжелее, и создает баланс всего дизайна в целом. Шапка и футер выполняются в единой стилистике.
В «подвале» сайта обычно размещают копирайта, счетчики, формы обратной связи. Здесь допустимо дублировать навигационное меню, а также размещать карту сайта и ссылки на страницы ресурса, которые необходимы для его более эффективного продвижения в поисковых системах, но не представляют особого интереса для пользователей.
Существуют различные варианта оформления новостных блоков – наиболее распространенная концепция включает в себя: заголовок материала, дату публикации, анонс, ссылку на весь материал. Правильно дополнять новости изображениями – тогда подача материала будет более интересной.
Дополнительные блоки
В качестве дополнительных блоков часто используемых, на корпоративных сайта, встречаются:
- Подписка на рассылку – актуально для тренинговых компаний, обучающих центров, которые готовы периодически отправлять своим посетителям полезную информацию
- Акции и специальные предложения – этот блок встречается как в формате слайдеров и каруселей, так и как пункт меню или кнопка
- Фотогалерея – служит для презентации информации о выполненных проектахтзывы — обязательно должны сопровождаться ссылкой на форму отправки сообщения
Дизайн сайта: удаляем лишнее.
Убираем все лишнее, что отвлекает внимание посетителя сайта, увеличивая полезное пространство страницы, делаем дизайн проще и техничней. Дорабатываем навигацию сайта – чтобы «стандартизировать» поведение похожих групп элементов. Здесь прорабатываются детали – форматирование текстов, типографика.
Дорабатываем макет и исправляем ошибки. Это простой, но ответственный этап, который требует особого внимания. Проводить доработку макета стоит через определенное время после завершения работы над макетом. На свежую голову оценивать работу всегда лучше.
На этапе доработки производим финальную коррекцию цветов, относительно цветов логотипа или корректируем цвета логотипа, если это возможно.
Теперь макет главной страницы сайта выглядит завершенным, вся информация читается легко и доступно. Дизайн техничен, лаконичен и информативен.
Главная цель создания дизайна главной страницы сайта – это добиться визуально легкого, не перегруженного, но информативного макета с четким стилем и простыми формами. Правильно сделанная главная страница позволяет легко и быстро отрисовать внутренние страницы.
Готовый дизайн сайта в формате psd (по слоям) – структурируем для более удобной работы верстальщика, прикрепляем использованные в макете шрифты, архивируем и отправляем клиенту.