Блог

Меня зовут Виктория Набокова. Я веб-дизайнер. И сегодня мы рассмотрим правильный дизайн сайта, на конкретных примерах. А также рассмотрим, что вообще такое “дизайн сайта”.

Потому что, на моем опыте, люди часто понимают этот вопрос неправильно. Если вы думали, что пример хорошего дизайна сайта – это когда он красивый, то срочно читайте эту статью.

Зачем работать над дизайном сайта? {Единственный шанс быть всегда на плаву}

Настали новые времена. Сегодня люди стали грамотнее. На рынке появляется все больше качественных дизайнерских сайтов и лендингов (сайтов-визиток).

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

Достаточно рассмотреть пример дизайна сайтов, в нише ресторанного бизнеса. Те, кто не вкладывал время и силы в онлайн – проиграли. Они либо закрылись, либо платят большие комиссии агрегаторам. 

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

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

Но, разумеется, не все сайты хорошо работали. Кто-то забывал о создании версии для телефонов. Другие забывали об удобстве пользователя, который хотел заказать ужин, но не смог разобраться, как это сделать.

Именно такие вопросы и решает правильный дизайн сайта. А вовсе не красивая картинка. Если вы думали, что хороший дизайн, это когда “все очень красиво”, то спешу вас поправить. Это совсем не так.

Дизайн сайта примеры {Что важно в дизайне?}

По данным американского агентства HubSpot, только 10% посетителей сайтов интересуются их красивым оформлением. При этом 76% пользователей просто хотят как можно быстрее найти на сайте необходимую информацию.

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

Потому что пример правильного дизайна сайта (внимание), это когда покупателю легко и удобно пользоваться им.

Даже если вы продумали структуру сайта, которая будет вести человека по воронке продаж ниже и ниже. Написали контент, закрывающий возражения.

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

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

Именно он анализирует поведение пользователей и проектирует сайт так, чтобы помочь им сделать то, чего они хотят. Купить товар, узнать новости или найти ответы на вопросы.

Каким бы качественным ни был ваш контент, необходимо преподать его в такой форме, чтобы людям хотелось его потреблять. И, поверьте, сделать это не так-то просто.

Шаг 1 {Упростите восприятие продающего текста сайта}

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

В речи мы постоянно останавливаемся. неважно, на какую тему и с кем мы говорим. Паузы помогают нам донести до собеседника нужные смыслы и дают время переварить предыдущее предложение.

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

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

Шаг 2 {Добейтесь гармонии текста и дизайна}

Исходя из написанного выше, становится ясно, что контент и структура должны  быть дополнены, а не вытеснены дизайном. Нужно найти золотую середину между “слишком много или ярко” и “слишком невзрачно и незаметно”. 

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

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

Позаботьтесь о том, чтобы посетитель сайта понял, о чём он. Причем за считанные секунды.

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

Тут также включается в работу цвет — обязательно выберите один (максимум — два) контрастных цвета, которым вы будете выделять самые важные моменты.

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

Шаг 3 {Соблюдайте правильную типографику}

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

В таком сценарии поведения нужно очень внимательно отнестись ко всем текстам, которые размещены у вас на сайте. У всего должны быть заголовки, контент должен быть последовательным, с четкой иерархией стилей текста.

Первый и самый главный заголовок на странице (h1), должен быть самым жирным и большим, заголовки последующих блоков (h2) — чуть меньше, но на порядок заметнее обычного текста, подзаголовки (h3), помогающие считывать смысл каждой секции, — чуть больше и жирнее текста.

Эта иерархия должна соблюдаться не только в размере и жирности шрифта, но и в расположении самих блоков текста:

Таким образом пользователи, которые пролистывают сайт, считывая только заголовки, вероятно, зацепятся глазом за один из них.

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

Основные заповеди типографики:

• Ни в коем случае не разряжать строчные буквы

• Всегда разряжать текст. написанный только заглавными буквами 

• Использовать максимум 3 шрифта на одном сайте

• Следить за тем, чтобы текст занимал не больше ⅔ ширины экрана
• Использовать тире “—”, а не дефис “-” там, где подразумевается именно тире 
• Расстояние между строк — 150% от высоты текста
• Не оставляйте предлоги или личные местоимения “висеть” в конце строки, переносите их на следующую строку
• Минимальный размер шрифта на компьютерах — 14, ниже уже нечитаемо.

Шаг 4 {Создайте фокус на нужных местах}

“Правильная” типографика выполняет важную функцию — держит внимание пользователей в фокусе на нужном нам контенте. 

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

• Подчеркивать заголовки
• Добавлять иконки, чтобы привлечь еще больше внимания к каждому тексту

• Взгляд людей с фотографий на текст или заголовок также может являться отличным способом направить внимание человека в нужное место

• Рамки и тени также помогают обратить внимание пользователя в нужную нам сторону — такой прием часто можно увидеть, посмотрев на блок с тарифами, один из которых обязательно будет выделен
• Анимация также играет немаловажную роль — с помощью нее можно отображать навигацию или порядок, в котором стоит считывать информацию, некоторые элементы выделяя медленной цикличной микроанимацией (например, https://prnt.sc/svccsi)

Шаг 5 {Отстройтесь от конкурентов визуально} 

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

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

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

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

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

Решение: снимите живые фотографии или используйте иллюстрации — они точно дадут вам несколько очков, такие сайты люди часто изучают просто из любопытства, даже если сам продукт изначально им не был интересен. 

Примеры ошибок, в дизайне сайта {20 грехов}

Ошибки в дизайне сайта всегда разные. Но их легко поделить на 20 пунктов. Тут главные грехи дизайнера. Если какой-то грех относится к вам – срочно бегите к пастору.

Список ошибок.

1. Нет адаптивной версии сайта для телефонов
2. Не соблюдена иерархия заголовков и описаний 
3. Слишком маленький текст и отсутствие заголовков
4. Нечеткая структура сайта
5. Нет воздуха между блоками и элементами 
6. Отступы между секциями на сайте разных размеров — то большие, то маленькие
7. Встречаются большие тексты, не разбитые на части 
8. Неясно, о чем сайт и чего хочет от нас. Написать на почту, оставить контакты или сделать оплату онлайн? Нет приоритетного целевого действия.
9. Все элементы анимированы — всё летает, крутится и пропадает 
10. Нечитаемые текст на изображениях или текст, расположенный на картинке, закрывая ее важную часть
11. В тексте встречается сразу несколько стилей — подчеркнутый, жирный, обычный, курсив, зачеркнутый (максимум — 2, с натяжкой 3)
12. Большие текстовые блоки расположены по центру, а не выровнены по левому краю — так текст сложно читать.
13. Использование разных цветовых схем на внутренних страницах
14. Разные оформления ссылок
15. Иконки в разных стилях
16. Слишком много ярких и ядовитых цветов на сайте
17. Тусклый\кислотный цвет текста, который трудно читать
18. Слишком сложные и большие формы обратной связи или для регистрации
19. Незаметные контактные данные
20. Стоковые фотографии, не вызывающие доверия

Итог

Итак, надеюсь эти инструкции, и примеры дизайна сайтов, дали вам пищу для размышлений. Но остается два немаловажных вопроса. Делать ли дизайн самому, или доверить специалистам.

Во первых – доверьте это специалистам. Сами вы с вероятностью в 99% наломаете дров, и после потраченных впустую денег на рекламу вы сами в этом убедитесь.

Собственник бизнеса не может быть одновременно хорошим дизайнером, копирайтером, директологом и маркетологом. Он должен заниматься своим бизнесом, и его внутренними процессами.

Теперь, сколько это может стоить? Здесь все зависит от масштабов, и точную сумму назвать просто невозможно. Мы знаем студии веб-дизайна, где ценник начинается от 2.000.000 рублей.

На просторах интернета вы найдете множество предложений о дизайне сайта, например за 5 и 10 тысяч рублей. В обоих случаях, это будет стоить своих денег.

Если у вас есть возможность приобрести более добротный дизайн, не скупитесь. Ведь мы уже говорили о том, что дизайн сайта напрямую влияет на количество заявок, продаж и прибыль.

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

Поэтому вопросы относительно цены решайте сами. Но я могу помочь с обратной связью. Если вы решили заказать дизайн вашего сайта, или разработать сайт или лендинг с нуля, но нужен совет или помощь специалиста – пишите на почту info@nemalevich.marketing. С пометкой “Виктории. Вопрос по дизайну”

На этом пожелаю вам удачи!

Статья написана в соавторстве:
Виктория Набокова
Нарек Егиазарян

Хотите получать от 100 клиентов в месяц, в вашем бизнесе? Оставьте заявку!

Нажмите здесь

На главную