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