Мини-руководство, как сделать крутой сайт

Стоит ли сразу делать крутой сайт?

Мы хоть и продавали сайты и брендинг, но не спешили вкладываться в имидж на первых порах: гипотезы должны быть проверены, а характер и доверие сформированы. Поэтому просто показывали нашим клиентам кейсы в Figma — онлайн-сервисе для разработки интерфейсов, и это хорошо работало.

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

Раз в 2-3 года стоит пересматривать, обновлять и дорабатывать свои имиджевые площадки: сайт, соцсети, и инструменты коммуникации — фирстиль, ToV. 

Возникновение потребности

Всё всегда меняется — и то, что было актуально тогда на старте, сегодня может уже быть несовременным и не про ваш бизнес. Как и случилось, кстати, с нами.

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

Вместо того, чтобы принимать резкие решения, сокращать ФОТфонд оплаты труда, суетливо искать хоть какие-то заказы, я решил сфокусировать команду на внутренних задачах, до которых руки из-за высокого загруза не доходили. 

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

Совет

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

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

Читайте также: Самые свежие лайфхаки LinkedIn — 2023. Что еще нужно знать?

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

Первый этап — много анализа и мудборды

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

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

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

Совет

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

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

Совет

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

Второй этап — концепты и прототип

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

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

Совет

Будьте последовательны и не забывайте, что сайт должен отвечать на вопрос или запрос, а уже потом быть стильным и красивым. У вас есть 3-5 секунд, чтобы зацепить. Ведите своего клиента за руку по сайту: 

• понятный заголовок сразу; 
• правильное расположение кнопок действия; 
• аргументы, чем вы лучше других.

Третий этап — дизайн

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

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

Совет

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

На дизайн в сухом остатке у нас ушло 3-4 спринта — это около месяца, но так как мы совмещали внутренние задачи с клиентскими, процесс затянулся на 2 месяца. Я был не очень легким клиентом для своей команды: рассматривал все под микроскопом, занудничал по правкам, но все аргументировал.

В среднем процесс создания простого для компаний сайта занимает около месяца — 3-4 недели, лендинг с ноукодом — 1-2 недели. Более сложные многостраничные сайты могут потребовать 3-6 месяцев: все зависит от сложности проекта, и таковые обычно запускаются итерациями, чтобы побыстрее начать получать обратную связь.

Совет

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

Четвертый этап — разработка

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

Совет

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

Если интересно, сайт написали на Vanilla JS. Управление через «Битрикс» — большинство сайтов для российский клиентов делаем именно на нем, наш не исключение. По поводу плюсов и минусов движка мнения всегда разделяются. Но с точки зрения возможностей, интеграций, безопасности мы решили, что нам подходит.

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

Совет

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

Читайте по теме:

7 способов сделать корпоративный сайт привлекательнее и повысить продажи

Как персонализировать свой сайт, чтобы поднять продажи

Пятый этап — тестирование и наполнение контентом, запуск

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

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

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

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

Совет

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

Выводы

Уверен, что теперь вы их сможете сделать сами. Мир меняется — надо про это не забывать, это касается и вас, и рынков, и трендов, да почти всего. Движение должно быть во всем: обновление и перемены, как по мне, это тоже движение.

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

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

Фото на обложке и иллюстрации предоставлены автором.