Как сделать крутой сайт?
Мини-руководство и советы
Привет, меня зовут Илья Ерастов, руковожу международным диджитал-агентством Spans, разрабатываем айдентику и сайты для крупного, среднего, а иногда и малого бизнеса.
Если вы ищете способы повысить свой имидж в онлайн, но не знаете когда и как – эта статья для вас. Я рассказал RB.ru нашу историю: раскрыл тему на примере создания собственного сайта. Публикую ее и здесь для читателей VC.ru.
Стоит ли сразу делать крутой сайт?
Мы хоть и продавали сайты и брендинг, но не спешили вкладываться в имидж на первых порах: гипотезы должны быть проверены, а характер и доверие сформированы. Поэтому просто показывали нашим клиентам кейсы в Figma – онлайн-сервис для разработки интерфейсов, и это хорошо работало.
На мой взгляд, сначала важнее начать рассказывать о себе или сделать первые продажи. Если все получилось и полет нормальный, тогда уже работать над имиджем и укреплять свои позиции. Раз в 2-3 года стоит пересматривать, обновлять и дорабатывать свои имиджевые площадки: сайт, соцсети, и инструменты коммуникации – фирстиль, TOV.
Возникновение потребности
Всё всегда меняется - и то, что было актуально тогда на старте, сегодня может уже быть несовременным и не про ваш бизнес. Как и случилось, кстати, с нами. Идея провести ребрендинг и сделать новый сайт у меня появилась в конце февраля 2022 года, после того как произошло сами-знаете-что. Заказы встали на стоп, рынок поник, никто не понимал, что будет дальше и клиенты боялись тратить бюджет.
Вместо того, чтобы принимать резкие решения, сокращать ФОТ – фонд оплаты труда – суетливо искать хоть какие-то заказы, я решил сфокусировать команду на внутренних задачах, до которых руки из-за высокого загруза не доходили. К слову, мы никого не уволили в трудное время.
Кстати, вот тут я рассказываю как решил создать бизнес и даю инсайты за последних 3 кризисных года.
Сменили фокус и решили обновиться: на тот момент компании исполнилось 2 года и мы уже заметно переросли свой сайт, но даже не начали рассказывать о своих достижениях. Ну и желание выйти на международку позвало пересмотреть инструменты коммуникации.
Совет: В любой проблеме иногда стоит увидеть возможность. Это меняет чуть фокус и направляет энергию на созидание, в более позитивное русло.
Подумайте, почему вам хочется проапгрейдить ваш сайт – это поможет выявить самую важную функцию, которую он будет нести, например, отстроиться от конкурентов, или повысить доверие клиентов. Не бойтесь дольше ресерчить на эту тему и искать себя, обращаться к спецам на рынке за рекомендациями – обычно это бесплатно. Их можно найти, например, на Facebook и LinkedIn (обе запрещены на территории РФ).
Итак, потребность сделать новый сайт есть, что с этим делать дальше? Я попробую подробно рассказать про этапы создания, чтобы вам было проще начать и вы знали что вас ждет впереди.
Первый этап – много анализа и мудборды
Первым делом исследуем всё, что можно: смотрим индустрию, тренды, детально конкурентов с локальных и международных рынков, смежные области, разговариваем с представителями похожих компаний, выискиваем инсайты и взаимосвязи, собираем референсы и вдохновляющие мудборды, прислушиваемся к интуиции. Обязательно проанализируйте свой текущий сайт и спросите, актуальная ли на нем информация, как часто он обновляется, насколько он удобен для посетителей и клиентов, доносит ли суть компании и ваших услуг.
Что хотел я от нового сайта: отсутствие воды, факты, кейсы в лоб, прозрачность процессов, легкость восприятия без давления что-то купить. Кстати, мне всегда нравились линейные иллюстрации – они чаще всего простые, честные, энергичные и эмоциональные. А еще яркие цвета, четкие смыслы, открытость – все чтобы прямо все про нас, поэтому я попросил команду использовать их в качестве позиционирования по всем фронтам.
Совет: отберите сайты, иллюстрации, текст, которые вам нравятся. Из всего этого соберите мудборды – доску с наглядными примерами что вас вдохновляет. Посерфьте по интернету или позависайте на Pinterest и Behance.
Ребятам из нашей команды респект, активно включались в креатив, делились мыслями, предлагали идеи. Были разные заходы, даже через диван, что стоит в нашем офисе – хотели сделать возможность на него «присесть» прямо на первом экране.
Пока штурмили, родили своего маскота. Он получился харизматичный, простой, но в то же время весьма необычный – символ свободы творчества. Наш арт-директор, Дарья Крючек, говорит, что благодаря этим странным концептам мы поняли, что хотим показать себя серьезными и игривыми одновременно. На этом основан наш стиль.
Совет: Если вы не можете нащупать свое позиционирование – начните с того, что вам не нравится, как точно вы бы не хотели о себе рассказывать. Работайте с референсами, интерпретируйте их, перекладывайте на свою компанию.
Второй этап – концепты и прототип
Концепты и логика важны. Просто сделать красиво недостаточно, пользовательский путь должен быть продуман и удобен на любых гаджетах. Нашим клиентам всегда предлагаем три визуальные концепции, чтобы был выбор. По сути, начиная работу с концептами, мы закладываем базу для дальнейшего развития проекта и показываем визуальные заходы большими мазками.
Для себя мы уже знали, что хотим, и ограничились одним концептом, накидали прототип – блок-схему сайта – и быстренько все внутри утвердили.
Совет: Будьте последовательны и не забывайте, что сайт должен отвечать на вопрос или запрос, а уже потом быть стильным и красивым. У вас есть 3-5 секунд, чтобы зацепить. Ведите своего клиента за ручку по сайту:
• понятный заголовок сразу;
• правильное расположение кнопок действия;
• аргументы, чем вы лучше других.
Третий этап – дизайн
Наш арт-директор Дарья визуализировала пожелания команды и завернула всё в интересную нам концепцию, а чуть позже разработали удобную дизайн-систему, чтобы мы смогли весь дизайнерский пыл подружить с версткой – весь дизайн сделали в Figma, о которой я писал выше. Задача была не из легких, но результат стоил потраченных сил.
Процесс такой: сначала нарисовали десктопную версию – для мониторов и ноутов, после сделали адаптивы для планшетов и смартфонов. И передали эстафету отделу разработки.
Совет: не забывайте продумать дизайн для планшетов и смартфонов – это мастхев. Иногда бывают и нестандартные разрешения экранов, например, ТВ панели могут быть актуальны именно вашей аудитории. Изучите свою аудиторию лучше: какими гаджетами они пользуются чаще всего?
На дизайн в сухом остатке у нас ушло 3-4 спринта – это около месяца, но так как мы совмещали внутренние задачи с клиентскими, то процесс затянулся на 2 месяца. Я был не очень легким клиентом для своей команды: рассматривал все под микроскопом, занудничал по правкам, но все аргументировал. Ребята выстояли, получилось кайфово, результатом очень доволен.
В среднем процесс создания простого для компаний сайта занимает около месяца – 3-4 недели, лендинг с ноукодом – 1-2 недели. Более сложные многостраничные сайты могут потребовать 3-6 месяцев: все зависит от сложности проекта, и такие проекты обычно запускаются итерациями, чтобы побыстрее начать получать обратную связь.
Совет: Будьте смелее! Покажите посетителям, что вы настоящие, что прекрасно понимаете их боли. Можно добавить юмора, энергии, словечек всяких из вашей ниши – вы же эксперты!
Четвертый этап – разработка
Мы не хотим использовать шаблонные решения в дизайне, поэтому разрабы вынуждены заново заводить все стили, связки и тд. Признаюсь, в этом проекте мы перестарались с элементами – было непросто все собрать воедино. Очередное «спасибо» команде, что не сдались и воплотили все нестандартные идеи в жизнь.
Например, вот так наш разработчик, Ульжаев Искандер, рассказывает о процессе: “Сайт Spans – один из интересных проектов в моей работе. Его дизайн очень необычный и нестандартный. В связи с этим были моменты где пришлось предпринять альтернативные подходы и мышление, проводить глубокий анализ структуры сайта, учитывая его дальнейшее развитие. Иногда даже приходилось удалять большое количество кода и писать его заново, либо менять структуру сайта, потому что был выбран неправильный путь реализации. Помимо полученного опыта, этот проект еще и улучшил коммуникацию в коллективе. Я получил огромное удовольствие от того, что из пустой страницы получился такой классный и интересный проект.”
Совет: По ходу разработки приходится что-то менять или иногда даже начинать заново – это нормально. Главное не делайте правок ради правок – у серьезных изменений должны быть весомые аргументы.
Если интересно, сайт написали на Vanilla JS. Управление через Битрикс – большинство сайтов для российский клиентов делаем именно на нем, наш не исключение. Можно будет как-то порассуждать про плюсы и минусы движка, мнения всегда разделяются – попрошу нашего техдира поддержать дискуссию. Но с точки зрения возможностей, интеграций, безопасности, решили что нам подходит.
Мы сторонники того, чтобы управлять контентом без привлечения разработчиков, через админку. Даже не знаю, как может быть иначе. Никогда не видел смысла подсаживать клиентов на техподдержку и править тексты за них. Проект должен быть сдан так, чтобы не было зависимости от определенного подрядчика и его смог бы спокойно подхватить любой разбирающийся с технологией специалист. Такой же подход выбрали и для себя.
Совет: знайте, что создать в вебе сейчас возможно абсолютно все. Поэтому отдавайте предпочтение тем командам, которые не навязывают вам свои условия работы, а предлагают вам решения в привязке к вашей конкретной задаче.
Пятый этап – тестирование и наполнение контентом, запуск
Контент очень важен – он должен быть без лирики и в самое сердечко. Главные мысли в самом заметном месте, остальное можно спрятать с глаз: захотят – найдут. Люди ленивые, читают и смотрят все по диагонали. Пишите понятно и просто – примерно так, как бы вы другу в кафешке рассказываете, чем вы занимаетесь.
Наполнили сайт картинками и текстами, прогнали через типограф, чтобы в конце предложений не оставались висячки, союзы и предлоги. Перевод делали сами – у нас есть друг студии: Лиза живет в Лос-Анджелесе и владеет языком на уровне нэйтивов – носителей языка. Если у вас таких контактов нет – попробуйте ChatGPT. Но всё же лучше, чтобы живой человек просмотрел получившийся текст.
К слову, если у вас есть необходимость найти определенных специалистов, можно начать с запросов в соцсетях или воспользоваться тематическими биржами, например, Behance, Upwork.
Следующие действия: исправляем ошибки, баги, вносим правки. Проверяем сайт на корректную работу во всех популярных браузерах, тестируем скорость загрузки страниц и т.д. Ставим метрики и необходимые пиксели для анализа посещений и использования страниц – очень поможет вашим маркетологам. И вуаля — сайт доступен всему миру! Погнали!
Совет: Сайт должен читаться по одним заголовкам: малые абзацы легче читать, чем огромные блоки текста. Если команды не закладывают время на тестирование и отладку косяков – после сдачи проекта что-то будет ломаться с большей вероятностью.
Выводы
Уверен, что теперь вы их сможете сделать сами. Мир меняется – надо про это не забывать, это касается и вас, и рынков, и трендов, да почти всего. Движение должно быть во всем: обновление и перемены, как по мне – это тоже движение. Успехов с созданием вашего крутого сайта! Надеюсь, ряд моих советов поможет вам сохранить лишние нервные клетки.
P.S.: Клиенты стали приходить с запросом «хотим сайт, как у вас» – хороший знак успешной работы. Это была исключительно имиджевая история: нас не столько интересовала метрика и конверсия, сколько позитивный фидбек от текущих и новых клиентов.