Создание макетов сайта компании «СМС-центр»

Описание• Процесс

Изучив ТЗ, сразу придумываем сделать калькулятор стоимости СМС.

Арт-директор принимает заход. Пробуем играть со стилем.

Чувствуем необходимость использования темных фонов для выделения болванок сообщений-баннеров.

Арт-директор просит оживить и визуально поддержать идею калькулятора.

Пока все дежурное. Живые фоны уже сто раз были, руки с телефоном хоть и в тему, но всех достали. Копаем дальше.

Арт-директор предлагает доработать идею с людьми на фоне, реагирующими на калькулятор. Примеряем и заодно прикидываем подход к внутренним страницам.

Готовим подробное описание функциональности для презентации.

Сшиваем общий видеоскринкаст на основе ранее подготовленного прототипа и показываем презентацию.

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

Едем дальше.

Мимо. Но поиграть со статистикой — это вариант. Рождается мысль сделать легкий пролет от пикселизации в реальность.

Арт-директор одобряет, но просит избавиться от презентации «Эппла» и проработать сюжеты ближе к тексту статистики.

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

Вычищаем макеты, возвращаем калькулятор СМС-тарифов из прошлого захода.

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

Смотрим на карту кликов и погружаемся в статистику посещаемости рабочей версии. Около половины приходящих — это существующие пользователи сервиса, которые сразу направляются в личный кабинет. В разрабатываемой версии важно не добавить им проблем.

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

Главная страница не должна стать слишком сухой, поэтому добавляем немного эмоций: реальные примеры СМС-сообщений на разных типах устройств: тут и старая «Нокия», и модная «ай-ОС». С помощью таких «живых» сообщений показываем многообразие ситуаций, где не обойтись без услуг заказчика: разные люди, разные телефоны, разные сообщения.

Перемешиваем блоки, пытаемся найти форму.

Прощупав почву, делаем очередной подход к снаряду.

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

Зачастую наличие услуги и есть конкурентное преимущество, поэтому сервисы и преимущества объединяем в общий блок. Чтобы большой список не был слишком скучным, монолитную сетку блоков разбавляем различными вариантами акцентов.

Арт-директор принимает вариант, но советует кое-что поправить. Сообщение на главном экране доминирует над вступительным текстом, поэтому уменьшаем размер шрифта в сообщении и оставляем только контур.

Собираем презентацию и показываем заказчику оба варианта. Он принимает вторую концепцию. Для дальнейшего развития подключаем еще одного дизайнера.

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

На главной становится слишком весело, и плохо считывается изначальная идея. Рисуем телефоны.

Заголовок слишком формальный, под телефоном появляется шум, форму авторизации хочется сделать проще. Откладываем заголовок на потом и принимаемся за остальные улучшения. Безболезненно отказываемся от подписей, дублирующих содержимое картинок. Упрощаем форму входа.

Вместо синих стрелок, переключающих картинки, ставим одну серую кнопку обновления: так лаконичнее.

Проблему формального заголовка решаем его удалением.

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

Сработало: арт-директор утверждает макет.

Получаем замечания от заказчика. Нужна кнопка онлайн-поддержки.

Оставляем второй вариант без зеленого индикатора, после чего садимся рисовать страницу тарифов и АПИ.

Становится не очень понятно, в чем заключаются различия между тарифами и на чьем счете находится сумма. Добавляем подсказку по ховеру и уточняем заголовок.

Принято. Собираем типовую страницу.

Пишем менеджеру СМС о том, что все готово.