Сайт на арабском: что учесть в дизайне и как передать макет разработчикам

Привет, это Лиза из «Лиги А.»! Представьте, что вам прилетела задача по дизайну сайта на арабском языке. Полезных статей под рукой не так уж много, а ещё меньше — статей с примерами и культурными нюансами, которые важно учесть при разработке сайта. Рассказываем, без чего арабская версия не будет арабской. И сложно ли реализовать такой дизайн в коде.

Мы в Лиге разрабатываем проекты для дизайн-студий, диджитал-агентств и продуктовых команд. Работаем с разными форматами — от простых лендингов до сложных сервисов.

Ведём телеграм канал и другие соцсети про нашу айтишную жизнь — пишем о проектах, клиентах и работе с дизайнерами.

Откуда мы знаем то, о чём будем писать дальше? Недавно мы разрабатывали арабскую версию сайта. Учитывали много нюансов культуры, чтобы сохранить UX для арабских пользователей.

Поэтому всё в статье — наш опыт)

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

Подъехали аббревиатуры. LTR (Left to Right) и RTL (Right to Left) описывают, как текст и элементы интерфейса должны быть организованы на веб-странице. По сути, они отличаются тем, как пользователь просматриваем контент на экране.

Просто запомните, что:

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

RTL — читаем и пишем справа налево, используем в арабском, персидском и иврите.

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

В арабском интервал пишут по правилам RTL. Например, если вы выберете на сайте даты с 2-9, они должны быть написаны так — 9-2.

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

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

С точки зрения вёрстки особо ничего не усложняется. Для перевода с одного языка на другой есть специальный HTML атрибут dir.

dir определяет направление текста на веб-странице.

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

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

Например, CSS Flexbox и Grid могут автоматически изменять расположение элементов в зависимости от значения атрибута dir .

С помощью свойств dir и direction сетка с лёгкостью отражается по горизонтали, а какие-то детали можно доработать вручную.

Что это значит для веб-дизайнера, который отдаёт макет разработчикам?

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

Но важно кое-что учесть — проверить макет перед тем, как отдавать в разработку. Почему?

Лишние детали/элементы/страницы мешают разработчикам быстро анализировать макет и оценивать работу.

Минимализм должен активно войти в чат.

Для чистоты и порядка в макетах:

И ещё несколько деталей, которые помогут разработчиками быстрее прочитать макет и начать работу, мы расписали в статье на DSGNERS!

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

Можем многое, главное — ваше желание. Пишите нам на почту или мне в телеграм — @gingerliza. В любом случае, вам отвечу я)