Как улучшить дизайн сайта за 10 000 р. WOW-эффект гарантирован

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

Мануал для представителей бизнеса от CX/UX-аналитика с 8-летним опытом.

Из чего состоит впечатление от сайта

Когда о сайте говорят "хороший" или "плохой", редко парсят впечатление. А зря. Именно конкретизация абстрактных ощущений даёт понимание что же именно плохо, и что (а главное как) можно быстро исправить, чтобы стало хорошо.

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

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

6 компонентов, из которых складывается впечатление

Это основные компоненты впечатления, которые помогут представителям со стороны бизнеса (маркетологи, топ-менеджеры, владельцы бизнеса) ЗНАЧИТЕЛЬНО упростить сопровождение сайта и самостоятельно сохранять достаточное качество сайта. Специалистов привлекать редко и точечно на конкретные задачи.

РАЦИОНАЛЬНЫЕ КОМПОНЕНТЫ

1. Тексты - информационная часть букв: смыслы, полезность, полнота информации, стиль (ton-of-voice).

Проверочные вопросы: Понятно написано? Достаточно информации? Емко? Нравится тон подачи информации?

2. Удобство - всё, что требуется, чтобы выполнить на сайте конкретную задачу (JBTD): навигация, смысловая группировка информации, кнопки, формы, отображение сайта на разных устройствах, скорость, калькуляторы, и прочий функционал.

Проверочные вопросы: Какие задачи у юзера могут быть? Насколько легко и быстро можно выполнить каждую из них?

ЭМОЦИОНАЛЬНЫЕ КОМПОНЕНТЫ

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

Проверочные вопросы: Можно ли не углубляясь в текст, быстро просканировав его взглядом, найти нужное? Выделены ли важные мысли? Легко ли понять где заголовки, а где подзаголовки? Легко ли прочитать даже большой объем текстов? Если на экране только буквы, есть ощущение современности и стиля?

4. Дизайн интерфейса - цветовая палитра сайта и элементов, градиенты, фоны, оформление кнопок, линий, форм, закругления.

5. Графические материалы - всё отдельное статичное красивое: фото, баннеры, иллюстрации, иконки, логотипы.

6. Динамика - всё движущееся и анимированное: значок загрузки с уровнем процентов, изменение цвета кнопки при наведении курсора, мигающая или переливающаяся кнопка, видеоподложка, параллакс-эффекты и пр.

Пример парсинга впечатления

Классный сайт, правда?

Парсинг впечатления:

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

Что делать, если нет бюджета на редизайн?

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

  • Главное для продаж - тексты и удобство.
  • Главное для впечатления - того самого WOW-эффекта - графические материалы и типографика.

Так как добиться WOW-эффекта за 10 000 р.?

Разобрались, что WOW-эффект зависит от качества графических материалов и типографики.

Исправлять типографику сайта довольно дорого: потребуется не только дизайнер, но и программист, которому нужно будет заверстать все стили текста.

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

WOW-эффект быстро и дёшево - это заменить все баннеры и иконки на качественные и в единой дизайн-системе.

Потому что до 90% первого экрана любой страницы сайта занимают баннеры. Именно баннеры являются фундаментом впечатления от дизайна и от статуса компании.

Примеры до-после замены баннеров

до

после

до

после

до

после

до

после

Какие специалисты нужны?

Для иконок нужен веб-дизайнер.

Для баннеров требуется графический дизайнер.

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

А ещё может потребоваться репортажно-портретный фотограф. Ведь графический материал нередко основан или полностью состоит из фото.

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

Кроме того, сделав фото для сайта, вы сможете их использовать ещё и во всех справочниках, где представлена компания: 2GIS, Яндекс.Карты, рейтинги, справочники, статьи и пр. А значит, усилите все точки касания с компанией в интернете.

Пример, как фото влияет на впечатление

Одно и то же место, почти один и тот же ракурс.

Снято менеджером компании:

Снято репортажным фотографом:

У нас нечего снимать, и вообще некрасиво, мы же не офис Яндекс.

Снять качественно всё что угодно - как раз и есть искусство хорошего репортажного фотографа. Посмотрите пример съёмки "некрасивого" производства и результат:

0
14 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

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

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

быть стандартным унылым г*ном я не хочу.

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

Думаю, стоит учитывать эти два пункта в оценке бюджета на редизайн

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Дарья Осадчая
Автор

Заметка написана "для представителей бизнеса" - об этом есть упоминание в самом начале. Для бизнеса сайт - это инструмент продаж, поэтому его основная задача "увеличивать поток качественных лидов". И все изменения сайта стоит рассматривать с точки зрения повлияет на продажи и поведение пользователя по воронке продаж или нет. Предложенное решение гарантированно повлияет.

Насколько я поняла суть вашего сайта https://tbs-mbs.net/, он не инструмент бизнеса, у него свои цели и задачи, а значит, всё что описано в статье, вам не подойдёт.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Чайка О.

Прошу извинить за темноту, но парсить впечатления — это как? И чем?

Ответить
Развернуть ветку
Дарья Осадчая
Автор

Использовала технический жаргон из веб-разработки). Парсинг — это когда вы берёте массив данных и раскладываете его на нужные вам составляющие. Синонимы из других сфер: декомпозировать, разложить на составляющие, разбить на компоненты. В общем, посмотреть на что-то большое не как на 1 единицу, а как на Х объединенных единиц.

Ответить
Развернуть ветку
Чайка О.

Ну, "чисто гипотетически" можно и так применить. Но в веб-разработке и вообще ИТ есть вполне устоявшееся значение этого слова. И уж тем более странно смешивать парсинг с декомпозицией и раскладыванием целого на части.
Впрочем, ваша статья — ваше право придумывать смыслы. Моё право — удивляться. Успехов.

Ответить
Развернуть ветку
Павел Иванов

Аааа, так вот это откуда!

Ответить
Развернуть ветку
Брат мужа знакомой

парсить надо парсерами (с)

Ответить
Развернуть ветку
Чайка О.

Парсер для впечатлений — это мозг? )

Ответить
Развернуть ветку
Дарья Осадчая
Автор

Если полностью переводить на язык IT, то парсер для впечатления - способ мышления, а мозг - мощности железа.

Ответить
Развернуть ветку
Monica Wright

понятно, что красивые фотографии будут лучше продавать ваш товар

Ответить
Развернуть ветку
Дарья Осадчая
Автор

Просто когда сайт не нравится владельцу бизнеса/маркетологу/менеджеру, они обычно не знают как подступиться к задаче, и нередко рассматривают только одно решение - "переделать". Дальше разработчики оценивают редизайн, и на этом проект замораживается, т.к. "дорого, нет денег". Я же предлагаю разработать баннеры и сделать фотографии, и это очень дешевый способ сделать сайт адеватным без глобального изменения. Минимум затрат - максимум эффекта. Собственно об этом заметка: что сделать при малых инвестициях, чтобы сайт вытянуть на приятный уровень. Косметический ремонт так сказать :)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
11 комментариев
Раскрывать всегда