Мой первый проект - дизайн-концепция лонгрида
Всем привет! Меня зовут Ольга и я веб-дизайнер.
На данный момент прохожу обучение в Логомашине. И недавно я закончила свой первый проект.
Для чего я здесь?! Хочу поделиться с вами, как я работала над этим проектом. Рассказать про этапы разработки дизайна и инструменты, которыми я пользовалась.
Итак, моей задачей было придумать дизайн-концепцию и оформить текст в лонгрид.
Тема текста: " 7 заповедей по работе с клиентами из дома".
На руках у меня был только готовый текст, разбитый на смысловые части.
1 этап: Поиск вдохновения и референсов. Создание мудборда.
Для поиска референсов я использовала две площадки: Pinterest и Behance. Там можно увидеть очень много качественных работ. Интерфейс очень понятный и позволяет быстро найти то, что необходимо.
Совет: непременно сохраняй то, что понравилось! Возможно, ты не используешь это сейчас, но в будущем может пригодиться. Для удобства можно распределить свои находки по категориям, по принципу того, что конкретно понравилось: шрифт, цветовая гамма, оформление какого-либо блока или расположение отдельных элементов в блоке и тому подобное.
При поиске референсов к данному проекту, мне приглянулось много вариантов.
И вот некоторые из них:
Что мне понравилось:
На первой фотографии мне понравилось расположение элементов, оно чередуется - то фото слева - текст справа, то наоборот. Может это и банально, но для статьи вполне подходящее решение. Поэтому я использовала данный вариант в своём лонгриде.
На второй - почерпнула идею "рамки" для изображения на главном экране. Но обыграла
в итоге немного по своему.
А на третьей - сочетание цветов. Один яркий акцентный цвет для выделения определённых элементов, светлый фон и текст чёрного цвета.
2 этап: создание вайрфрейма - чёрно-белого прототипа.
Он должен был быть, но.... я примерно понимала, как будут располагаться элементы.
Да и объём работы небольшой. Решила сразу приступить к сборке макета.
Поэтому перейдём к следующему этапу.
3 этап: UI KIT и сборка макета в Figma
Я определилась с элементами лонгрида, подобрала шрифт и цветовую гамму, нашла необходимый контент: изображения для обложки, фона и статьи. Изображения предпочитаю скачивать с сервиса Unsplash. Там много бесплатного и свободного контента.
Изначально у меня получался такой вариант. Расположение элементов как и хотела, но вот оформление в целом всё-же меня смущало. Много серого и текст на таком изображении читается плохо, не так ли?!
Но после проверки моей работы куратором, я поняла в какую сторону двигаться.
И вот что у меня получилось:
UI KIT проекта
Макет лонгрида
Для фона я использовала бумажную фактуру, так как статья ассоциируется у меня с журналами и газетами. Цветные фотографии и яркий оранжевый акцент оживили дизайн. Такую статью будет приятно читать и интересно рассматривать.
Вы можете посмотреть этот проект полностью, перейдя по ссылке.
P.S. Текст статьи очень полезный! Если вы работаете на удалёнке, советую прочитать)))
Благодарю за внимание!