На главную

Персональный сайт-блого бизнесе в Digital

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

Ссылка на сайт
СКРОЛЛ ВНИЗ
линия
мокап и скрин блога о digital khorin.ru мокап и скрин блога о digital khorin.ru мокап и скрин блога о digital khorin.ru
градиент, задний фон иконка, портфель

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

тире число
декоративный элемент

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

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

фоновое изображение
декоративный элемент

ЧТО СДЕЛАЛИ

число
тире

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

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

число
тире

Продумали наполнение страниц

3 рабочих дня

число
тире

Оформили дизайн страниц

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

число
тире

Сверстали и запрограммировали сайт

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

фоновое изображение
декоративный элемент

РЕЗУЛЬТАТЫ

число
тире

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

число
тире

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

число
тире

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

число
тире

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

фоновое изображение
градиент, задний фон иконка, портфель

Концепция сайта

тире число
мокап с сайтом khorin.ru декоративная линия

ЦЕЛЕВАЯ АУДИТОРИЯ

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

фото Романа Хорина декоративная линия

КОНЦЕПЦИЯ САЙТА

Чтобы усилить погружение в контент, мы подали его через личную историю основателя агентства Atman Романа Хорина. Блог от первого лица интереснее читать. А чтобы посетитель лучше узнал повествователя, мы совместили формат блога и сайта-визитки.

мокап с сайтом khorin.ru декоративная линия

КАК УДЕРЖАТЬ АУДИТОРИЮ?

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

градиент, задний фон иконка, портфель

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

тире число
мокап с сайтом khorin.ru декоративная линия

ГЛАВНАЯ СТРАНИЦА

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

мокап с сайтом khorin.ru декоративная линия

БЛОГ

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

мокап с сайтом khorin.ru декоративная линия

СТРАНИЦА СТАТЬИ

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

мокап с сайтом khorin.ru декоративная линия

ПРОЕКТЫ

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

мокап с сайтом khorin.ru декоративная линия

ОБ АВТОРЕ

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

мокап с сайтом khorin.ru декоративная линия

КОНТАКТЫ

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

градиент, задний фон иконка, портфель

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

тире число
мокап с сайтом khorin.ru декоративная линия

ВЫБОР СТИЛИСТИКИ

Основная задача стилистики — погрузить пользователя в мир Digital. Через акцент на плавных линиях показали гибкость Digital. Иллюстрации и фотографии подчеркивают яркость Digital, которая дополняется цветовой комбинацией из фиолетового и красно-разового.

фото Романа Хорина декоративная линия

ОФОРМЛЕНИЕ МЕНЮ

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

мокап с сайтом khorin.ru декоративная линия

ГАРМОНИЯ В АНИМАЦИЯХ

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

фото Романа Хорина декоративная линия

СИСТЕМНЫЙ ПОДХОД

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

мокап с сайтом khorin.ru декоративная линия

НАТИВНЫЙ ДИЗАЙН

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

градиент, задний фон иконка, портфель

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

тире число
01 тире

Цвета

брендбук сайта khorin.ru
02 тире

Шрифты

брендбук сайта khorin.ru
задний фон
03 тире

Мобильное меню

брендбук сайта khorin.ru
04 тире

Социальные сети

брендбук сайта khorin.ru
задний фон
05 тире

Навигация и кнопки

брендбук сайта khorin.ru
06 тире

Иконки для проектов

брендбук сайта khorin.ru
задний фон
градиент, задний фон иконка, портфель

Usability-решения

тире число
мокап с сайтом khorin.ru декоративная линия

ИНТЕРФЕЙС «ЗАПИСЬ В БЛОГЕ»

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

Посмотреть вживую
фото Романа Хорина декоративная линия

ИНТЕРФЕЙС «ПРОЕКТЫ»

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

Посмотреть вживую
мокап с сайтом khorin.ru декоративная линия

МОБИЛЬНОЕ МЕНЮ

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

фото Романа Хорина декоративная линия

UI-ПОДСКАЗКИ

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

Посмотреть вживую
градиент, задний фон иконка, портфель

Программные решения

тире число
декоративная линия

ДИНАМИЧНОСТЬ

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

мокап с сайтом khorin.ru декоративная линия

ПОГРУЖЕНИЕ

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

мокап с сайтом khorin.ru декоративная линия

ШАБЛОНИЗАЦИЯ

Публикация статьи состоит из 12 этапов. Чтобы ускорить процесс, мы составили скрипт-описание. Он не дает упускать из виду мелочи и сокращает время публикации на 1 час.

Посмотреть скрипт
мокап с сайтом khorin.ru декоративная линия

ПРОТОТИП CMS

Разработали прототип собственной CMS. Изучили типовые действия администратора и составили майнд-карту необходимого функционала, разбив его по страницам. Создали дизайн-концепцию для CMS.

Изучить майнд-карту

Спасибо за внимание!

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

Ссылка на сайт
подложка для иконки иконка, вопрос-ответ

Оставить заявку

Выберите тип услуги

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

+7 (996) 777-40-54