Внимание к деталям, или как улучшить дизайн

«Встречают по обложке» — это правило отлично характеризует мир интернет-ресурсов. Хотя из поиска люди обычно переходят к заинтересовавшему содержанию, однако некорректный вид споро оттолкнет.

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

Таким образом, проектирование дизайна интернет-ресурса — важный этап для развития бизнеса в сети Интернет и повышения маркетинговых показателей.

Разберем конкретные лайфхаки о том, что поможет на этом пути.

Цветовое решение и яркость

В первую очередь внимание привлекает общий визуальный настрой дизайна. Речь идет о цветовом решении. Для солидной компании превращать интернет-ресурс в набор массы ярких пятен, когда один элемент отвлекает от другого, — негативное решение.

Рекомендуют на сайте ограничивать цветовую палитру. Как правило, хватает двух-трех главных цветов, максимум четырех. Плюс белый и черный. Выбирайте в качестве основы цвета компании или оттенки, гармонирующие с ними. Это позволит избежать создания эффекта визуального сумбура.

Если так хочется использовать массу «красок», то это вариант для конкретной единичной рекламной кампании, баннера, но не более.

Не менее чем цветовая композиция, на интернет-ресурсах важно корректно настроить тон и яркость. Темный шрифт на светлом фоне или наоборот — единственные варианты, при котором контент останется читаемым и не вызовет раздражения. Причем интересным решением считают при наличии в цветах компании достаточно темного цвета использование его как раз вместо базового черного.

Фон и «воздух»

Неоднократно писали, что на страницах сайта требуется как размещать максимум информации, удовлетворяя запросы клиентов в информации, так и грамотно ее гармонизировать с фоновой составляющей. Фон — это «воздух», который требуется в каждом случае. Даже полезный контент, перекрывающий более 70% фона, удручает, создавая ощущение перенасыщенности.

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

Важным параметром становится не только наличие фона, но и его цвет. Регулярно владельцы бизнеса, стремясь выделится, разрабатывают дизайн с темным фоном. С одной стороны это обосновано, ведь темная тема в социальных сетях и на мобильных устройствах характеризуется устойчивой популярностью. В этом вопросе опирайтесь на мнение фокус-группы представителей целевой аудитории. Не каждый человек предпочтет темный вариант.

Если кажется этот вопрос критичен, то добавьте функционал выбора темного или светлого фона. Это затратней, но и продуктивного взаимодействия больше.

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

Вариативность шрифта

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

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

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

Изображения

Картинки хороши тем, что однозначно притягивают к себе взгляд. Поэтому на сайтах требуются, но в подходящих местах и в ограниченном количестве.

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

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

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

Особняком стоит использование трехмерных изображений и 3D-объектов. Их размещение набирает популярность среди дизайнеров и владельцев бизнеса. Однако увлекаться масштабными 3D-элементами негативно. Рекомендуем размещать подобные изображения на страницах редко и небольшого формата. В противном случае фокус внимания чрезмерно перетягивается на них с прочей информации.

Анимированные области

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

Хотя профессиональный дизайнер рассчитает добавление анимированного объекта таким образом, чтобы подчеркивал общее содержание, а не перекрывал его. Этого добиваются за счет настройки параметров: скорости смены информации, длительности отображения и проч.

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

Уровни просмотра и фрагментирование

Речь пойдет о выделениях на страницах интернет-ресурса условно дальнего и ближнего планов.

На ближний уровень по умолчанию выводят принципиальные блоки — навигация, иконки и проч. Дальний уровень информации воспринимается хуже и за счет отдельных умственных усилий, поэтому в массе сайтов его заменяют однотонным фоном. При разумном подходе и это уровень играет роль акцента.

Время от времени дизайнеры выводят крупные блоки дальнего плана вперед. Это делается намеренно, если позволяет концепция дизайна сайта. Например, для лэндингов или страниц с фрагментированной крупными блоками информацией.

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

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

Резюме

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

Уделите этому этапу значимое внимание и время. Экономия в вопросе дизайна вызывает значимое отторжение у посетителей. Также не стоит и гнаться за каждой модной тенденцией, чрезмерно выделяясь и перегружая дизайн, что цветом, что информацией. На длинной дистанции оба варианта негативны.

Интернет-агентство U-sl+Мирмекс уделяет созданию и изменению дизайна интернет-ресурсов наших клиентов ощутимое внимание. Это первая линия взаимодействия «клиент — компания», поэтому каждый элемент и даже мелочь важны для создания общей комфортной для взаимодействия картины.

С нами каждый ваш посетитель останется довольным увиденным!