Как референсы прокачивают насмотренность и сокращают количество правок дизайна

Затянутые сроки, ночи за переделыванием дизайн-концепций и тысяча созвонов с клиентом, чтобы выяснить, в какую сторону всё-таки играться со шрифтом: всего этого можно избежать с помощью обсуждения референсов. Сегодня я, арт-директор Молнии Сергей Ананьев, расскажу, какую роль референсы играют в разработке сайта, и что помогает нашим дизайнерам искать идеи и развивать насмотренность.

«Это наш сайт? Что-то мы ожидали увидеть его другим…». Такую реакцию на проделанную работу не хочется получить ни дизайнеру, ни заказчику. Чтобы попасть в ожидания клиента и выиграть от этого профит в виде сэкономленного времени, подбирайте и презентуйте референсы. Это важный этап в подготовке к проекту: с их помощью можно глубже изучить задачу, найти общий язык с заказчиком или преодолеть страх белого листа. Примеры работ можно искать для шрифтов, цветовых решений, форм и образов, отдельно взятых блоков или целых концепций.

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

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

А ещё не придётся вносить бесконечное количество правок. «Может шрифт другой выберем?», «Что-то не нравится, но не понимаю что» — эти и другие фразы можно избежать, визуализируя свои идеи.

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

Какие трудности могут возникать при работе с референсами в начале пути?

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

Чтобы работа не была копией, мы подбираем несколько референсов в разных направлениях, в разной стилистике. Это также помогает понять, к чему мы идём, к чему лежит душа у клиента. На одном нам могут понравиться шрифты, на другом цвета, на третьем анимации/иллюстрации. Собрав всего по чуть-чуть с разных примеров, получается новый оригинальный проект.

В целом, в копировании стиля сайтов нет ничего плохого. Даже при условии, если будет один референс, всё равно будет совершенно другой контент и другие посылы. А значит, по итогу, получится другой сайт.

Ещё могут быть проблемы с тем, что клиент выбрал несколько референсов, которые между собой «не бьются»: одновременно он выбрал минималистичный сервисный сайт и ультракреативный, с огромным количеством броских анимаций. Исходя из них, будет сложно собрать одну работу. В таком случае нужно выходить на новый круг референсов, чтобы на момент дизайна не появилось огромное количество боли, что нужно объединить необъединимое.

Или, если клиент в целом не может выбрать ни один из референсов, нужно просто глубже погружаться, что именно не нравится. И из этого лучше собрать новый пакет референсов и обсудить его. Должно быть 2–3 референса, которые точно понравились. Без этого лучше не приступать к работе, потому что итоговый результат, скорее всего, ему не понравится.

Что может быть референсом, помимо других сайтов?

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

Плюс моушн-дизайн, анимационные ролики или просто видеоролики. Исходя из каких-то идей, можно применять сложные анимации для уже разработки сайта

Можешь поделиться советом для работы с референсами?

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

Какие трудности могут возникать при работе с референсами в начале пути?

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

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

Через какое-то время я начала собирать референсы, но не могла их правильно доносить до клиента, потому что я сама не знала, чего хочу. Хотелось просто сделать красивый сайт, как на Behance.

Как преодолела трудности?

Я поняла, как работать с референсами, когда пришла в Молнию. Мой наставник показал сайт Awwwards: там были классные примеры со сложным кодом и другими интересными вещами. Я увлеклась в поиске решений там и не понимала, что и зачем делаю в своих работах. Но спасибо копирайтерам, которые прорабатывают хорошую структуру. Когда я посмотрела, как они выстраивают пользовательский путь и преподносят контент, то начала больше понимать. Наш арт-директор всегда говорил, что нужно делать не просто дизайн, а умный дизайн. Awwwards и Behance уносили меня в мир того, что я хочу задизайнить, но не знаю, зачем. Каждый раз нужно задавать себе вопрос «зачем?»: зачем я делаю этот сайт, к чему он ведёт, для кого предназначен и т. д.

После этого и отбор референсов начал проходить эффективнее. Смотрю, что и как работает: ага, иллюстрации красивые, кнопки классные, но по UX как-то криво. Отметаю этот сайт.

Что может быть референсом, помимо других сайтов?

Абсолютно везде может «ёкнуть». Сегодня был очень красивый закат. Было фиолетово-синее зарево, которое на фоне серых стен даёт специфические цвета. Я будто Питер описываю. И вот, когда зайдут к нам ребята из Питера, которые открыли очень ламповую кофейню, у меня уже будет идея для цветовой палитры.

Можешь поделиться советом для работы с референсами?

Я пользуюсь расширением для браузера Muzli. Оно выстраивает новостную ленту, и вместо новостей и погоды высвечивается задизайненный интерфейс, источники можно выбирать по своему вкусу. У меня высвечиваются всегда свежие сайты, новые тренды и идеи. Можно сразу что-то заскринить или сохранить себе.

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

Какие трудности могут возникать при работе с референсами в начале пути?

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

Когда ты проходишь много обучений, то будто загоняешь себя в рамки. И когда в этих рамках долго живешь и работаешь, то боишься правила нарушать. До сих пор есть такая проблема, что не позволяю себе полёт фантазии, выбираю что-то сдержанное. Но очень хочу развивать в себе креативность — это то, над чем я работаю в последнее время.

Как преодолеваешь эти трудности?

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

Всегда делаю скриншоты. У меня есть распределение идей по сервисным сайтам и креативным, разные интересные решение: цветовые палитры, расположения элементов, и т. д.

Что может быть референсом, помимо других сайтов?

Я — человек-эстет. Люблю фотографировать мелочи. Вдохновение — в жизни, в мелочах.

Ещё вдохновляет рост. Я понимаю, что когда-то не умела делать то, что умею сейчас. Всё, как говорят, у нас в голове. Поэтому просто надо искать, в чём есть проблема, прилагать усилия. Когда добиваешься каких-то результатов, понимаешь, что нет ничего невозможного. И я всему могу научиться, даже если будет тяжело.

Можешь поделиться советом для работы с референсами?

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

Какие трудности могут возникать при работе с референсами в начале пути?

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

Есть ещё другая сложность, что ничего не нравится. Могу листать кучу референсов, перелопачивать их, а ничего нет.

До сих пор сталкиваюсь с трудностями. Есть страх чистого листа. И когда появляется возможность делать с нуля всё, что хочу, идеи сразу куда-то уходят. Могу просидеть в панике пару часов. Потом просто начинаю что-то делать, смотреть понемногу другие работы, ищу идеи в вырезках, плакатах, баннерах.

Что может быть референсом, помимо других сайтов?

Главное моё вдохновение — праздники: нравится их делать, создавать декорации. Это даёт внутренний подъём, из меня просто фонтан энергии идёт. С последним сайтом это очень пригодилось, он был напрямую связан с праздниками, развлечениями. Нравилось смотреть их фишки, реквизит и от этого отталкиваться, получилось очень здорово.

Читала «Кради, как художник». Там говорится о том, что вдохновляться можно всем. Я очень часто на улице замечаю всякие детали, меня много чего цепляет, трогает — я очень эмпатичный человек. Мне нравится всё: стиль одежды других людей, как снег лежит на рябине сегодня вот понравилось. Раньше я это просто замечала, а сейчас чаще стараюсь в голове откладывать и думать, как могу это цепануть для работы в плане сочетания, цветов, форм.

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

Можешь поделиться советом для работы с референсами?

Одно дело — просто листать другие работы. А надо ещё и анализировать, отвечать на вопрос «почему это нравится?». Когда листаешь сайт, и что-то цепляет — остановись и запиши: «Мне понравилось, потому что…».

Какие трудности могут возникать при работе с референсами в начале пути?

Может быть непонимание, где нужно смотреть референсы. Если смотреть только на Behance, то будешь вариться в одной и той же каше. Надо смотреть разные референсы на разных ресурсах.

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

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

Что может быть референсом, помимо других сайтов?

Я смотрю на дизайн всего. Потому что дизайн — это в первую очередь решение задач. И это во всех сферах: графический, дизайн интерьера, продуктовый. Смотришь на решение и вдохновляешься именно им.

Однажды на этапе проработки концепции захотелось сделать наложение для объёмного текста, и увидел, что через пакет проглядывает картинка. Подумал: «Ага, можно же это использовать». Взял, скачал «пакет png бесплатно», на картинку наложил, вырезал и получился прикольный рисунок.

Можешь поделиться советом для работы с референсами?

Смотреть не всё подряд, а то, что сделано хорошо, специальные подборки по темам и так далее. Смотреть и разбирать сайт на детали: почему свёрстан текст именно так? почему здесь плашка? почему здесь такая анимация? Искать причину, почему сделано то или иное решение в дизайне. Из хороших источников могу посоветовать Best Website Gallery, Кириллица. дизайн и shüka. the brand bureau.

Подходы к поиску идей для реализации на сайтах могут быть разные, но результатом всегда становится наглядная презентация примеров решений для заказчика. Это помогает прийти к взаимопониманию с клиентом и обговорить все моменты «на берегу», чтобы далее двигаться в правильном направлении без остановок на «поиграться и покрутить».

Наши кейсы можно посмотреть на сайте: flashfamily. ru

Забавные клипы ищите в группе Вконтакте: vk. com/flashfamily

Следите за внутренней кухней и полезностями в тг-канале: t. me/flash_family