Блуждая по просторам интернета в поисках знаний я наткнулся на рекламу интенсива по веб-дизайну от Логомашины. И этот интенсив действительно оказался полезен: работа в портфолио и приглашение на курс со скидкой, которое я принял.
Эта статья о разборе моего первого учебного проекта, спустя два месяца с его разработки.
Задачи проекта
На выбор предоставлены два текста: Теория поколений в дизайне и 7 заповедей по работе с клиентами из дома. Я выбрал первый. Главная задача – оформить текст в лонгрид. Важно облегчить статью для восприятия и удержать внимание читателя.
Цель лонгрида: не перегружать читателя простынёй текста, дать ему что-то, за что можно зацепиться взглядом и немного отдохнуть от букв.
В этом проекте нужно было применить базовые знания о композиции, работе с типографикой, колористикой и сеткой. С частью из этого я не справился, далее расскажу почему, но обо всём по порядку.
Исследование
Лонгриды — это длинные оформленные статьи в веб-пространстве. Как правило, фирмы используют такой вид подачи материала для рекламных постов и создания экспертных статей. Чаще всего мы встречаемся с вторыми.
На практике проще всего понять, как работает что-либо, поэтому я отправился искать действующие и популярные примеры.
Приёмов, которые помогут создать визуальный ритм статьи и удержат внимание человека, немного:
- Иерархия заголовков;
- Заметки, комментарии автора;
- Маркированные, нумерованные списки;
- Выделение цветом;
- Фотографии;
- Видео, звуковое сопровождение;
- Анимация.
Прототип
Следующий этап, после исследования — оформление полотна текста в «преддизайн» — прототип лонгрида. Не самая зрелищная часть, но необходимая, чтобы определить структуру будущей статьи (к тому же, мне это помогает не потеряться перед «пустым листом»). Основное внимание уделяется иерархии в тексте, смыслу каждого блока.
Визуальный стиль
Самое время подобрать мудборд, определить визуальные приёмы, цветовую палитру и шрифты.
Далее шёл активный поиск концепции первого экрана и всего лонгрида... Остановился я в итоге на третьем варианте (на самом деле их было гораздо больше).
Для поддержания визуального ритма заключительные экраны каждой главы были сделаны на тёмном фоне. С той же целью добавлены карточки с фото и выноски курсивным начертанием (упакованные в компоненты).
В тексте из задания несколько раз встречались соотношения. А проценты проще воспринять визуально и диаграммы — идеально для этого подходят. Именно поэтому я решил их добавить в лонгрид (пример можете увидеть на второй картинке чуть выше).
Чтобы читатель смог немного повзаимодействовать с лонгридом с был добавлен таббар в блок «Что общего у каждого поколения» (его вы так же можете увидеть на второй картинке выше).
Навигация
Отдельная часть работы, которая несколько раз изменялась. Изначально планировалось сделать содержание только в начале лонгрида, но я решил, что боковая навигация будет удобнее. Так в любой момент чтения можно перейти к другому пункту статьи или вернуться в начало.
Ошибки в проекте
На этапе разработки дизайна и появляется первая ошибка: в качестве референса я взял социальные сети. А точнее идею «ленты» постов, только в случае лонгрида это блоки, каждый из которых отделён от другого плашкой, на которой находится контент.
Ошибка в том, что эти самые плашки создают шум. Это усложняет макет, в котором и так достаточно акцентов. Вторая ошибка — слишком «кислотные» цвета.
В случае лонгрида можно обойтись и вовсе без ярких цветов, а использовать только базовые (как на исправленном варианте выше). Но после проверки, мне всё же захотелось оставить три акцентных цвета, перед этим осветлив их, чтобы убрать «кислотность».
Казалось бы, это не кардинальные изменения — убрать тени и осветлить цвета, но читать стало чуть проще, а макет выглядит чище.
Результат
Презентацию проекта полностью можно посмотреть на Behance.
Спасибо за внимание! Поставьте оценку, если статья была вам полезна.
#кейс #лонгрид #разбор ошибок #учебный проект #веб-дизайн