Upload
tema-gladkov
View
11.477
Download
3
Embed Size (px)
Citation preview
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