Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

– Блок «У меня есть промокод».

– Кратко рассказать о каждом способе доставки и оплаты.

– Минимальный набор полей для оформления заказа (имя, телефон).

– Уведомление покупателя об изменении статуса заказа. Например, о том, что заказ передан курьеру, или о том, что заказ прибыл в пункт самовывоза. Так клиент поймет, что его заказ в обработке и сам о нём не забудет.

– Кратко рассказать о гарантиях и возврате.

После того как заказ оформлен, спроектируйте такое действие: выслать на e-mail клиента следующую информацию:

– состав заказа,

– дата доставки,

– данные для отслеживания,

– любые другие инструкции, которые могут быть полезны покупателю.

Корзина товара должна работать круглосуточно, иначе продажи сильно снизятся.

Рис.107. Корзина товара

7. Дополнительные страницы

Кроме этих страниц, бывает еще много дополнительных страниц на сайте (например, страница «Услуги», «Статьи», «Доставка» и т.д.), все они должны быть выполнены в едином стиле с первой страницей, иметь одинаковую «Шапку» и «Подвал». Их текстовое наполнение должно иметь одинаковую разметку заголовками и подзаголовками на всём сайте.

Рис.108. Страница «Услуги» на сайте

Во время разработки веб-дизайна дополнительно могут быть сделаны дизайны страниц: «Обучение», «Партнёрам», «Цены» (прайс), «Как оплатить заказ», «Корзина товаров», «Оплата и доставка», «Статьи» и т.д.

Рис. 109. Страница «Заказ и доставка»

Глава 15. Веб-дизайн мобильной версии

В этой главе:

1. Правила и особенности дизайна мобильной версии

2. Размеры и разрешение файла

3. Чем отличается мобильная версия от адаптивной?

4. Что нужно учесть при разработке мобильной версии

1. Правила и особенности дизайна мобильной версии

В последнее время всё больше и больше пользователей просматривают сайты с мобильных устройств: с телефонов и планшетов. Если раньше говорили, что это соотношение примерно 50 на 50%, то по последним данным, просмотров с мобильников больше, чем с десктопных версий (с настольных компьютеров). Процент пользователей сайтов с мобильных устройств стал больше шестидесяти процентов и этот показатель увеличивается. Так что веб-дизайнеру нужно очень хорошо продумать мобильную версию сайта, чтобы не потерять этих 60% посетителей.

Рис.110. Прототип мобильной версии сайта

Первое правило: адаптивность.

Самое главное в дизайне сайта для мобильных телефонов – адаптивность. Если дизайнер не продумает расположение блоков, элементы могут «поехать», накладываться друг на друга или остаться очень мелкими и пользователю придется пользоваться зумом.

Второе правило: укрупненный текст, упрощенный дизайн. Надо помнить, что мобильные устройства имеют ряд ограничений:

– маленький размер экрана;

– низкая скорость загрузки, по сравнению с компьютерами;

– сложности при вводе данных;

– некоторый контент не может быть отображен или отображается некорректно.

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

Правило третье: мобильное меню делается отдельно, обычно оно имеет компактный вид и раскрывается как выпадающее лишь в момент нажатия. Обычное меню сайта на мобильных устройствах не используется из-за маленьких размеров текста.

Правило четвертое: все элементы сайта в мобильной версии должны быть хорошо видны пользователю, не должно быть затруднений при взаимодействии с интерфейсом. Кнопка «Купить» или «Заказать» должна иметь укрупнённый размер, чтобы пользователю не пришлось увеличивать экран.

Правило пятое: контент в одной колонке.

Чтобы блоки сайта хорошо просматривались пользователями, веб-дизайнеры помещают контент в одну колонку. Текст и изображения располагаются по ширине, делается вертикальный скроллинг и одноколоночная структура.

Правило шестое: убрать с мобильной версии некоторые инструменты.

Например, плохо отображаются на мобильной версии различные чаты с онлайн-консультантами, появляющиеся формы для подписки, поп-ап окна и прочее. Лучше от них отказаться в мобильной версии, либо адаптировать под размеры телефонов.

Правило седьмое: сделать активными телефоны и мессенджеры.

Главное целевое действие для мобильных устройств – это получить звонок от клиента.

Для этого на сайте в мобильной версии делают следующие шаги: