Дизайн сайта — первое на что обращает внимание посетитель сайта. Неудивительно, что для многих заказчиков дизайн сайта является очень важным и ему уделяется много внимания и времени. При этом зачастую можно наблюдать ситуацию, когда заказчик месяцами меняет дизайн, а сайт при этом не работает, хотя уже мог бы приносить доход.
Как правильно делать дизайн сайта
Чтобы не терять время зря, нужно различать дизайн сайта и функционал. Функционалом называется все, что должно на сайте работать — добавление страниц, фотографий, товаров, поиск и т.д. А дизайн — это как все это будет выглядеть. Таким образом, на один и тот же функционал можно одевать разный дизайн, при этом контент сайта не изменится.
В первую очередь всегда следует делать функционал сайта, и только когда уже все будет правильно работать, приступать к дизайну. Почему? Потому что пока нет функционала, дизайнеру непонятно, сколько и каких блоков будет на странице, какие элементы должны присутствовать на формах, сколько будет полей, списков, кнопок и т.д.
Между тем, многие поступают наоборот — сначала рисуют дизайн, а потом начинают делать функционал сайта. В результате оказывается, что все нужно переделывать, потому что дизайнер написал название блока из 5 букв, а на практике оно из 25, и уже не влазит, на форме нарисовал 3 поля, а нужно 10, а слайдер товаров вообще не нарисовал, а он должен быть.
Если же дизайнер видит все необходимые элементы, ему гораздо проще оформить их в едином стиле и добиться нужного баланса. Поэтому правильно делать сначала весь функционал, а потом дизайн сайта.
Использование Bootstrap
Один из самых простых способов быстро и недорого получить красивый профессиональный сайт — использовать решение на Bootstrap. Сейчас это можно сказать промышленный стандарт, и существует огромное количество готовых шаблонов, на базе которых можно получить практически все, что угодно.
В этом случае привлекать дизайнера нет необходимости, так как заказчик сам может выбрать подходящий шаблон и сосредоточиться на функциональной части сайта.
С чего начать дизайн сайта
Сам дизайн обычно начинается с логотипа и фирменного стиля. Если сайт заказывает компания, у нее как правило уже есть логотип и фирменный стиль, который влючает в себя цветовую гамму и шрифты.
Если фирменного стиля нет, а кроме сайта предполагается еще и выпуск той или иной полиграфической продукции (визиток, буклетов, рекламных проспектов), настоятельно рекомендуется начать с разработки фирменного стиля. В этом случае можно будет обеспечить единый стиль всей рекламной и представительской продукции компании.
Если же требуется только сайт, можно обойтись одним логотипом (его разработку можно заказать любому хорошему дизайнеру). Логотип служит отправной точкой для дизайна всего сайта. Если в логотипе присутствует динамика, то и в дизайне сайта она должна быть поддержана какими-то элементами. Если логотип строгий, то и дизайн должен быть строгим, и наоборот, яркий веселый логотип предполагает такой же дизайн сайта.
Дизайн сайта лучше заказывать профессиональному дизайнеру. Например, Виктория Петрушинская работает с нами уже много лет, и у нее получаются красивые дизайны сайтов.
Если же бюджет не позволяет обратиться к профессиональному дизайнеру, можно просто выбрать образцы сайтов, которые нравятся, и показать. Мы можем сделать любой дизайн, но нам нужно понимать, что хочет увидеть заказчик.
Компоновка сайта
Компоновка сайта зависит от его функционала и количества элементов, которые необходимо разместить на странице. Чем меньше элементов, тем проще воспринимается сайт, поэтому надо стремиться по возможности сокращать количество форм, меню и других блоков.
Классическая компоновка предполагает размещение в верхней части сайта визуала (большой картинки, отвечающей тематике сайта), логотипа и верхнего меню. В верхнем меню следует размещать пункты общего назначения: На главную, О компании, Контакты, Партнерам и т.д. Их количество не должно превышать 5-7.
Дело в том, что ширина сайта ограничена, и разместить в одну строку много пунктов не получится. Кроме того, это затрудняет восприятие информации. В некоторых случаях используют большие раскрывающиеся панели или выпадающие меню.
В левой части сайта располагается левое меню. Высота сайта не ограничена, поэтому боковое меню может содержать неограниченное количество пунктов (которые также могут раскрываться и содержать два или три уровня). Следует помнить, что чем меньше уровней содержит меню, тем проще посетителю будет работать с ним, а поисковику — индексировать страницы. Избегайте трех уровней вложенности!
Средняя часть содержит основной контент и может быть выполнена в одну, две, три или четыре колонки (очень редко когда требуется большее количество колонок, в основном только для спеифических проектов).
Стандартный вариант предполагает трехколонную верстку, при этом в левой колонке обычно располагается меню, в средней текст, горячие новости или витрина товаров, а в правой — новости, статьи и публикации.
Количество колонок и их пропорции определяются тематикой сайта и количеством функциональных блоков. Например, для интернет-магазина обычно используют три колонки, а для блогов — две (в более широкой сам блог, а в более узкой комментарии).
Нижняя часть (ее еще называют «футер») завершает сайт и содержит вспомогательные элементы — нижнее меню (часто оно дублирует верхнее), кнопки социальных сетей, копирайты и т.д. Иногда нижнюю часть делают большой, если необхходимо разместить много ссылок.
Цветовая гамма сайта
Цветовая гамма сайта определяется логотипом. Будет ли текст темным на светлом фоне или светлым на темном? Практика показывает, что темный текст на светломфоне читается намного легче и воспринимется лучше. Поэтому для больших объемов текста рекомендуется использовать этот вариант.
Если же основным контентом сайта являются фото или видео, темный фон может оказаться лучшим решением. Для фотогалерей или игровых сайтов с обилием видеовставок черный фон используется очень часто.
Шапка сайта
Шапка сайта располагается в верхней части сайта. Обычно различаются шапки для Главной страницы и всех остальных. На Главной странице шапка может занимать много места и содержать различные визуальные эффекты, призванные привлечь внимание посетителя, например баннеры, слайдеры или просто красивый визуал.
На остальных страницах сайта уже основное место занимает сам контент сайта, а шапка делается меньше и служит для функциональных целей: на ней располагается верхнее меню, логотип, форма поиска или авторизации и т.д.
Жесткий и «резиновый» дизайн
Многие обращали внимание, что некоторые сайты всегда имеют фикксированную ширину (и на больших мониторах по бокам сайта остается пустой фон), в то время как другие растянуты на всю ширину экрана. Это и есть фиксированный и «резиновый» варианты дизайна.
На самом деле «резиновый» дизайн не дает особого преимущества перед фиксированным, так как объем информации который помещается в экран, примерно одинаковый при обоих типах верстки. Поэтому какой из этих вариантов выбрать — дело вкуса заказчика.
В любом случае следует помнить, что ширина сайта не должна превышать 990px. Это гарантирует, что сайт нормально поместится в экран с раазрешением 1024х768 пикселей (такое разрешение имеют планшеты и нетбуки).
Дизайн мобильной версии сайта
Правильно сделанный сайт будет нормально отображаться на любых устройствах, начиная с планшета. Но как быть, если требуется обеспечить его видимость при заходе со смартфона? Количество пользователей смартфонов уже огромно, и непрерывно быстро растет. Поэтому современный сайт обязательно должен иметь мобильную версию.
Мобильная версия сайта обеспечивает удобный просмотр сайта на маленьком экране смартфона и требует специальной верстки. Это и специальный формат HTML, и верстка в одну колонку, и специальные элементы навигации (выезжающие меню, большие кнопки, которые удобно нажимать пальцем и т.д.).
Создание мобильной версии сайта требует дополнительных расходов, однако практика показывает, что заходы с мобильных устройств составляют все большую часть от общего трафика. Те, кто может предоставить им удобную мобильную версию, получают очевидное преимущество перед теми, кто заставляет своих посетителей работать с обычной версией на маленьком экране.
Хороший и плохой дизайн
Не бывает хорошего и плохого дизайна. То, что нравится одному, может совершенно не понравиться другому. Вариантов дизайна огромное множество, и никто не может сказать, что этот дизайн хороший, а вот этот — нет. Существует два подхода к выбору дизайна сайта.
Клиент всегда прав
Хороший дизайн тот, который принят и оплачен заказчиком. Главное, чтобы дизйн понравился тому, кто его заказывает и оплачивает. При этом совершенно неважно, что на этот счет думает профессиональный дизайнер.
Многие дизайнеры и профессионалы не согласны с таким подходом и смеются над дизайнами, сделанными «под заказчика». Они отстаивают позицию, что дизайн должен быть в первую очередь ориентирован на посетителей сайта, а не на его владельца.
С другой стороны, заказчик сайта, как правило, намного лучше знает свою аудиторию, чем профессиональный дизайнер. И то, что нравится ему, скорее всего понравится и его клиентам. Ведь они находятся в одном информационном поле и говорят на одном языке.
И вовсе не факт, что навороченный современный дизайн, который приводит в восторг хипстеров, будет адекватно воспринят покупателями бетона, или металлопроката. Скорее всего, они намного увереннее будут себя чувствовать на сайте с привычным им классическим дизайном.
Лично я считаю, что имеет смысл прежде всего прислушиваться к мнению заказчика, так как лучше его никто не знает его клиентов и целевую аудиторию его сайта. Это экономит время, а практика показывает, что дизайн сайта, который нравится заказчику, хорошо воспринимается и его посетителями.
Доверяем профессионалам
Второй подход основан на идее, что заказчик не является специалистом в области дизайна, и должен положиться в этом вопросе на профессионала, так же, как при походе зубному врачу мы доверяем ему и не лезем с подсказками.
В этом есть смысл, но следует понимать, что в этом случае дизайнеру требуется сперва разобраться с предпочтениями целевой аудитории сайта, а это требует времени и дополнительных расходов.
Если бюджет проекта позволяет, то имеет смысл сделать несколько разных эскизов и провести тестирование на фокус-группе потенциальных посетителей сайта. В этом случае можно получить действительно объективные данные о том, какой дизайн будет лучше всего ими воспринят.
Проблема здесь как всегда одна — бюджет. Все хотят красивый эксклюзивный дизайн, но мало кто готов за это платить.
Мы всегда поможем своим клиентам с дизайном их сайтов. Мы слушаем своих заказчиков и стараемся учесть их пожелания.
