Click to order
Total:
Напишите, пожалуйста, ваше имя и ваш рабочий e-mail, чтоб мы знали, кому и куда присылать уроки.
Мы уже рассказывали, почему UI-кит заказчика в большинстве случаев нужно дорабатывать. Осталось разобраться, как оценить масштаб изменений на старте проекта и сразу заложить время на них в бюджет. Потому что, если не заложить, вам придется потратить дизайн-часы на предпроектную подготовку. И все это вы будете делать за свой счет.
Как мы проверяем UI-киты заказчиков
Собака Павлова
2020
ИНТЕРФЕЙСЫ
Энди Уорхол. «Банка супа»
Мы оцениваем UI-киты заказчиков по ряду требований. Это то, без чего невозможно приступить к дизайну. Если что-то не проходит наши требования, мы добавляем в проект часы на доработку UI-кита.
Формат
Часто у заказчика UI-кит есть только в веб-версии, потому что он привязан к фреймворку. То есть его можно посмотреть в браузере, а взять и перенести в графический редактор — нет. В подобных ситуациях дизайнеру нужно перерисовать руками каждый элемент.
Такие киты можно использовать только в среде разработки. То есть во фреймворке, когда вы пишете код. Дизайнеры код не пишут.
Если у заказчика UI-кит в формате Sketch, нам тоже потребуется время для доработки, потому что Figma хоть и проглотит файл, но элементы сверстает криво.
Типографика
Один из первых вопросов заказчику — какие шрифты будем использовать. Которые уже есть в ките или другие? Если родные, то собраны ли они в систему типографики? Насколько вообще проработана в ките работа с текстом? Есть ли заголовки и подзаголовки? Забиты ли они в стили?
Если в UI-ките все это уже есть, заказчик сэкономит несколько часов. Хороший пример — система iOS, где типографика проработана для многих ситуаций.
Подобрать шрифты, собрать систему, забить стили — на все это дизайнеру нужно время. Его оплачивает заказчик. И это выйдет дешевле, чем работать без стилей.
Цвета
Проверяем, есть ли в UI-ките цветовая палитра. И забита ли она в стили.
Это важно, потому что заказчик может внезапно решить, что нужно поменять какие-то цвета в интерфейсе. Не понравился синий, давайте сделаем серый.
У нас был случай, когда мы делали оранжевый интерфейс интернет-магазина, а потом заказчик попросил поменять на красный, потому что это их фирменный цвет. То есть он знал про оранжевый, но хотел посмотреть, что получится. Увидел — не понравилось.
Если вся палитра забита в стили, вы можете одновременно менять цвета сразу всех забитых в него элементов. Даже не так. Палитра должна быть забита.
Если в UI-ките стилей нет, дизайнер их сделает сам. И потратит на это час-два работы.
Иконки
Мы используем иконки из интернета. Если в UI-ките нет подходящих, понадобится время, чтобы подобрать библиотеки нужной стилистики.
Элементы
Проверяем элементы и их состояния. Вот список элементов.
- Кнопка и группы кнопок
- Поле ввода
- Чекбокс
- Радиобатон
- Пагинация
- Свитчи
- Таблица
- Табы
- Галерея
- Ярлыки, лейблы, бейджи
- Вкладки
- Предупреждения/алерты
- Поп-ап
- Поп-овер
- Уведомления
- Меню
- Подсказки
- Календарь
- Прелоудер
Качество сборки и нейминг
Круто, когда элементы состоят из нескольких частей, как компоненты. Если они не собраны, собираем сами. Это правило номер один для совместной работы.
Например, кнопка может быть собрана в UI-ките из подложки, текста и иконки. При этом у подложки может быть прописан свой стиль, у текста — свой, у иконки — свой. Тогда они самостоятельны и их проще редактировать. Это UI-кит хорошего качества.
Если все элементы собраны как компоненты, дизайнерам в команде будет удобнее делать дизайн. Но здесь тоже не все так просто. Многое зависит от того, насколько понятно они собраны, какой у них нейминг и как они собираются в чуть большие компоненты. Если все плохо, мы пересобираем каждый элемент под себя.
Когда к нам приходят крупные клиенты с уже обкатанными UI-китами, мы спрашиваем, можно ли их модифицировать. Отвечают всегда по-разному: нельзя, можно, только при согласии разработчиков.
Что показывает проверка UI-кита?
По результатам проверки мы определяем количество часов, которое нам понадобится, чтобы настроить среду для разработки дизайна. Их оплачивает заказчик. Это количество часов еще и влияет на старт проекта. Чем качественнее UI-кит, тем быстрее мы начнем.
Впрочем, на доработку кита до уровня, когда можно начинать дизайн, не требуется бешеных денег. Мы справляемся за 3−5 часов. А потом уже по мере разработки дизайна дорисовываем оставшееся.
Если заказчик пришел с маркетинговым UI-китом или брендбуком, мы не сможем собрать из них интерфейс. Понадобится время, чтобы подготовить все элементы с нуля, подобрать соответствующие шрифты и цветовую палитру. Их тоже не всегда можно безболезненно интегрировать в интерфейс. Но об этом расскажем в следующий раз.
Статья также опубликована на vc.ru
26 мая 2020
Проекты «Собаки Павловой» с UI-китами заказчиков
Другие статьи
Быстро кодить нарисованный интерфейс — задача разработчиков. Но дизайнеры тоже могут повлиять на скорость реализации — с помощью юзер стори, интерактивных прототипов и документации.
Считается, что UI-kit ускоряет работу UX-дизайнера. Но это не так, даже если он уже в Figma. UI-kit не работает на уровне компонентов — только атомарных частиц.
Задача заказчика — сформулировать проблему, но часто он же пытается и придумать решение. То есть, сделать работу за дизайнера. Хотя у него на проекте есть своя важная роль.
Собака Павлова
Если не любите звонить, пишите
С парковкой все сложно. Велосипеды, самокаты и т.п. можно занести в офис.
2 минуты от площади Восстания.
Кое-что показываем и рассказываем на весь интернет
Позвонить тоже можно
На обычную почту
или в
(это наш директор)
Красивое на
, интересное в
, интересное
в
, полезное на
,
полезное на
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
в WhatsApp
,