Обновление сайта daniellesden.com

23 июня 2016 · Таня Соколовская

Дизайн Процессы Веб-разработка

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

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

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

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

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

Изначальный дизайн раздела в виде таймлайна

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

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

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

Изначальный дизайн раздела в виде таймлайна

Размышляем:

— А что если в группировках по темам выводить не все советы, а только важные по усмотрению автора? И показать их в красивой журнальной вёрстке с крупными картинками?

— И как это поможет?

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

— А где будут жить остальные статьи, помимо этих важных?

— Все остальные советы будут снизу в ленте, с этим без изменений.

— Получается, что постоянным читателям придется каждый раз прокручивать страницу вниз к этой ленте, чтобы узнать, вышли ли новые советы?

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

Звучит здорово. Приступаем к реализации:

Собираем макет предложенной идеи

Смотрим, оцениваем и продолжаем рассуждать:

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

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

— Это как?

— А вот так:

Анимация подгрузки помогает расставить акценты внимания

Это решение и вошло в финальную версию сайта.

О проекте

Обновление сайта daniellesden.com

в проектах студии

Читайте также

Процесс работы над логотипом детского магазина "Тютюпки"

Процесс работы над логотипом детского магазина «Тютюпки»

Интересное название у магазина детской одежды — Тютюпки! Не правда ли? :-) Мы тоже были удивлены, но, как оказалось, у названия есть история.

7 октября 2015
Дизайнерам. Объекты внутри модуля

Дизайнерам. Объекты внутри модуля

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

19 октября 2016
Персонаж агентства "Уткин дом"

Персонаж агентства «Уткин дом»

В прошлом году мы в студии создали логотип и стиль для агентства семейных праздников Екатерины Кещян «Уткин дом». В этом посте я расскажу о процессе работы над интересной особенностью стиля — фирменном персонаже.

5 августа 2015