---
title: "Правительство Рас-эль-Хайма"
description: "Как мы бренд целого эмирата пересобирали."
canonical: "https://igorabramkin.com/ru/rak-government"
lang: "ru"
doc_version: "1"
last_updated: "2026-09-04"
---

# Правительство Рас-эль-Хайма

Как мы бренд целого эмирата пересобирали.

- **Роль:** Старший продуктовый дизайнер
- **Команда:** 3 дизайнера, Product Owner, 3 разработчика
- **Мой вклад:** Концепции, Проектирование взаимодействий, Дизайн-система, Проектирование интерфейсов
- **Таймлайн:** 3 месяца

![Новая главная страница rak.ae с панорамой Рас-эль-Хаймы](https://igorabramkin.com/projects/rak-government/rak-government-cover.png)

rak.ae — основной сайт Правительства Рас-эль-Хайма с аудиторией около 200 000 человек в месяц. Он объединяет информацию для резидентов, бизнеса и туристов, но его устаревший интерфейс не задавал общего цифрового языка для сайтов департаментов.

- **Задача:** Превратить устаревший портал в единый цифровой бренд и систему.
- **Моя роль:** Я сфокусировался на архитектуре сайта, дизайн-системе и DX для команды клиента.

![Стеклянные офисные башни вдоль шоссе в Рас-эль-Хайме](https://igorabramkin.com/projects/rak-government/rak-government-goal-role.png)

## Аудитория

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

![Карточки аудиторий: резиденты, бизнес и туристы](https://igorabramkin.com/projects/rak-government/rak-government-audience.png)

## Бренд

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

![Мудборд бренда и направления айдентики](https://igorabramkin.com/projects/rak-government/rak-government-brand.png)

## Дизайн в коде

Вместо отдельного прототипирования мы проектировали страницы в Figma и сразу собирали их в коде с помощью Claude Code. Параллельно закладывали основы фронтенда: готовые компоненты дизайн-системы переносили из Figma в код по мере работы над страницами.

![Собранные в коде страницы rak.ae об эмирате Рас-эль-Хайма](https://igorabramkin.com/projects/rak-government/rak-government-design-in-code-1.png)

![Сессия Claude Code со сборкой фронтенда rak.ae](https://igorabramkin.com/projects/rak-government/rak-government-design-in-code-2.png)

## Сетки

Финальный дизайн опирался на две сетки. Стандартную 12-колоночную мы использовали для основных страниц. Вторую построили с явным смещением веса: в узкой левой колонке размещались поиск и фильтры на страницах с разделённым контентом, а в статьях — навигация по главам.

![Две сетки поверх страниц rak.ae](https://igorabramkin.com/projects/rak-government/rak-government-grids.png)

## Арабская версия

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

![Английская и арабская RTL-версии страницы поиска законодательства](https://igorabramkin.com/projects/rak-government/rak-government-arabic-rtl.png)

## Дизайн-система

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

![Цвета, типографика и компоненты дизайн-системы в Figma](https://igorabramkin.com/projects/rak-government/rak-government-design-system.png)

## Конструктор страниц

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

## Передача клиенту

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

## Результат

Совместная работа в Figma и коде сократила путь от задачи до готовой к продакшену страницы в 2,5 раза. Система полностью передана клиенту, а публичный запуск нового портала запланирован до конца 2026 года.

## Sitemap

Полный список страниц: [sitemap](https://igorabramkin.com/sitemap.md).