| Дизайнер: | Владимир Потапов. |
| Суть задачи: | Разработать дизайн информационного ресурса о маркетинге. Особое внимание уделить подаче контента. Дизайн должен минимально отвлекать пользователя от чтения материалов. |
В информационном сайте основной упор делается на контент, поэтому уделяем особое внимание именно типографике. Для начала подбираем шрифты. Выбираем для заголовков PT Serif Bold, для основных текстов легко читаемый PT Sans Regular.
Шрифт заголовков H1, H2, H3
Шрифт основных текстов и надписей
Главная страница сайта представляет из себя подборку статей. Статьи разделены на две группы, в самой верхней части сайта показываем несколько самых свежих статей, ниже идет подборка популярных материалов. Если пользователь хочет просмотреть больше статей из какой-то группы, он нажимает на ссылку «ВСЯ ЛЕНТА» или «ВСЕ СТАТЬИ» и ему выдаются материалы нужной группы с бесконечным скролом. Таким образом, посетитель просто прокручивает ленту, получая новые материалы.
Прорабатываем анонс отдельной статьи, стараясь сделать его информативным и в тоже время не нагруженным.
Картинка статьи. По изображению пользователю будет легче сориентироваться, читал ли он раньше эту статью.
Название раздела для быстрого перехода в него.
Название статьи, может быть как очень длинным, так и коротким, блок легко адаптируется под него.
Дата публикации, количество просмотров и комментариев для оценки пользователем популярности материала.
Помним о hover-эффектах для предания большей интерактивности.
При наведении курсора на анонс статьи появляются теги, нажав на нужный, пользователь может подобрать в ленту материалы с интересующими его тематиками. Hover-эффект делаем незначительно отличающимся по цвету, таким образом он выглядит ненавязчиво, но на живом сайте в динамике достаточно заметен.
Кнопки расшаривания статьи в социальных сетях так же появляются на картинке статьи при наведении курсора. Такой функционал дает возможность быстро поделиться с друзьями интересной статьей , что повышает популярность и известность сайта. Счетчики над кнопками так же позволяют оценить популярность статьи.
Начинаем работать над страницей самой статьи, учитываем адаптивную верстку макета, при этом ширина статьи не должна тянуться слишком сильно, становясь очень длинной, иначе текст будет трудно читать. Отводим под ширину статьи не более 750px, остальное пространство заполняем анонсами популярных материалов.
Продолжаем работу над страницей статьи, разрабатывая систему комментирования. Прорабатываем различные возможные состояния и варианты комментирования.
Когда пользователь начинает вводить комментарий, фокус переходит на поле ввода и оно окрашивается активным цветом, кнопка отправки комментария становится активной только после того, как пользователь что-то написал.
Оставлять комментарии к статьям могут только авторизованные пользователи, поэтому работаем над системой авторизации и регистрации. Нажимая на кнопку соцсети пользователь автоматически входит в систему. Сайт сам понимает, был ли уже пользователь на сайте или это его первый вход и при необходимости создает профиль пользователя заполняя его данными из соцсети. Профиль пользователя в последствии можно отредактировать войдя в личный кабинет из бокового меню.
Разрабатываем боковое меню. выполняем его в виде выезжающего слева сайд-бара.
Если набирается больше 10 комментариев к статье, показываем 5 самых популярных комментариев и делаем переключатель.
О давности комментария сообщаем пользователю в человеко-понятном виде.
Показываем только два последних вложенных комментария, остальные скрываем под спойлером.
Комментарии имеют только один уровень вложенности. Это упрощает чтение и понижает вероятность флуда.
Прорабатываем hover-эффекты.
Если пользователь уже голосовал за комментарий, подсвечиваем его выбор.
Пользователям без аватарки в качестве изображения подставляем их инициалы.