Original size 1140x1600

Исследование проблем и сложностей работы дизайнеров на фрилансе

Ресурз — медиа для дизайнеров о работе на фрилансе

Original size 2480x300

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

Original size 2480x300

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

Для реализации этой цели выбран формат онлайн-медиа. Статичный веб-сайт состоит из разнообразных образовательных статей на тему работы на фрилансе и soft skills, а также статей интервью с известными дизайнерами-фрилансерами. Уникальным решением для сайта стал генератор договора, который значительно упрощает процесс заполнения шаблона документа и спроектирован в удобном формате чат-бота. Главная страница онлайн-медиа представляет собой посадочный лендинг с переходами к основным разделам. Дополнительно на сайте представлена страница «О нас» с информацией о проекте, его авторе и кураторе.

Original size 2480x1102

Original size 2480x300

Навигация

Для удобства навигации на сайте реализованы header и footer. В верхней части всех страниц онлайн-медиа зафиксирован header с логотипом, ссылками на основные разделы сайта и поиском. В нижней части страниц располагается минималистичный footer, где есть логотип, дата создания проекта, ссылки на страницу «О нас» и телеграм-канал медиа.

Страница каталога статей;
Категория персонажа

Страница каталог статей

В начале каталога пользователь видит приветственный баннер, затем переход в 3 категории статей: планирование, общение и сомнения, представленные в виде маскотов. Далее представлен блок со всеми статьями сайта, дополненный фильтрами, сортировочными тегами и поиском для удобного ориентирования.

Original size 2480x1632

Страница каталог интервью

Страница каталога интервью

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

Original size 2480x1632

Страница статьи. Десктопная версия

Страница статьи

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

Фото: страница статьи. Мобильная версия.

Original size 2480x1632

Генератор договора. Десктопная версия

Генератор договора

На странице реализована механика общения с чат-ботом в виде переписки. В начале у пользователя есть выбор: скачать пустой шаблон либо заполнить его на сайте. В переписке маскот задает необходимые вопросы, для которых можно выбрать готовый вариант ответа либо напечатать свой самостоятельно. Над текстовым полем закреплена линия прогресса, чтобы пользователь понимал, сколько времени займет заполнение. В конце маскот предложит скачать заполненный шаблон или продолжить с расширенными настройками в том же формате.

Original size 2480x1333

Генератор договора. Мобильная и планшетная версии

Original size 2480x1644

Главная страница

Главная страница представляет собой разводящий лендинг, рассказывающий об онлайн-медиа и ведущий к его основным разделам. Вначале пользователь видит hero section, предлагающий перейти к каталогу статей. Далее идет рассказ о маскотах медиа с переходами к их тематическим категориям, а также рекомендация с 3 последними статьями на сайте. Ниже пользователь видит креативный баннер про генератор договора и кнопку с переходом к нему. После можно увидеть раздел об интервью и 3 рекомендации с переходом к каталогу. В конце находится форма, призывающая подписаться на рассылку от медиа.

Original size 2480x2000

Структура разводящего лендинга/главной страницы

Страница о нас

На странице рассказывается о миссии проекта, его названии и истории создания. Также на ней представлена информация об авторе и ее кураторе с ссылками на их соцсети и портфолио.

Original size 2480x1231

Структура страницы о нас

Original size 2480x300

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

Суть

Онлайн-медиа для дизайнеров про работу на фрилансе. Наполнено полезными статьями о soft skills, интервью про опыт известных фрилансеров, а также с генератором договора для обеспечения юридической защищенности работы.

Название

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

Original size 2480x300

Характер бренда

Так как первичной целевой аудиторией являются студенты, начинающие фрилансеры, в основу характера бренда легли архетипы Опекуна и Исследователя. Важно вызвать у пользователя чувство, что «Ресурз» с ним на одной волне. Медиа должно откликаться его проблемам и переживаниям, поддерживать и помогать советом. И всё это простым языком, без сложных формулировок и нравоучений. Поэтому используемый TOV зумерский, дружелюбный, эмоциональный и поддерживающий.

Логотип

Фирменный знак имеет мягкую, обтекаемую форму, из-за чего вызывает чувство комфорта и безопасности. Его стиль можно охарактеризовать как мультяшный, подростковый, одним словом, неформальный. Так он полностью соответствует характеру бренда.

Original size 2480x611

Маскоты

Для того чтобы онлайн-медиа было дружелюбным и комфортным местом, были созданы 3 маскота, с помощью которых Ресурз сближается с пользователем. За основу были взяты 3 основных категории переживаний: планирование, сомнения и общение. Таким образом появились персонажи с говорящими именами — Суетуля, Потеряша и Токсинка. С помощью формы выражены их особенности. Так, Суетуля напоминает огонь (горящих дедлайнов), Потеряша расплывчата и не собрана, а Токсинка колкая и острая на язык. При этом у маскотов есть альтернативная версия с круглой формой, которая символизирует решение их проблем и успокоение.

Original size 2480x611

Original size 2480x300

Original size 2480x1702

Original size 2480x898

Original size 2480x1343

Original size 2480x1354

Original size 2480x1600

Original size 2480x300

Original size 2480x1700

Цветовая палитра состоит из 3 цветовых пар, характерных каждому маскоту. Как шрифтовое решение были выбраны Involve для заголовков и Inter для наборного текста. Заголовки в креативах обязательно оформляются белой плашкой.

Original size 1920x1161

Основным визуальным приемом стала сложная, псевдо объемная линия с градиентом. В зависимости от контекста зритель может интерпретировать ее по-разному. С ее помощью можно показать запутанность, сложность жизни фрилансера. Сложная линия, в то же время, может оказывать расслабляющее действие, помогать человеку отвлечься и сделать перерыв. Кроме того, линия может символизировать связи внутри сообщества, подчеркивая дружелюбность и открытость Ресурза.

Original size 2480x300

Original size 2480x1860

Фирменный стиль дополняется иллюстрациями, созданными с помощью бесплатной нейросети Leonardo AI и обработанными в Adobe Photoshop. На сайте они служат не только обложками для статей, но и визуальным акцентом внутри них. Чтобы обеспечить единство стиля иллюстраций, используется стилевой референс и промпт в нейросети.

За основу взята работа иллюстратора Эммы Чжан из серии «Dream Vision Tarot». Промпт выглядит следующим образом: «Diary notebook. Contrast bright neon gradient 2d illustration art style». В первом предложении описывается объект иллюстрации, но детали не раскрываются намеренно, чтобы создать более неожиданный и интересный результат. Второе предложение остается неизменным, дополняя стилевой референс.

Original size 2480x300

Original size 2480x1533

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

Ссылка на дизайн систему

Original size 2480x300

Bibliography

Show

Книга нормального фрилансера // Сайт нормального фрилансера URL: https://normfreelancer.ru/ (дата обращения: 02.12.2024).

Артём Исламов Путь фрилансера. Поколение людей, работающих в интернете. — 1 изд. — Издательские решения, 2019. — 263 с.

Лиза Ортман Фриланс с нуля, или Свободные воины Интернета. Работай там, где нравится, и зарабатывай столько, сколько хочется. — 1 изд. — Издательство АСТ, 2021. — 130 с.

Михаил Гаугаш Дизайн, фриланс и деревня. Проводник для начинающих графических, веб-, UX/UI дизайнеров. — 1 изд. — Издательские решения, 2024. — 110 с.

Дэвид Аллен Как привести дела в порядок: искусство продуктивности без стресса. — Издательство МИФ, 2016. — 427 с.

Глеб Архангельский Тайм-драйв. Как успевать жить и работать. — 30 изд. — Издательство МИФ, 2021. — 286 с.

Крис Бэйли Гиперфокус. Как я научился делать больше, тратя меньше времени. — Издательство Альпина Паблишер, 2018. — 265 с.

Лора Вандеркам Чувство штиля. Продуктивность и спокойствие в эпоху вечных дедлайнов. — Издательство БОМБОРА, 2020. — 240 с.

Original Winnie The Pooh Drawings by Ernest Howard Shepard // Flashback URL: https://flashbak.com/original-winnie-the-pooh-drawings-by-ernest-howard-shepard-457414/ (дата обращения: 02.12.2024).

10.

See How TIME’s Cover Evolved Over 100 Years // TIME URL: https://time.com/6257376/100-years-of-time-covers/ (дата обращения: 02.12.2024).

11.

Логотип Chupa Chups // HSE University Art and Design URL: https://design.hse.ru/news/1915 (дата обращения: 02.12.2024).

12.

Jack Nilles tried to ignite a work-from-home trend 48 years ago. It’s finally here // Lawrence University URL: https://www.lawrence.edu/articles/lu-alum-jack-nilles-father-telecommuting (дата обращения: 02.12.2024).

13.

К. Либлик Правовое регулирование дистанционного труда в США // Сравнительное трудовое право. — 2011. — № 5. — С. 1-9.

14.

Путь в 16 лет. Как развивался фриланс в России // FL URL: https://fl.ru/freelance-history/ (дата обращения: 02.12.2024).

15.

Дизайн на фрилансе // Яндекс Вордстат URL: https://wordstat.yandex.ru/?region=all&view=graph&words=%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%20%D0%BD%D0%B0%20%D1%84%D1%80%D0%B8%D0%BB%D0%B0%D0%BD%D1%81%D0%B5 (дата обращения: 02.12.2024).

16.

Фриланс в России — больше, чем фриланс? // ВЦИОМ URL: https://wciom.ru/analytical-reviews/analiticheskii-obzor/frilans-v-rossii-monitoring (дата обращения: 02.12.2024).

17.

Фриланс в России: мониторинг // ВЦИОМ URL: https://wciom.ru/analytical-reviews/analiticheskii-obzor/frilans-v-rossii-monitoring (дата обращения: 02.12.2024).

18.

Анализ домена fl.ru за октябрь 2024 // Similarweb URL: https://www.similarweb.com/ru/website/fl.ru/#overview (дата обращения: 02.12.2024).

19.

Дизайнеры фрилансеры. Тренды, доходы, возможности и цифры // Национальная Гильдия Фрилансеров URL: https://xn----8sbgbfirbb0aezowfo9bxjnc.xn--p1ai/pages/research-and-polls.html (дата обращения: 02.12.2024).

20.

The Surprising History of 'Freelance' // Merriam Webster URL: https://www.merriam-webster.com/wordplay/freelance-origin-meaning (дата обращения: 02.12.2024).

21.

The Origin of the Word Freelance and Why it Should Make Us Happy // Deskmag URL: https://www.deskmag.com/en/coworkers/the-origin-of-the-word-freelance-and-why-it-should-make-us-happy-freelancers-doing-what-you-love (дата обращения: 02.12.2024).

22.

Freelancer count in Russia 2014-2023 // Statista URL: https://www.statista.com/statistics/1206709/number-of-freelancers-russia/ (дата обращения: 02.12.2024).

23.

Данные опроса, проведенного автором исследования — https://docs.google.com/spreadsheets/d/1YHsIzjzm0IZZWq0lkPAIx-nQVc4RZodEj3zlVjuDHbk/edit?usp=sharing (дата обращения: 02.12.2024).

Image sources

Show

https://commons.wikimedia.org/wiki/File:Battle_of_crecy_froissart.jpg (дата обращения: 02.12.2024)

https://i.pinimg.com/originals/58/ca/6c/58ca6c46ee745a6acc2ae91b456abeba.jpg (дата обращения: 02.12.2024)

https://commons.wikimedia.org/wiki/File:The_Abduction_of_Rebecca_MET_DP-14344-001.jpg (дата обращения: 02.12.2024)

https://commons.wikimedia.org/wiki/File:Eugène_Delacroix_-The_Abduction_of_Rebecca-_WGA6226.jpg (дата обращения: 02.12.2024)