U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н Д Е Н Ь

БЫТЬ В ОТВЕТЕЗА ТО, ЧТО НАРИСОВАЛ

04

Гладков Артем

ОЖИДАНИЕ = РЕАЛЬНОСТЬ

В какой-то степени ты всегда получишь

не так, как нарисовал.

Но нужно быть готовым ко всем ограничениям:

и со стороны менеджера, и со стороны разработки.

Результат — это компромисс между дизайном

и разработкой.

ПОНИМАТЬ ОГРАНИЧЕНИЯ —ПОЛЕЗНО

Ты четко понимаешь свои возможности

Точнее результат

При малом наборе ингредиентов,

нужно быть изобретательным

Рождают доводы, для твоих решений

САМА ПЛАТФОРМА И ЕСТЬ ОГРАНИЧЕНИЕ: НЕМНОГО ПРО ВЕБ

Определемся что за проект и где пользователь будет с ним

работать: это веб-сервис, приложение для телефона или

часов, приложение для телевизора или что-то еще.

Так большинство ограничений сразу станут очевидными.

КАКИЕ ВОПРОСЫ СТОИТ СЕБЕ ЗАДАВАТЬ

В ПРОЦЕССЕ

ВСЕ ЛИ ДАННЫЕ Я СОБРАЛ?НЕ КОСМОС ЛИ Я ДО СИХ ПОР ДЕЛАЮ?

Можно воссоздать даже самый безумный макет,

но при этом есть две вещи о которых тебе напомнят

и разработчик, и менеджер: время и деньги.

Поэтому лучше сразу задать все вопросы, потому что

решение проблем, которых нет — плохая идея.

ЧТО БУДЕТ С ДИЗАЙНОМ НА РАЗНЫХ РАЗРЕШЕНИЯХ?

Ваш дизайн должен быть готов

ко всем разрешеням.

Отсюда подход к отрисовке макета,

сразу понимать как блок будет пере-

ходить из одного состояния в другое.

Много ли влезет в первый экран?

ЧТО У МЕНЯ ЗА ШРИФТ?Шрифт должен быть адаптирован

для веба

Быть на чеку и понимать размер

аудитории вашего проекта

Не забывть про рендер шрифта,

в разных браузерах

и операционных системах

Mac Windows

КАК ИНТЕРФЕЙС БУДЕТ МАСШТАБИРОВАТЬСЯ?

Если рисуете меню, то продумайте как оно будет себя

вести с большим количеством пунктов.

Если это текст с инлайн картинкой, то как будет

выглядить маленькая или огромная картинка.

Разное количество симолов в заголовке, тексте

или пункте меню.

НЕ ЗАБЫЛ ЛИ Я ПРО КРОССБРАУЗЕРНОСТЬ?

В современных браузерах многое решено, но если у

вас задача поддержки IE 7-8, обратите внимание:

SVG (IE9+)

CSS-скругления (IE9+)

Blur, grayscale, etc (без IE)

Градиенты (IE9+)

Скролл (ОС)

Лайт-версия — спасение

ПЕРЕИСПОЛЬЗОВАНИЕ ЭЛЕМЕНТОВ: НЕ БОРЩУ ЛИ Я?

Не плодить множество разновидностей

одного и того же блока.

Понимать, что один и тот же блок

может использоваться в разных местах,

это как раз путь к UI-киту.

Даже в маленьких проектах лучше

собирать все элементы.

КАСТОМНЫЕ КОНТРОЛЫ, ВСЕ ЛИ СТЕЙТЫ Я УЧЕЛ?

Нужно держать в голове все стейты

и понимать какие они могут быть.

Например, учитывать что в таче нет

ховера, а в вебе есть.

Кастомные контролы — это дорого.

На этот случай есть UI-kit.

ЧТО С ACCESSIBILITY?

Контрастность, особенно серый текст

Читабельность: небольшой кегль

с низкой контрастностью может убить

любой текст (плохие мониторы)

Сочетания цветов, черно-белый тест

Подписи и альты, заложитесь сразу

на такие вещи напомните об этом

разработчику.

УЧЕЛ ЛИ Я ВСЕ КРАЙНИЕ СЛУЧАИ?

Разобрать все крайние случаи работы с интерфейсом:

низкая скорость соединения

отсутствие соединения

не подгрузились шрифты (хак из Почты)

картинки

ДОПОЛНИТЕЛЬНЫЕСОВЕТЫ

СЕСТЬ РЯДОМ С РАЗРАБОТКОЙ

Ускоряется процесс

Легче задать вопрос разработчику

и ему задать тебе

Узнаешь проект изнутри,

понимаешь логику и лексику

Мир, дружба, жвачка (Бурлак)

ПРОЕКТИРОВАТЬ В ЛЮБОЙ НЕПОНЯТНОЙ СИТУАЦИИ

Даже без понимания кода, собрав

примитивный прототип, можно

попытаться проверить свои ожидания

в действии даже на сыром дизайне.

Например, проверить как будет

работать выдвигающееся меню, если

вы на него рассчитваете.

ПОНИМАТЬ ВЕРСТКУ (КОД)

Упрощает коммуникацию

Поведение блоков на верстке (наша типографика)

Понимание анимации и динамики: стили, JS

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

разработчику (без отрисовки, на живом)

Бонус в резюме

htmlacademy.ru

coursera.org codepen.io

codecademy.com

КОВЫРЯТЬСЯ В ИНСПЕКТОРЕ

Просто необходимая вещь

при работе с вебом

Хорошо работает, когда нужно

посмотреть сверстанный макет

Просмотр под разным viewport-ом

Симуляция медленного интернета

немного.js

Немного знаний javascript никогда не помешает, как

минимум это поможет понимать весь арсенал веба

и грамотно выбирать решение стоящей проблемы.

Это новый уровень: уже не верстка, а веб-разработка.

htmlacademy.ru

codecademy.com

<script>

</script>

SIMPLE CHECK-LIST

Кто и как

Адаптация

Шрифты

Няхи

Контраст

Масштаб

1 4

2 5

3 6

ТАКТИКА В ДЕЙСТВИИ

БЛАГОДАРЧИК

fb.com/tema.gladkov