БЛОГ О DIGITAL ОТ ATMAN

Информация о проекте

ЗАДАЧИ И ВВОДНЫЕ

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

что сделали

Провели анализ целевой аудитории и рынка

6 рабочих дней

Провели анализ конкурентов

3 рабочих дня

Спроектировали интерфейс сайта

4 рабочих дня

Разработали дизайн-концепцию сайта

5 рабочих дней

ХОД РАБОТЫ

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

Cредняя оценка скорости загрузки страниц по данным Google Page Insights.

Нестандартных дизайн- и usability-решений было протестировано на сайте.

Адаптивных версий сайта было разработано: для ПК, планшетов и смартфонов.

структура сайта

Главная страница

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

каталог статей

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

Страница статьи

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

каталог проектов

Страница рассказывает о профессиональном опыте автора. Оформили навыки и результаты каждого проекта в виде иконок с элементами геймификации.

Об авторе

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

контакты

Задача страницы — показать все способы связи с автором. Мы оптимизировали загрузку страницы и довели ее до 1,6 секунды, сохранив дизайн и анимации.

Смотреть сайт

дизайн-решения

выбор стилистики

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

анимация меню

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

Гармония в анимациях

Мы проработали последовательность и скорость появления объектов для всех анимаций, чтобы эффекты гармонично сочетались с общим стилем сайта.

системный подход

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

нативный дизайн

Чтобы пользователь быстро освоил функционал сайта, мы сделали интерфейс похожим на популярные сервисы. Например, страница блога в мобильной версии похожа на Apple Store, астраница статьи — на запись из Medium.

ПРОГРАММНЫЕ РЕШЕНИЯ

динамичность

Мы анимировали фотографии на странице «Главная». За счет этого страница стала более динамичной.

Глубина

Внедрили 3D-эффект для карточек блога и рекомендаций. Это задерживает пользователей на странице и увеличивает их вовлеченность.

Шаблонизация

Шаблон записи в CMS позволяет публиковать новые статьи, копируя существующие записи. Это сократило время публикации статьи на 1,5 часа.

Функциональность

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

usability-решения

Интерфейс «запись в блоге»

Разработали два блока взаимодействий: социальный и навигационный. Первый позволяет оценить заметку и сделать ее репост в социальные сети. Второй - управлять положением на странице и сайте.

Интерфейс «проекты»

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

устройство мобильного меню

На смартфонах самые удобные области для пользователя- нижний левый и правый угол. В левом мы разместили кнопку меню. Для самого меню предусмотрели расширенную адаптивность: сделали компактную версию для небольших смартфонов и версию с иконками для крупных устройств.

UI-подсказки

Чтобы пользователю было легче ориентироваться на сайте, мы сделали ряд подсказок. Например, первая иконка в карточке проекта увеличивается и двигается из стороны в сторону. Это стимулирует пользователя прочитать дополнительную информацию.

Цвета, шрифты, UI-kit

другие ПРОЕКТЫ

сайт для Russian-singapore business dialogue

Разработали сайт конференции и подключили сервисы по оплате билетов.

Смотреть сайт

Лендинг для Finance Consulting Group

Проанализировали целевую аудиторию, конкурентов и разработали лендинг для услуги «Ипотека».

Смотреть сайт

интернет-магазин sneakers

Провели анализ целевой аудитории, спроектировали и разработали дизайн-концепцию сайта.

Смотреть кейс