Lecture about tech restrictions in web design. It includes a list of tips for a newbie.

1. U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н
БЫТЬ В ОТВЕТЕ
ЗА ТО, ЧТО
НАРИСОВАЛ
Гладков Артем

4. ОЖИДАНИЕ = РЕАЛЬНОСТЬ
В какой-то степени ты всегда получишь
не так, как нарисовал.
Но нужно быть готовым ко всем ограничениям:
и со стороны менеджера, и со стороны разработки.
Результат — это компромисс между дизайном
и разработкой.

7. ПОНИМАТЬ ОГРАНИЧЕНИЯ —
ПОЛЕЗНО
Ты четко понимаешь свои возможности
Точнее результат
При малом наборе ингредиентов,
нужно быть изобретательным
Рождают доводы, для твоих решений

8. САМА ПЛАТФОРМА
И ЕСТЬ ОГРАНИЧЕНИЕ:
НЕМНОГО ПРО ВЕБ
Определемся что за проект и где пользователь будет с ним
работать: это веб-сервис, приложение для телефона или
часов, приложение для телевизора или что-то еще.
Так большинство ограничений сразу станут очевидными.

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

10. ВСЕ ЛИ ДАННЫЕ Я СОБРАЛ?
НЕ КОСМОС ЛИ Я ДО СИХ
ПОР ДЕЛАЮ?
Можно воссоздать даже самый безумный макет,
но при этом есть две вещи о которых тебе напомнят
и разработчик, и менеджер: время и деньги.
Поэтому лучше сразу задать все вопросы, потому что
решение проблем, которых нет — плохая идея.

11. ЧТО БУДЕТ С ДИЗАЙНОМ
НА РАЗНЫХ РАЗРЕШЕНИЯХ?
Ваш дизайн должен быть готов
ко всем разрешеням.
Отсюда подход к отрисовке макета,
сразу понимать как блок будет пере-
ходить из одного состояния в другое.
Много ли влезет в первый экран?

12. ЧТО У МЕНЯ ЗА ШРИФТ?
Шрифт должен быть адаптирован
для веба
Быть на чеку и понимать размер
аудитории вашего проекта
Не забывть про рендер шрифта,
в разных браузерах
и операционных системах

13. Mac Windows

14. КАК ИНТЕРФЕЙС БУДЕТ
МАСШТАБИРОВАТЬСЯ?
Если рисуете меню, то продумайте как оно будет себя
вести с большим количеством пунктов.
Если это текст с инлайн картинкой, то как будет
выглядить маленькая или огромная картинка.
Разное количество симолов в заголовке, тексте
или пункте меню.

15. НЕ ЗАБЫЛ ЛИ Я ПРО
КРОССБРАУЗЕРНОСТЬ?
В современных браузерах многое решено, но если у
вас задача поддержки IE 7-8, обратите внимание:
SVG (IE9+)
CSS-скругления (IE9+)
Blur, grayscale, etc (без IE)
Градиенты (IE9+)
Скролл (ОС)
Лайт-версия — спасение

16. ПЕРЕИСПОЛЬЗОВАНИЕ
ЭЛЕМЕНТОВ: НЕ БОРЩУ ЛИ Я?
Не плодить множество разновидностей
одного и того же блока.
Понимать, что один и тот же блок
может использоваться в разных местах,
это как раз путь к UI-киту.
Даже в маленьких проектах лучше
собирать все элементы.

17. КАСТОМНЫЕ КОНТРОЛЫ,
ВСЕ ЛИ СТЕЙТЫ Я УЧЕЛ?
Нужно держать в голове все стейты
и понимать какие они могут быть.
Например, учитывать что в таче нет
ховера, а в вебе есть.
Кастомные контролы — это дорого.
На этот случай есть UI-kit.

18. ЧТО С ACCESSIBILITY?
Контрастность, особенно серый текст
Читабельность: небольшой кегль
с низкой контрастностью может убить
любой текст (плохие мониторы)
Сочетания цветов, черно-белый тест
Подписи и альты, заложитесь сразу
на такие вещи напомните об этом
разработчику.

19. УЧЕЛ ЛИ Я ВСЕ
КРАЙНИЕ СЛУЧАИ?
Разобрать все крайние случаи работы с интерфейсом:
низкая скорость соединения
отсутствие соединения
не подгрузились шрифты (хак из Почты)
картинки

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

21. СЕСТЬ РЯДОМ С РАЗРАБОТКОЙ
Ускоряется процесс
Легче задать вопрос разработчику
и ему задать тебе
Узнаешь проект изнутри,
понимаешь логику и лексику
Мир, дружба, жвачка (Бурлак)

22. ПРОЕКТИРОВАТЬ В ЛЮБОЙ
НЕПОНЯТНОЙ СИТУАЦИИ
Даже без понимания кода, собрав
примитивный прототип, можно
попытаться проверить свои ожидания
в действии даже на сыром дизайне.
Например, проверить как будет
работать выдвигающееся меню, если
вы на него рассчитваете.

23. ПОНИМАТЬ ВЕРСТКУ (КОД)
Упрощает коммуникацию
Поведение блоков на верстке (наша типографика)
Понимание анимации и динамики: стили, JS
Править стили самому в инспекторе и отдавать правки
разработчику (без отрисовки, на живом)
Бонус в резюме

24. htmlacademy.ru
coursera.org codepen.io
codecademy.com

25. КОВЫРЯТЬСЯ В ИНСПЕКТОРЕ
Просто необходимая вещь
при работе с вебом
Хорошо работает, когда нужно
посмотреть сверстанный макет
Просмотр под разным viewport-ом
Симуляция медленного интернета

26. немного.js
Немного знаний javascript никогда не помешает, как
минимум это поможет понимать весь арсенал веба
и грамотно выбирать решение стоящей проблемы.
Это новый уровень: уже не верстка, а веб-разработка.
htmlacademy.ru
codecademy.com
<script>
</script>

27. SIMPLE CHECK-LIST
Кто и как
Адаптация
Шрифты
Няхи
Контраст etc
Масштаб
1 4
2 5
3 6

28. Спасибо
fb.com/tema.gladkov