Разработка сайта и фирменного стиля для международного визового агентства BaliVisaGo

Кейс комплексной разработки с нуля

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

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

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

Что требовалось решить

У посетителя нет обязанности разбираться в обозначениях e-VoA, C1, D12 и E33G. Ему нужно понять, какой вариант соответствует его планам, сколько стоит сопровождение, какие документы потребуются и с кем обсудить свою ситуацию.

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

Логика работы

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

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

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

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

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

Написание BaliVisaGo

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

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

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

Как распределены роли цветов

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

У логотипа и интерфейса есть близкие, но разные оттенки. В этой палитре они показаны отдельно: цвета знака взяты из SVG, цвета кнопок и текста — из реализации сайта. Это позволяет точно воспроизводить существующие материалы.

Цвет в контенте

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

Крупные заголовки быстро обозначают тему раздела. Основной текст остаётся спокойным и объясняет условия. Цены и ключевые характеристики выделены размером и насыщенностью, кнопки используют короткие названия действий.

Принципы использования логотипа

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

Как стиль переходит в интерфейс

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

SEO ядро подбирали с нуля под англоязычные запросы о визах на Бали и в Индонезию. Собрали запросы об агентстве, конкретных визах, стоимости, продлении и правилах оформления. Мы связали эти темы с задачами посетителей и разделами сайта.

Как семантика повлияла на сайт

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

Семантику организовали по смыслу обращения. Человек, который ищет агентство, выбирает исполнителя. Человек с запросом C1 tourist visa уже интересуется определённым продуктом. Запрос о стоимости может появиться на любом этапе выбора. Эти различия определяют глубину и расположение ответа.

Общие коммерческие запросы

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

Запросы конкретных услуг

Для E33G, D12, C1 и e-VoA созданы самостоятельные страницы с разными заголовками и содержанием. У каждой — собственный первый экран, требования, документы и пояснения. Общая визуальная система не требует копировать один и тот же текст между услугами.

Вопросы о выборе и цене

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

Информационные темы

Вопросы об официальном портале, правилах оформления и продлении раскрываются в FAQ.

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

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

Главная как точка выбора

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

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

Два следующих действия

Основная кнопка ведёт к консультации в WhatsApp. Рядом находится переход к ценам. Посетитель может сразу задать вопрос или сначала изучить стоимость. Важные действия отделены от описательных ссылок и остаются заметными на фоне иллюстраций.

Выразительность и читаемость

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

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

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

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

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

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

Что происходит после обращения

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

Для E33G, D12, C1 и e-VoA подготовлены отдельные страницы. Общая система оформления сохраняется, а изображения, вводные тексты и состав объяснений адаптированы к конкретной услуге.

Разные задачи в общем стиле

E33G раскрывает направление удалённой работы, D12 — многократных поездок, C1 — туристического пребывания, e-VoA — оформления визы по прибытии. Тематические первые экраны различаются по сюжету и содержанию, сохраняя общую навигацию, цвета и типографику.

Далее страницы раскрывают аудиторию услуги, требования, документы, цену, этапы оформления и FAQ. Такая глубина помогает обсуждать с клиентом уже определённый вариант.

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

Англоязычный контент построен вокруг практических вопросов. Объяснение услуги разделено на короткие смысловые части, а названия разделов прямо говорят, что посетитель в них найдёт. Условия, документы и этапы оформления доступны в тексте, а не только внутри иллюстраций.

Что раскрывает FAQ

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

Редакционная логика

Короткие кнопки называют действие: Free consultation, See prices. Описательные ссылки объясняют тему перехода. Длинные объяснения остаются в содержании страницы.

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

Действия в интерфейсе

Основные обращения ведут в WhatsApp. Навигация использует ссылки, раскрывающиеся блоки помогают дозировать подробности, а длинные таблицы предусматривают горизонтальное чтение на узких экранах.

Сайт реализован на HTML, CSS и JavaScript со статической сборкой на Python. Основной контент формируется в готовом HTML. Посетителю не требуется выполнять JavaScript, чтобы получить тексты страниц, скрипты отвечают за взаимодействия.

Повторное использование компонентов

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

Поисковую основу заложили на уровне структуры и HTML. У каждой страницы есть собственные метаданные и адрес, а важный текст присутствует в результате сборки. На главной сформированы данные об организации, предложениях и FAQ в формате JSON-LD.

Связь семантики с контентом

Заголовки и описательные ссылки называют конкретную услугу или вопрос. Главная ведёт к подробным страницам, а блок FAQ отвечает на дополнительные вопросы. Метаданные, тексты и структура рассматриваются вместе, чтобы содержание соответствовало назначению страницы.

Оптимизировали изображения первого экрана и услуг, использовали форматы AVIF и WebP. Фоновые изображения ниже первого экрана загружаются отложенно, JavaScript подключён с defer.

На графике — медианы трёх лабораторных замеров до и после оптимизации. Объём переданных данных уменьшился с 1,32 МБ до 363 КБ.

Как читать результаты

Performance вырос с 78 до 95 баллов, LCP снизился с 6,16 до 2,86 секунды. Это результаты лабораторного сравнения до и после оптимизации, а не полевые Core Web Vitals посетителей сайта.

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

Разработка для вашей задачи

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