Документ посвящен основам продуктового дизайна с акцентом на создание единого интерфейса для различных устройств, учитывающего растущую мобильную аудиторию. Обсуждаются важность работы с брейкпойнтами, сетками и адаптивной версткой, а также инструменты для разработки, такие как Adobe Edge Reflow и Webflow. Кроме того, акцентируется внимание на принципах mobile-first и desktop-first подходов в дизайне интерфейсов.

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

2. Нет мобильного веба и большого веба,
есть один единый веб.
Да и дизайнер должен быть один,
а не разные под каждую платформу
Это единая система, но в разных
отображениях.
Е — ЕДИНЫЙ

3. ВАЖНО ДУМАТЬ
О ВСЕХ УСТРОЙСТВАХ
Проект выглядит схоже на любом устройстве
Люди привыкают к единобразию интерфейса, единый опыт
Один веб-сайт для всех устройств, удобство разработки

4. ЧАСТО ПРО МОБИЛЬНЫЕ
ВЕРСИИ ПРОСТО ЗАБЫВАЮТ
Общая мобильная аудитория Mail.Ru Group превысила 50%.
А, например, в «Одноклассниках» — это 64%.
Это общая тенденция и цифра только растет.
Google лчуше ранжирует сайты с мобильной версией.

5. ridus.ru

6. egais.ru

7. УСТРОЙСТВА,
БРЕЙКПОЙНТЫ
И СЕТКА

9. viewportsizes.com

10. 1366x768
1600x900
1920x1080
1366x768
1600x900
1920x1080
1024x768
768x1024
1024x768
768x1024
320x480
480x320
320x480
480x320
ОСТАВЛЯЕМ
ОСНОВНЫЕ БРЕЙКПОЙНТЫ
Д Е С К Т О П П Л А Н Ш Е Т М О Б И Л Ь Н Ы Е

12. Мы будем использовать значения,
которые видит бразузер, а не физическое
разрешение девайсов, т.е. всегда
используем 1x.
Именно эти значения будут проставлены
в media queries в CSS-стилях.
Мы будем использовать значения,
которые видит бразузер, а не физическое
разрешение девайсов, т.е. всегда
используем 1x.
Именно эти значения будут проставлены
в media queries в CSS-стилях.
РАБОТАЕМ С CSS-ПИКСЕЛЕМ
И VIEWPORT-ОМ
Р Е Т И Н А
Б Р А У З Е Р

13. Сетка — это правила, т.е. меньше
ошибок: даже в презе есть сетка.
Продумываем сетку для каждого
брейкпойнта, колонки могут меняться.
Элементы сетки: колонка (column),
отступ между колонками (gutter) и
общий отступ по краям (margin).
Сетка — это правила, т.е. меньше
ошибок: даже в презе есть сетка.
Продумываем сетку для каждого
брейкпойнта, колонки могут меняться.
Элементы сетки: колонка (column),
отступ между колонками (gutter) и
общий отступ по краям (margin).
ВСЕ ДЕЛО В СЕТКЕ:
ДЛЯ ВСЕХ БРЕЙКПОЙНТОВ

14. Резиновая сетка — кол-во колонок не меняется, они просто
меняют свою ширину.
Ступенчатая сетка — на брейкпойнтах меняется количество
колонок, лейаут перерисовывается.
Резиновая сетка — кол-во колонок не меняется, они просто
меняют свою ширину.
Ступенчатая сетка — на брейкпойнтах меняется количество
колонок, лейаут перерисовывается.
СЕТКА МОЖЕТ ТЯНУТЬСЯ
ИЛИ МЕНЯТЬСЯ СТУПЕНЧАТО

15. MEDIA MAIL.RU

19. Ограниченная контентная область, чтобы было удобно
читать
Контролируемый размер блоков, хорошо работает
с графикой
Мобильная адаптация сейчас на другом урле
Ограниченная контентная область, чтобы было удобно
читать
Контролируемый размер блоков, хорошо работает
с графикой
Мобильная адаптация сейчас на другом урле
НА МЕДИА — СТУПЕНЬКАМИ

20. PRODUCTIVITY
MAIL.RU

21. Сетка работатет без колонок, потому что у нас есть в
интерфейсе есть 5 горизонтальных блоков
Мы пытались выкроить максимум свободного места,
потому что для нас это важно
Сетка работатет без колонок, потому что у нас есть в
интерфейсе есть 5 горизонтальных блоков
Мы пытались выкроить максимум свободного места,
потому что для нас это важно
НА ПОЧТЕ РЕЗИНОВАЯ СЕТКА

22. ЕЩЕ ПРИМЕРЫ

23. ОТРИСОВКА
ИНТЕРФЕЙСА
С ЧЕГО НАЧИНАТЬ?

24. Смотрим на аудиторию и проект — делаем вывод
на каких девайсах пользователи будут чаще использовать
наш сервис.
Новости, социальные сети — скорее мобильные.
Продуктивити-сервисы (редактирование текста, фото,
проектирование) — скорее десктоп.
КАКИЕ ДЕВАЙСЫ
В ПРИОРИТЕТЕ?

27. Рисуем интерфейс под мобильный
телефон, потом масштабируем
до таблетки и десктопа
Упрощаем и оставляем только самое
важное
Держим в голове тачабельность,
все крупное, жирное
Легковесный (думает про графику)
MOBILE-FIRST

29. DESKTOP-FIRST
Начинаем с десктопа и деградируем
до мобильного
Учитывайте на длину строки
(от 45 до 75 знаков в идеале)
Компенсируйте ширину отступами
по краям
Продумайте сразу как могут
трансформироваться блоки
Начинаем с десктопа и деградируем
до мобильного
Учитывайте на длину строки
(от 45 до 75 знаков в идеале)
Компенсируйте ширину отступами
по краям
Продумайте сразу как могут
трансформироваться блоки

31. Привет, SURFACE — десктопы превращаются
в гибридов.
На этот вопрос можно ответить задачами проекта,
если это сложный продуктовый инструмент, то можно
пожертвовать тачабельностью в силу кол-ва контента.
Привет, SURFACE — десктопы превращаются
в гибридов.
На этот вопрос можно ответить задачами проекта,
если это сложный продуктовый инструмент, то можно
пожертвовать тачабельностью в силу кол-ва контента.
ДЕСКТОП УЖЕ ТОЖЕ
ДОЛЖЕН БЫТЬ ТАЧАБЕЛЬНЫМ?

32. 32
28

33. 29
29
26

34. 40
56

35. ИНСТРУМЕНТЫ

36. ADOBE EDGE REFLOW
Можно экспортировать
макеты из Photoshop-а
Произвольные брейкпойнты
Можно экспортнуть в верстку
и смотреть на локалке
Слегка посмотреть код,
скопировать стили
Можно экспортировать
макеты из Photoshop-а
Произвольные брейкпойнты
Можно экспортнуть в верстку
и смотреть на локалке
Слегка посмотреть код,
скопировать стили

37. MACAW
Максимально простой,
минимум элементов и стилей,
норм для адаптивности
Произвольные брейкпойнты
Качественный код, который
можно использовать в «бою»
Можно вставлять свой код
Максимально простой,
минимум элементов и стилей,
норм для адаптивности
Произвольные брейкпойнты
Качественный код, который
можно использовать в «бою»
Можно вставлять свой код

38. WEBFLOW
Полноценный GUI для верстки
Говорит на языке верстки
Собирает неплохой код
Брейкпойнты (с инфой про
дивайсы)
Можно экспортировать код
и паблишить на свой домен
Полноценный GUI для верстки
Говорит на языке верстки
Собирает неплохой код
Брейкпойнты (с инфой про
дивайсы)
Можно экспортировать код
и паблишить на свой домен

39. СВЕРСТАТЬ САМОМУ
Можно написать код самостоятельно. Для этого лучше
использовать готовые css-стили, в которых есть и сетки,
и типографика.
foundation.zurb.com/grid.html
getskeleton.com
purecss.io/grids
Можно написать код самостоятельно. Для этого лучше
использовать готовые css-стили, в которых есть и сетки,
и типографика.
foundation.zurb.com/grid.html
getskeleton.com
purecss.io/grids

40. DEVELOPER PREVIEW
Просмотр готового кода
Просмотр кода под девайс
Готовый набор
брейкпойнтов
Просмотр готового кода
Просмотр кода под девайс
Готовый набор
брейкпойнтов

41. БЛАГОДАРЧИК
fb.com/tema.gladkov