Найти в Дзене

Референсы в веб-дизайне: правила работы с ними

На связи школа GROW! Мы обучаем дизайн-профессиям, делаем это эффективно, быстро и структурно. Наши обучения - это про качество, максимальную включённость в каждого ученика и только нужные знания для развития в сфере. Мы создали бесплатный канал с регулярной пользой для веб-дизайнеров и фрилансеров За последний год выпустили 1.200+ дизайнеров в школе G.R.O.W study Лично создали и запустили в работу 200+ сайтов на Таплинк и готовы передавать свой опыт вам! 5 правил в работе с референсами В работе с референсами у есть 5 базовых правил, используя которые можно создавать крутые и красивые дизайны. Правило 1: Использование качественных источников Большую часть времени для поиска и анализа референсов проводите на качественных платформах.
В начале пути очень сложно отличить хороший дизайн от плохого, так как еще не выработаны нужные компетенции. Поэтому многие дизайнеры долго не могут вырасти в своих скиллах. В поле их зрения находятся работы слабого или хотя бы среднего уровня, нет сильного
Оглавление

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

  • Мы создали бесплатный канал с регулярной пользой для веб-дизайнеров и фрилансеров
  • За последний год выпустили 1.200+ дизайнеров в школе G.R.O.W study
  • Лично создали и запустили в работу 200+ сайтов на Таплинк и готовы передавать свой опыт вам!

5 правил в работе с референсами

В работе с референсами у есть 5 базовых правил, используя которые можно создавать крутые и красивые дизайны.

Правило 1: Использование качественных источников

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

Площадки первого порядка:

-2

В приоритет ставим следующие зарубежные площадки:

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

Площадки второго порядка:

-3

Для отсмотра референсов также можно выделить площадки второго порядка:

Deep Profile и Behance - профессиональные площадки, где любой человек может выложить свою работу, поэтому в поиске референсов тут нужно быть аккуратнее и лучше всего изучать категорию «выбор жюри» или искать работы по наградам.

*Источник: Deep Profile
*Источник: Deep Profile

В случае Behance, работы отобраны профессионалами, поэтому предлагаем на них и ориентироваться.

На площадке Made on Tilda представлены действительно очень хорошие и интересные дизайны. Работы сюда отбираются командой Тильды. Бывают, конечно, и работы с некоторыми ошибками, но если говорить именно про визуальную часть, про поиск референсов, то это отличная площадка для этого.

*Источник: Made on Tilda
*Источник: Made on Tilda

Площадки третьего порядка:

-6

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

*Источник: Pinterest.com
*Источник: Pinterest.com

Безусловно, можно вдохновляться работами, но помните, что ваша задача – закрепить у себя хорошую качественную базу в создании дизайнов (корректно расставлять все отступы, следить за иерархией, сеткой и направляющими).
Когда вы смотрите на слабые работы, вы, по сути, ничему и не учитесь.

На Пинтерест зачастую продолжают вируситься работы, которые были опубликованы 3-5 лет назад (но мы не узнаем об этом, так как площадка не показывает даты публикации) и, конечно, если ориентироваться на них, то ни о каком развитии в ногу с действующими трендами у вас и речи идти не может)
Поэтому с Пинтерест конечно же можно взаимодействовать, но
будьте аккуратны и критичны к контенту, который потребляете.

Совет: Подписывайтесь и следите за известными веб-дизайнерами из сферы в made on tilda, Телеграм, Пинтересте, Инстаграм. В этом случае вы можете быть уверены в качестве работы, и поэтому площадка, на которой вы эти самые работы смотрите уже будет вторична.

Правило 2: Ограничение одной стилистикой

Многие при подборе референсов начинают отсматривать работы только в аналогичной стилистике. Например, у вас проект в минимализме и вот вы уже 5-ый час листаете примеры дизайнов в этом направлении.
Мы, конечно, рекомендуем смотреть «шире».

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

*Примеры дизайнов взяты с Pinterest.com. Все работы принадлежат их авторам
*Примеры дизайнов взяты с Pinterest.com. Все работы принадлежат их авторам

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

Есть и другая распространённая ошибка: искать референсы строго по сфере клиента (например, делая сайт стилисту, вводить запрос «идеи сайта Таплинк для стилиста»). Изучать сайты конкурентов стоит в основном ради структуры и текстов, но что касается визуальной части, то найти там что-то красивое и трендовое - это огромная редкость.

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

Правило 3: Анализ референсов

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

Не сохраняйте чужие работы бездумно, всегда задавайте себе вопросы:

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

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

При работе над проектом в текстом формате
комментируйте себе те работы, которые вы все таки отобрали и занесли в качестве референсов. Эти комментарии понадобятся вам, когда вы спустя время продолжите работу над созданием дизайн-концепции и помогут освежить в памяти, что конкретно вас зацепило. Это очень сэкономит время и поможет систематизировать вашу работу.
Комментарии не должны быть какими-то развернутыми. Оставляйте краткие тезисы для себя и добавьте сортировку по категориям внутри референсов: по цветовым решениям, по шрифтам, по композиции и пр.

*Примеры дизайнов взяты с Pinterest.com. Все работы принадлежат их авторам
*Примеры дизайнов взяты с Pinterest.com. Все работы принадлежат их авторам

Правило 4: Время на анализ

-10

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

Совет: выделяем себе максимум 3-4 часа и четко в этот временной интервал отсматриваем работы.


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

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

Важно: Этот способ будет работать, если вы действительно будете анализировать каждый осматриваемый референс, а не просто сохранять все подряд.

Правило 5: Систематизация

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

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

  • сохраните сайты для поиска референсов;
  • сохраните сами «референсы»;
  • рабочие сайты, к которым, вероятно, вы захотите вернуться спустя время.
-11

Можно также использовать платформу Notion (фото+ссылку). Программа полностью бесплатная.

*Источник: Notion
*Источник: Notion
  • Все референсы можно собирать в единую папку. Многие дизайнеры используют данный метод: создают отдельные каталоги под разные решения. Например, папка «меню сайта», папка «раздел контакты», «футер» и так далее.

    Попробуйте разные варианты, особенно в начале своего пути, и найдите тот, который будет комфортен именно вам.

А если ты не хочешь тратить недели на поиск информации по крупицам и хочешь начать зарабатывать на новой профессии уже через месяц - переходи в наш ТГ-канал и забирай много полезной информации!

Подписывайся на наши другие соц.сети:

ТГ-канал
YouTube-канал
Пинтерест
Инстаграм*

*
принадлежит компании Meta, признанной экстремистской организацией и запрещенной на территории РФ

-13