Дизайн и разработка адаптивного сайта Uber Party

Посмотреть сайт: uberparty.ru

примеры адаптивного дизайна экранов сайта uber

Для петербургского отделения Uber мы разработали адаптивный промо-сайт, цель которого – привлечь новых пользователей сервиса.

Сначала тексты, потом – дизайн

Прежде чем приступить к разработке дизайна сайта, мы написали для него тексты. После их согласования приступили к дизайну.

тексты для экранов адаптивного сайта uber

Дизайн сайта: сначала – смартфон

Разработку дизайна адаптивного сайта начинаем с версии для смартфона в портретной ориентации:

дизайна адаптивного сайта uber в портретной ориентации

Как обычно, используем принцип постепенного раскрытия информации: шаг за шагом склоняем пользователя к совершению нужного заказчику действия – регистрации в сервисе Uber. Интригуем броским заголовком, после чего рассказываем, как просто и удобно пользоваться сервисом Uber.

страницы для скачивания приложения Uber и форма регистрации

Далее всего одним абзацем объясняем, что такое Uber и приводим три преимущества сервиса. Всё, что остаётся пользователю – скачать приложение, зарегистрироваться и ввести промо-код. Кнопка для скачивания приложения расположена под блоком преимуществ этого уникального сервиса.

После смартфона – планшет

По завершении разработки дизайна сайта для смарфтона в портретной ориентации, делаем версию дизайна для альбомной ориентации, и переходим созданию дизайна для планшета. Сначала делаем версию для портретной ориентации устройства, затем разрабатываем альбомную версию.

дизайн адаптивного сайта Uber для планшета

В заключении – дизайн для ПК

После разработки четырех версий дизайна для мобильных устройств, делаем ещё две версии дизайна сайта: первую – для компьютеров с небольшим экраном, вторую – для компьютеров с экраном побольше. Эти версии отличаются и дизайном, и программным кодом.

дизайн адаптивного сайта Uber ПК-версии

В первом случае фоновые изображения растягиваются под размер информационных блоков (которые не всегда вмещаются в один экран). На экранах побольше – в которых информационные блоки помещаются целиком – фоновые изображения растягиваются на весь экран (см. фото выше).

Немного о разработке сайта

После утверждения всех шести версий дизайна сайта заказчиком мы приступили к HTML-вёрстке и программированию. Готовый сайт тестировался на мобильных устройствах на базе Android и iOS, и в разных браузерах на нескольких компьютерах (с разными разрешениями) под управлением Windows и OS X.
 

* * *

Виды работ: разработка дизайна сайта
Исполнители: Андрей, Павел
Клиент: Uber
Регион: Санкт-Петербург
Сдача проекта: март 2016