Оптимальный веб-дизайн. Часть 1

Оптимальный веб дизайн в моём понимании строится на простоте, эстетике и продающей эффективности.

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

Сколько клиентов привёл сайт? Насколько он повысил узнаваемость бренда? Увеличил ли он уровень доверия потребителя? За этими вопросами и скрывается результативность сайта, а тренды веб дизайна строятся на принципах эффективного маркетинга и налаживания диалога с аудиторией. Итак, перед вами первая статья цикла, посвященного эффективному сайтостроению. По ходу данного цикла мы ответим на актуальные вопросы и узнаем, как сделать так чтобы сайт работал, привлекал и продавал.

Пространство и минимализм.

Говоря о трендах веб дизайна, я люблю приводить в пример придорожные сельские магазинчики постсовесткого пространства. Как правило, в них очень тесно, ассортимент товара вывален кучей на старых прилавках, а забота о внешнем виде находится на последнем месте. Главное – чтобы было, а покупатель как-нибудь сам найдет, выберет, да купит. И покупатель находит, потому что у него или нет другого выбора, или нет времени. Ваш лендинг пейдж или любой другой сайт является цифровым аналогом такого магазина, но с одной оговоркой: рядом с вами (в ТОПе поисковой выдачи) есть ещё десятки аналогичных магазинов, и посетитель сам решит, с кем он будет работать. Очевидно, что он выберет такой сайт, где ему будет удобно, легко и выгодно, сайт, который удовлетворит его запрос. Поэтому законы современного веб дизайна базируются на технологиях продаж и создания положительного мнения у потенциального клиента. Начнем мы знакомство с этими технологиями с понятия о пространстве.

Всем нам нравится пространство. Выйдете теперь из воображаемого сельского магазинчика и переместитесь в современный бутик. Что вы видите? Замечали ли вы, что хорошо организованный супермаркет или салон состоит из пространств? Тут женский отдел, а там – мужской, здесь примерочные, здесь зеркала, а тут – касса. Каждая из таких локаций несёт свою функцию. Грамотно продуманное расположение функциональных пространств и их взаимосвязей создаёт удобство для покупателя. Это правило применимо и к современному веб-дизайну. Позаботьтесь о том, чтобы посетителю было легко и удобно находиться на вашем сайте. Сделать это просто: нужно всего лишь разбить каждую страничку на отдельные блоки, каждый из которых будет наполнен ценным содержимым. Контакты, торговое предложение, фотографии, статьи, акции, преимущества – так хочется поделиться все этим СРАЗУ. Но вспомните тот дряхлый магазинчик. Хотите ли вы вывалить на клиента всё и сразу, или создадите для него и его глаз комфортную среду, в которой будет приятно ориентироваться и совершать полезные (для него и для вас) действия?

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

Градации размеров шрифтов.

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

Снова возвращаемся к магазинам (да, это очень простой и знакомый для всех пример – веб дизайн в 2020 году опирается на схожие закономерности). Представим себе человека, идущего по торговому центру. У него в голове есть сформировавшаяся потребность, например, купить телевизор. Для простоты разобьем последовательность его действий на 4 этапа:

  1. Прежде всего, человек будет искать то место, где он удовлетворит свою потребность, и найдёт он такое место по названию магазина. В нашем случае – бытовая техника и электроника.
  2. Зайдя в магазин, он отыщет нужную категорию товаров из всего предлагаемого ассортимента.
  3. Далее наш герой будет присматривать себе телевизор, отталкиваясь от персональных предпочтений, таких как финансы, размер, цвет, бренд, и т.д.
  4. Завершающим этапом станет покупка и оплата на кассе.

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

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

  1. Самый крупный шрифт – уникальное торговое предложение. Человек прежде должен убедиться, что попал по адресу и сможет найти на сайте решение своих проблем.
  2. Крупный шрифт – подзаголовок, характеризующий товар / услугу, раскрывающий название, модель, географию, ценность.
  3. Средний шрифт – отличительные особенности, краткая история, преимущества.
  4. Мелкий шрифт – телефонные номера и адреса. Помните, что посетитель пришел для того, чтобы удовлетворить свои нужны, а не просто позвонить вам и оставить деньги.

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

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