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

Polonium design doc

Embed Size (px)

Citation preview

Page 1: Polonium design doc

Обычный вид1400px

Адаптив400px

1

3

2

42

1

4

7

7

2

2

7

6

5

В адаптиве теги перемещаем в самый низ карточки.

1

2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.

3 Центруем элементы страницы в монолитную выдачу информации.

4 Навигацию по каталогу опускам в низ страницы над тапками.

5 Скриншоты в адаптиве выводятся без изображения устройств.

6 Превращаем блок в тачевую листалку карточек. (управление жестами, например, свайп). Чередуем скриншоты с описанием.

7 Избавляемся от фотографий в конверсейшне и отзывах. Оставляем имена, должности, контактные данные.

В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных

адаптивов понимаем разницу между интерфейсными и контентными ссылками.

Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —

пропорционально уменьшаются изображения.

Не забываем про тап области в мобильных устройствах. Тап область не менее 44

пикселей по ширине и высоте объекта.

Page 2: Polonium design doc

Обычный вид1400px

Адаптив400px

1

3

2

4

4

4

4

4

4

5

5

В адаптиве теги перемещаем в самый низ карточки.

1

2 Интерфейсные ссылки превращаем в кнопки не забывая про тап области.

3 Кнопку покупки приложения опускаем вниз карточки.

4 Изображения в адаптиве игнорируют все свойства позиционирования и располагаются по центру сверху вниз занимая всю ширину экрана.

5 Избавляемся от фотографий в комментариях. Оставляем имена, должности, контактные данные - если есть.

Страница процесса может выглядеть намного проще нарисованной нами. Допустим «упорядоченный» графический хаос на странице. Изоабражения можно расставлять так-же как в адаптиве: одну под другой, при этом желательно чтобы изображение занимало всю эффективную область экрана (если ширина изображения позволяет это сделать). Если нет — можно расположить по центру эффективной области

В адаптивном режиме все интерфейсные ссылки превращаем в кнопки. Из отрисованных

адаптивов понимаем разницу между интерфейсными и контентными ссылками.

Изображения на сайте адаптируются под ширину окна: уменьшаем ширину —

пропорционально уменьшаются изображения.

Не забываем про тап области в мобильных устройствах. Тап область не менее 44

пикселей по ширине и высоте объекта.