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

И Л И К А К Н Е З А С Т Р Я Т Ь

В О Д Н О М Р А З Р Е Ш Е Н И И

Д Е Н Ь

ЕДИНЫЙ ИНТЕРФЕЙС

04

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

Нет мобильного веба и большого веба,

есть один единый веб.

Да и дизайнер должен быть один,

а не разные под каждую платформу

Это единая система, но в разных

отображениях.

Е — ЕДИНЫЙ

ВАЖНО ДУМАТЬ О ВСЕХ УСТРОЙСТВАХ

Проект выглядит схоже на любом устройстве

Люди привыкают к единобразию интерфейса, единый опыт

Один веб-сайт для всех устройств, удобство разработки

ЧАСТО ПРО МОБИЛЬНЫЕ ВЕРСИИ ПРОСТО ЗАБЫВАЮТ

Общая мобильная аудитория Mail.Ru Group превысила 50%.

А, например, в «Одноклассниках» — это 64%.

Это общая тенденция и цифра только растет.

Google лчуше ранжирует сайты с мобильной версией.

ridus.ru

egais.ru

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

И СЕТКА

viewportsizes.com

1366x768

1600x900

1920x1080

1366x768

1600x900

1920x1080

1024x768

768x1024

1024x768

768x1024

320x480

480x320

320x480

480x320

ОСТАВЛЯЕМ ОСНОВНЫЕ БРЕЙКПОЙНТЫ

Д Е С К Т О П П Л А Н Ш Е Т М О Б И Л Ь Н Ы Е

Мы будем использовать значения,

которые видит бразузер, а не физическое

разрешение девайсов, т.е. всегда

используем 1x.

Именно эти значения будут проставлены

в media queries в CSS-стилях.

Мы будем использовать значения,

которые видит бразузер, а не физическое

разрешение девайсов, т.е. всегда

используем 1x.

Именно эти значения будут проставлены

в media queries в CSS-стилях.

РАБОТАЕМ С CSS-ПИКСЕЛЕМ И VIEWPORT-ОМ

Р Е Т И Н А

Б Р А У З Е Р

Сетка — это правила, т.е. меньше

ошибок: даже в презе есть сетка.

Продумываем сетку для каждого

брейкпойнта, колонки могут меняться.

Элементы сетки: колонка (column),

отступ между колонками (gutter) и

общий отступ по краям (margin).

Сетка — это правила, т.е. меньше

ошибок: даже в презе есть сетка.

Продумываем сетку для каждого

брейкпойнта, колонки могут меняться.

Элементы сетки: колонка (column),

отступ между колонками (gutter) и

общий отступ по краям (margin).

ВСЕ ДЕЛО В СЕТКЕ: ДЛЯ ВСЕХ БРЕЙКПОЙНТОВ

Резиновая сетка — кол-во колонок не меняется, они просто

меняют свою ширину.

Ступенчатая сетка — на брейкпойнтах меняется количество

колонок, лейаут перерисовывается.

Резиновая сетка — кол-во колонок не меняется, они просто

меняют свою ширину.

Ступенчатая сетка — на брейкпойнтах меняется количество

колонок, лейаут перерисовывается.

СЕТКА МОЖЕТ ТЯНУТЬСЯИЛИ МЕНЯТЬСЯ СТУПЕНЧАТО

MEDIA MAIL.RU

Ограниченная контентная область, чтобы было удобно

читать

Контролируемый размер блоков, хорошо работает

с графикой

Мобильная адаптация сейчас на другом урле

Ограниченная контентная область, чтобы было удобно

читать

Контролируемый размер блоков, хорошо работает

с графикой

Мобильная адаптация сейчас на другом урле

НА МЕДИА — СТУПЕНЬКАМИ

PRODUCTIVITYMAIL.RU

Сетка работатет без колонок, потому что у нас есть в

интерфейсе есть 5 горизонтальных блоков

Мы пытались выкроить максимум свободного места,

потому что для нас это важно

Сетка работатет без колонок, потому что у нас есть в

интерфейсе есть 5 горизонтальных блоков

Мы пытались выкроить максимум свободного места,

потому что для нас это важно

НА ПОЧТЕ РЕЗИНОВАЯ СЕТКА

ЕЩЕ ПРИМЕРЫ

ОТРИСОВКА ИНТЕРФЕЙСА

С ЧЕГО НАЧИНАТЬ?

Смотрим на аудиторию и проект — делаем вывод

на каких девайсах пользователи будут чаще использовать

наш сервис.

Новости, социальные сети — скорее мобильные.

Продуктивити-сервисы (редактирование текста, фото,

проектирование) — скорее десктоп.

КАКИЕ ДЕВАЙСЫ В ПРИОРИТЕТЕ?

Рисуем интерфейс под мобильный

телефон, потом масштабируем

до таблетки и десктопа

Упрощаем и оставляем только самое

важное

Держим в голове тачабельность,

все крупное, жирное

Легковесный (думает про графику)

MOBILE-FIRST

DESKTOP-FIRST

Начинаем с десктопа и деградируем

до мобильного

Учитывайте на длину строки

(от 45 до 75 знаков в идеале)

Компенсируйте ширину отступами

по краям

Продумайте сразу как могут

трансформироваться блоки

Начинаем с десктопа и деградируем

до мобильного

Учитывайте на длину строки

(от 45 до 75 знаков в идеале)

Компенсируйте ширину отступами

по краям

Продумайте сразу как могут

трансформироваться блоки

Привет, SURFACE — десктопы превращаются

в гибридов.

На этот вопрос можно ответить задачами проекта,

если это сложный продуктовый инструмент, то можно

пожертвовать тачабельностью в силу кол-ва контента.

Привет, SURFACE — десктопы превращаются

в гибридов.

На этот вопрос можно ответить задачами проекта,

если это сложный продуктовый инструмент, то можно

пожертвовать тачабельностью в силу кол-ва контента.

ДЕСКТОП УЖЕ ТОЖЕ ДОЛЖЕН БЫТЬ ТАЧАБЕЛЬНЫМ?

32

28

29

29

26

40

56

ИНСТРУМЕНТЫ

ADOBE EDGE REFLOW

Можно экспортировать

макеты из Photoshop-а

Произвольные брейкпойнты

Можно экспортнуть в верстку

и смотреть на локалке

Слегка посмотреть код,

скопировать стили

Можно экспортировать

макеты из Photoshop-а

Произвольные брейкпойнты

Можно экспортнуть в верстку

и смотреть на локалке

Слегка посмотреть код,

скопировать стили

MACAW

Максимально простой,

минимум элементов и стилей,

норм для адаптивности

Произвольные брейкпойнты

Качественный код, который

можно использовать в «бою»

Можно вставлять свой код

Максимально простой,

минимум элементов и стилей,

норм для адаптивности

Произвольные брейкпойнты

Качественный код, который

можно использовать в «бою»

Можно вставлять свой код

WEBFLOW

Полноценный GUI для верстки

Говорит на языке верстки

Собирает неплохой код

Брейкпойнты (с инфой про

дивайсы)

Можно экспортировать код

и паблишить на свой домен

Полноценный GUI для верстки

Говорит на языке верстки

Собирает неплохой код

Брейкпойнты (с инфой про

дивайсы)

Можно экспортировать код

и паблишить на свой домен

СВЕРСТАТЬ САМОМУ

Можно написать код самостоятельно. Для этого лучше

использовать готовые css-стили, в которых есть и сетки,

и типографика.

foundation.zurb.com/grid.html

getskeleton.com

purecss.io/grids

Можно написать код самостоятельно. Для этого лучше

использовать готовые css-стили, в которых есть и сетки,

и типографика.

foundation.zurb.com/grid.html

getskeleton.com

purecss.io/grids

DEVELOPER PREVIEW

Просмотр готового кода

Просмотр кода под девайс

Готовый набор

брейкпойнтов

Просмотр готового кода

Просмотр кода под девайс

Готовый набор

брейкпойнтов

БЛАГОДАРЧИК

fb.com/tema.gladkov