Одним из важнейших факторов коммерческой успешности любого сайта является его дизайн. В первую очередь посетитель веб-ресурса обращает внимание на внешний вид портала. Если дизайн сделан плохо, то никакая функциональность, скорость работы и возможности сайта не заставят его воспользоваться интернет-магазином, лендингом, корпоративным порталом и так далее.
Человек в первую очередь выбирает «по обертке» – эта древняя как мир аксиома, актуальна сегодня и будет оставаться такой всегда. Привлекательный и грамотно разработанный дизайн в разы повышает лояльность клиента к бизнесу, позволяет ему получить именно то, что он ищет – быстро, качественно и легко. Ключевая ориентировка на потребности посетителей возникла в Рунете с середины 2000-х годов, когда отечественный веб-сегмент оказался перенасыщен сайтами, зачастую имеющими ужасный внешне и неудобный внутренне, визуальный интерфейс. Современный разработчик должен прилагать все усилия, чтобы понять, понравится ли проделанная ним работа посетителям. Именно поэтому профессиональный веб-дизайнер, в том числе понимает:
Естественно дизайнер не обязан знать вышеописанные отрасли досконально, однако важно понимание основ этих направлений для более эффективного взаимодействия с иными участниками разработки.
Основные этапы комплексной профессиональной разработки дизайна сайта:
Мероприятие | Обоснование |
Анализ целевой аудитории | Разработчик дизайна должен понимать, какая группа пользователей будет заходить на сайт чаще всего для дальнейшего максимального удовлетворения их потребности |
Выбор типа компоновки общего дизайна сайта | Что за сайт будет создаваться? Интернет-магазин, каталог товаров, обменник электронных валют, простая рекламная посадочная страница и так далее. |
Создание блок-схемы веб-ресурса | Внешние грубые черты будущего сайта с расположением основных его блоков |
Отрисовка прототипа | Удобное для заказчика отображение блок-схемы его будущего сайта |
Выбор общего стиля и композиции | Целостность, соразмерность и будущая функциональность |
Подбор цветовой реализации | Грамотный выбор цветовой палитры может привлечь дополнительное внимание посетителей |
Работа с типографикой | Шрифты как показатель читабельности будущего текстового контента, размещаемого на сайте |
Окончательная подгонка элементов и создание рабочего варианта дизайна | Полноценный рабочий вариант макета сайта для окончательного согласования с заказчиком |
Внесение правок, видоизменение компонентов при необходимости | Далеко не всегда с первого раза удаётся создать идеальный дизайн – этот этап необходим в обязательном порядке |
Финальная подготовка, презентация и сдача макета | Завершение проекта и передача его на верстку |
Процедура анализа потенциальной целевой аудитории будущего сайта производится на первичном этапе проектирования. Дизайнер перед отрисовкой прототипа веб-портала должен визуализировать для себя категорию людей, которые будут пользоваться ресурсом чаще всего.
В рамках анализа ЦА моделируется ряд персонажей со своими базовыми характеристиками:
Смоделированные личности должны явно и однозначно относится к сегменту потенциальных клиентов будущего сайта. На основании этих данных далее дизайнер подбирает составные компоненты веб-портала, о которых будет указано ниже.
Ключевая совокупная характеристика дизайна абсолютно любого сайта – это его целостность. В рамках визуализации основных блоков страниц необходимо неукоснительно придерживаться данного принципа, чтобы компоненты, модули и иные предусмотренные элементы соответствовали единому выбранному концептуальному стилю. Сочетать несочетаемое априори – это плохая практика, зачастую приводящая к значительному ухудшению юзабилити.
Создается ссылка синего цвета с подчеркиванием? Если да, то все остальные аналогичные атрибуты должны быть оформлены идентично. Необходима практичная кнопка с тенью на главной странице веб-портала? Для остальных элементов этого же типа нужно реализовывать аналогичное оформление.
Еще одним важным фактором профессиональной сделанной композиции является подчиненность. Размещение блоков и компонентов в макете должно быть обосновано, а не сделано «просто так», чтобы заполнить свободное пространство хоть чем-то.
Помимо целостности и подчиненности, дизайнер должен придерживаться жизненности. Компоненты сайта обязаны соответствовать тому, что потенциальный посетитель видит в реальной жизни. Создаваемые природой шедевры редко имеют много острых углов, поэтому современным дизайнерским трендом считаются сглаженные формы блоков и компонентов. Если все же интернет-портал должен содержать «агрессивные» детали, то последние нужно компенсировать более «спокойными» элементами.
В рамках создания общей концепции сайта эффективным способом привлечения внимания потенциальных клиентов является правильная расстановка акцентов. Последними могут выступать:
Ключевым требованием к акцентам считается их правильное ранжирование. Например, если потенциально популярная кнопка запроса основной услуги на главной странице сайта имеет синий цвет, то к дополнительным сервисам идентичные элементы делают менее контрастными.
Идентично поступают и в отношении заголовков. Для наиболее значимых из них выбирают крупные шрифты. В свою очередь подзаголовки более низких уровней делают меньше.
По аналогии дизайнер работает и с изображениями. Акцентными компонентами в данном случае выступают иллюстрации, картинки и иные типы статичной/динамичной визуальной информации, вызывающие эмоции у потенциального клиента.
Каждый человек воспринимает и представляет собственную психологию цвета – от рождения до самой смерти. Именно цвет вызывает широкую гамму подсознательных ассоциаций у пользователей сайта. Дизайнер может и должен пользоваться этим механизмом, чтобы использовать цветовую гамму для создания положительных впечатлений потенциальных клиентов веб-портала.
Перед формированием цветовой гаммы профессионал должен явно обозначить несколько ключевых моментов, которые существенно облегчают процесс выбора цвета.
Что должен делать создаваемый дизайн? Убеждать выполнить какое-либо действие? Информировать ненавязчиво и лаконично? Давать возможность максимально комфортного длительного общения? От ответа на данный вопрос зависит многое.
Существует ряд подтвержденных массовыми тестами фактов, свидетельствующих о сходном влиянии определенных цветов на подсознательные ассоциации у людей разных возрастов и пола.
Цвет | Потенциальные ассоциации |
Белый | Чистота и доброта |
Желтый | Солнечная энергия и радость |
Оранжевый | Экстравагантность и трансформация |
Красный | Смелость и опасность |
Розовый | Очарование, чувственность |
Фиолетовый | Фантазии, амбициозность, сексуальность |
Синий | Легкость и свежесть |
Зеленый | Умиротворенность и отдых |
Коричневый | Уют и внутренняя теплота |
Серый | Скромность, лаконичность, последовательность |
Черный | Стабильность, уверенность, фундаментальность |
В современной веб-разработке используется широкая гамма оттенков, которые могут изменять первичные ассоциации основных цветов. Правильная комбинация оттенков создает нужный дополнительный эффект в рамках единой концепции дизайна. При этом в значительной части случаев главная цветовая палитра сайта формируется на основе логотипа и корпоративного стиля.
Важными компонентами в рамках подбора цветовой гаммы являются фоновые цвета и вспомогательные тона. Первые снимают нагрузку с глаз при чтении, вторые же дополнительно размечают блоки/элементы друг от друга на страницах веб-портала.
Соразмерные и правильно подобранные шрифты улучшают юзабилити сайта. Типографика является важным фактором комплексного создания макета веб-портала, в особенности, если учитывать, что значительная часть представленного в интернете контента является именно текстом.
Основные типы шрифтов:
В свою очередь основные типы шрифтов локально объединены в семейства, имеющие различное начертание, но общий стиль.
Универсального метода для осуществления данной процедуры не существует. Индивидуальный подбор в первую очередь основывается на тематике веб-портала. Так для ресурсов с детской тематикой можно применять рукописную и акцидентную типографику. В свою очередь лендинг, предлагающий оказание юридических услуг, требует использования строгих гарнитур.
Ключевое правило после выбора шрифта – его преимущественное применение для всех заголовков/подзаголовков. Помимо этого не стоит перенасыщать будущий сайт большим разнообразием шрифтов – оптимальным показателем считается от 1 до 3 разновидностей типографики. Лучше изменять при необходимости начертание и вес выбранного варианта.
Цвет выбранного шрифта должен быть контрастным.
Не стоит забывать и о выигрышном расположении текстов. Современный тренд – использование правила внутреннее ≤ внешнего.
Разработка дизайна сайта – это комплексный и достаточно трудозатратный процесс. Если у вас нет профессионального опыта разработки макетов для веб-порталов – обратитесь к нам прямо сейчас!