Найти тему

Как я задизайнила свой первый лонгрид

Оглавление

Зимой этого года я начала заниматься на курсе Логомашины по веб-дизайну. Долгое время ходила на их интенсивы и вот решилась на полный курс. После изучения Фигмы, мне предстояло создать первый обучающий проект с курса.

Если вы вдруг не знаете, лонгридом называют сайт-статью с большим количеством текста.

Для своей работы я выбрала статью на тему "7 заповедей работы с клиентами из дома"

Изначально я просто визуально сгруппировала текста каждого пункта с помощью отступов, выделила заголовки увеличением кегля. То есть просто немного навела порядок и структурировала текст.

Референсы

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

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

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

Цвета и шрифты

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

Также я подобрала шрифтовую пару для проекта - Prosto One для заголовков и Rubik для основного текста.

Иллюстрации

Главным графическим приемом проекта я сделала смещение обводки элементов оформлений и иллюстраций.

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

Что получилось в итоге

После всех исправлений по рекомендациям куратора, получился вот такой лонгрид, который я затем выложила на Behance.