Кейс: как создать сайт для проекта самостоятельно

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

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

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

Также для нас было важно выйти в b2b-сегмент. Сайт — наилучшее решение такой задачи. Все проекты и кейсы собраны в одном месте — это позволяет показать, что мы умеем работать с разными форматами и продуктами. Работа на b2c-сегмент через сайт была второстепенной задачей.

При работе с рекламодателями, спонсорами и партнёрами сайт служит своего рода портфолио. Также он позволяет ответить на многие вопросы ещё до этапа переговоров. Поэтому в работе над дизайном особое внимание нужно уделять структуре и информативности. Важно грамотно распределить содержимое по блокам и наполнить их релевантными данными.

В планировании структуры мы ответили на несколько вопросов:

Для b2c-сегмента нам было важно дать информацию:

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

1. Постановка задачи и формирование команды. Идея создания сайта появилась весной 2022 года. Летом взяли задачу в работу. Ответственными за неё были команды отделов SMM и дизайна, поскольку именно они занимаются медиасопровождением проектов. Но у них были другие, более срочные задачи, и на сайт не всегда оставалось время. Не было и человека, который менеджерил создание сайта, поэтому процесс затянулся.

2. Выбор визуального стиля. Через несколько месяцев мы решили перестроить схему работы над сайтом. За организацию и координацию процесса взялась Марго, co-founder Зари. Вместе с дизайнерами они начали подбирать визуальный стиль будущего сайта. Делали они это в онлайн-сервисе для дизайна Figma, поскольку её функционал намного шире, чем у конструктора сайтов Тильда — туда будет перенесён готовый дизайн.

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

«Сайт мы делали в первый раз, из-за этого появлялись некоторые трудности и ошибки, которые и стали причиной такого затяжного процесса», — Марго.

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

5. Тестирование сайта. После переноса был следующий этап правок: мы тестировали кнопки на страницах сайта, вычитывали тексты, проверяли визуал на разных устройствах и в разных браузерах. К концу года мы внесли последние коррекционные правки и запустили сайт.

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

«В идеале, чтобы была отдельная команда по созданию сайта. Так дело, конечно, быстрее пойдёт», — Марго.

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

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

4. Объёмные страницы проще сначала сделать в Figma. Так легче визуализировать итоговый дизайн, а функционал Figma позволяет применять более интересные визуальные решения. Какие-то корректировки, мелкие и простые дизайны можно делать сразу в Тильде: это оптимизирует процесс работы.

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

6. В согласованиях, в которых участвует много людей, важно обращать внимание именно на структурные вещи. Проще говоря, смотреть на смысл. Дизайн — дело вкуса. Его обсуждать можно бесконечно, поэтому среди множества правок тимлиду сайта важно разграничивать объективную критику и вкусовщину.

Сайт меняется вместе с проектом, и для его регулярного обновления нужна постоянная команда.