UI чек-лист или на что стоит обратить внимание
Часто даже опытные дизайнеры допускают ошибки при передаче материалов в разработку. Этот контрольный список поможет вам избежать проблем и подскажет, что нужно проверить перед передачей исходников.
Чеклист:
- Чистые цвета
- Чистые градиенты
- Чистые тени
- Картинки высокого качества
- Висячие предлоги
- Контрастность (Объекты не сливаются)
- Читаемость (Текст, иконки читаются без дополнительного напряжения на глаза)
- Иконки имеют одинаковый оптический вес, обводка одинаковой толщины
- Отступы соблюдены (Равное значение пикселей от края до элементов и между ними)
- Акценты направленны на главные элементы (В первую очередь пользователь обращает внимание на главный элементы)
- Идентичные элементы используют один стиль или наборы параметров
Все пишут про висячие предлоги, но как по мне проблема переоценена, а все пытаются следовать правилу не понимая зачем.
Как этот вопрос будет решаться на фронте, практически?
С 99% вероятностью дизайнер предлоги перекинет на следующую строку с помощью переноса строки. Но на фронте это не сработает так как там макеты адаптивные а не статичные как в дизайне.
Значит чтоб добиться переносов предлогов дизайнер должен расставлять неразрывные пробелы между предлогами и следующим словом. Чтоб такой текст работал в адаптиве.
Но и это не решает проблему. Что делать если на сайте есть компонент где пользователь может вводить текст? Всякие поля названий, или висивиг редактор как на VC и медиуме. Пользователь не будет расставлять неразрывные пробелы.
Соответственно нужно писать какой-то скрипт который автоматически на уровне фронта будет определять короткие слова и после них вставлять неразрывный пробел вместо обычного.
Но давай честно, так ли проблема велика чтоб настолько заморачиваться? :) А главное готов ли клиент потратить на это деньги? :)
Всё зависит от задачи. Но при возможности стоит учитывать этот параметр, например сделать оптимизацию под основное разрешение экранов и основной рынок(если продукт имеет различные локализации).
Висячие достаточно сложная тема, где есть много нюансов. Например, если система предназначена для чтения, то убирать висячие вообще не стоит, так как следить за повествованием станет сложнее.
Для заголовков и текста на продающей странице не сильно сложно и дорого оптимизировать это.
Если где-то используется растровая картинка с текстом, то снова же не тяжело перенести.
Где-то этим правилом можно пожертвовать ради композиции, где-то ради исключения разорванного текста.
Так что, всё индивидуально 🤷♂️
За пределами СНГ люди и не слышали о них :)
Как фронт могу сказать, что это больше обязанность разработчика прогнать текст через типограф и вставить в верстку. Просто по умолчанию так делаем и проблем нет)