Задача: познакомить пользователей с молодой американской компанией, которая ремонтирует дома и квартиры.
Решение: клиенты заказчика - люди с достатком выше среднего.
Разрабатываем сайт с классической, не умирающей со временем, версткой страниц. Используем иллюстрации отрисованные дизайнером вручную.
В центре визуалы, реальные фотографии отремонтированных домов, которые предоставил клиент.
Выводим на отдельную страницу список услуг. Делаем краткое описание, и добавляем к каждому пункту иллюстрацию, для более легкой визуальной ориентации
Знакомим с руководителем компании. Приводим его цитату о целях Quality Built Construction. Вызываем доверие у пользователей.
Оснавная задача страницы показать проекты компании. Пользователь может заинтересоваться частичным ремонтом, поэтому добавляем фильтр по видам услуг
На странице одного проекта фотографии автоматически раскладываются по нерегулярной блочной сетке, чтобы проект было интересно смотреть.
На странице контактов — адрес, телефоны и форма обратной связи. Карту по просьбе заказчика не добавляем.
80% американцев предпочитают мобильные устройства, готовим мобильную версию сайта, уделяя особое внимание простоте и удобству.
Знакомимся с заказчиком и обсуждаем будущий сайт. Компания «Quality Built Construction» молодая и только выходит на рынок строительных услуг в Америке. Предлагаем сделать адаптивный сайт визитку, который познакомит пользователя с предоставляемыми услугами и готовыми проектами.
Делаем прототип гланой и начинаем думать над дизайн-концепцией.
Арт-директор говорит, что мало американщины, страница вялая и скучная, ее не хочется долго смотреть. Проект менеджер приносит дизайнеру американские газеты с хорошей версткой и типографикой: «Вдохновляйся!»
Подчиняемся, вдохновляемся
Начинаем переосмысливать первый экран
Арт-директор советует почитать Тима Харровера, нужна хорошая верстка с иллюстрациями. Читаем, доверстываем главную страницу.
Работаем над страницей портфолио. Пробуем разные варианты плитки. Останавливаемся на последнем варианте. Плитка не развалится, если добавить фильр по категориям ремонтных работ.
В ходе верстки страницы одного проекта, клиент присылает все фотографии своих работ. Изображения хорошего качества говорят сами за себя, принимаем однозначное решение: «Больше визуала, меньше текста.»
Выбираем второй вариант и приступаем к верстке страницы услуг. Клиент присылает фотографии к каждой услуге, просит использовать их.
Скучно и неинтересно. Пробуем другой подход.
Арт-директору концепция нравится, просит сделать больше иллюстрацию. Убираем фото с фона увеличаем иллюстрацию.
Дизайнер отрисовывает остальные иллюстрации под все категории услуг.
Все страницы готовы. Собираем кликабельный прототип и делаем его видеозапись. Презентуем заказчику.
Заказчик одобряет макеты, просит внести несколько правок в форму обратной связи. Вносим правки, еще раз согласовываем макеты и отдаем их на верстку и программирование.
