Образцовый дизайн документ. Короткий и охуенный. Сделали вместе с Русланом Мирсалиховым Для Кости Копыльцова

1. Обычный вид
Адаптив
1400px
400px
1
В адаптиве теги перемещаем в самый
низ карточки.
2
Интерфейсные ссылки превращаем в
кнопки не забывая про тап области.
3
Центруем элементы страницы в
монолитную выдачу информации.
4
Навигацию по каталогу опускам в низ
страницы над тапками.
5
Скриншоты в адаптиве выводятся без
изображения устройств.
6
Превращаем блок в тачевую листалку
карточек. (управление жестами,
например, свайп). Чередуем скриншоты с
описанием.
7
Избавляемся от фотографий в
конверсейшне и отзывах. Оставляем
имена, должности, контактные данные.
2
1
3
4
2
5
6
7
7
7
1
4
2
2
В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных
адаптивов понимаем разницу между интерфейсными и контентными ссылками.
Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —
пропорционально уменьшаются изображения.
Не забываем про тап области в мобильных устройствах. Тап область не менее 44
пикселей по ширине и высоте объекта.

2. Обычный вид
Адаптив
1400px
400px
1
2
Кнопку покупки приложения опускаем
вниз карточки.
4
Изображения в адаптиве игнорируют все
свойства позиционирования и
располагаются по центру сверху вниз
занимая всю ширину экрана.
5
2
Интерфейсные ссылки превращаем в
кнопки не забывая про тап области.
3
1
В адаптиве теги перемещаем в самый
низ карточки.
Избавляемся от фотографий в
комментариях. Оставляем имена,
должности, контактные данные - если есть.
4
3
4
4
4
5
4
5
4
Страница процесса может выглядеть намного проще нарисованной нами. Допустим «упорядоченный»
графический хаос на странице. Изоабражения можно расставлять так-же как в адаптиве: одну под другой,
при этом желательно чтобы изображение занимало всю эффективную область экрана (если ширина
изображения позволяет это сделать). Если нет — можно расположить по центру эффективной области
В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных
адаптивов понимаем разницу между интерфейсными и контентными ссылками.
Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —
пропорционально уменьшаются изображения.
Не забываем про тап области в мобильных устройствах. Тап область не менее 44
пикселей по ширине и высоте объекта.