Где искать референсы для сайта

Где искать референсы и вдохновение UX/UI-дизайнерам

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

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

www.pinterest.ru

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

www.savee.it

Похож на Pinterest, но с более вылизанным контентом, очень много фотографий, графики и интерфейсов

Мой архив референсов в телеграм-канале https://t.me/mesteropinion.

Еще несколько каналов которые мне очень нравятся

www.behance.net

Очень старый ресурс, где накопилось огромное количество контента. Нравится, что есть много полноценных кейсов.

www.dribbble.com

Много интересных картинок и экранов. Все кейсы состоят из 1-2 картинок.

www.awwwards.com

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

www.hoverstat.es/archive/

Большой архив сайтов. Много контента, но не очень часто обновляется.

www.fuse.kiwi

Еще один большой архив.

Godly website
www.godly.website

Очень много референсов для веба. Удобная система тегов и фильтров.

В этой статье читайте, зачем смотреть референсы и как их использовать.

Дизайн-подход и работа с референсами
35 показов
7.3K открытий
9 комментариев
Написать комментарий.

Очень полезный материал! Искать референсы — это очень полезно

Развернуть ветку

Искать референсы реальных приложений

Развернуть ветку
Развернуть ветку

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

Развернуть ветку

Madeontilda тоже неплоха для референсов под веб.

Развернуть ветку
Portfolios, presentations, company websites, landing pages, editorials, and online shops made with…
readymag.com
Развернуть ветку

Да сколько же можно!

Автор в курсе, что такое UX?

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

Развернуть ветку

Ой, ну что вы, референсы же не только картинки, но и кейсы и приложения. И статья про то, где все это можно найти. Не только картинки, но и патерны взаимодействия. ��

Развернуть ветку

Можно на Кириллице искать вдохновение, ну и Беханс разумеется

Референсы для веб-дизайна

Мы не писали о pinterest, dribble, behance потому что это знают все и при этом визуально привлекательный дизайн на картинке != работающий продукт с классным дизайном.

Еще несколько сайтов со шрифтами

На этом все, прощаемся. Если у вас есть места где еще можно подглядеть стиля — милости просим в комментарии.

Где дизайнеру брать референсы для собственных проектов

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

Студенты Wezom Академии на курсе «Graphic Design» регулярно работают с референсами и используют их для собственного профессионального развития. И мы всегда подчеркиваем, что это нужно делать!

Вопрос лишь в том, где искать референсы …

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

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

Площадки с референсами по тематикам

Референсы с людьми

• Figurestock — один из популярнейших сайтов, где можно найти референс людей . Есть удобный поиск по жанру и тематике, а также фильтры по полу, возрасту, ракурсу съемки и т. д. База изображений здесь действительно большая, но стоимость покупки лицензии на изображения для коммерческого использования высокая — в среднем от €200.
• Generated Photos — весьма необычная площадка, которая генерирует лица людей. Притом вы можете сами задавать нужные параметры — от пола, возраста и прически до эмоций, мейк-апа и точного положения головы. Чтобы скачать готовое изображение в высоком качестве без вотермарков, придется заплатить от $8.
• Human BioDigital — это, как несложно догадаться, сайт с трехмерными схемами и изображениями человеческого тела и отдельных его органов. Проект хоть и достаточно нишевый, но может оказаться полезным для некоторых категорий дизайнеров. К примеру, работающих над сайтами медицинской тематики.

Референсы с животными

• Ocean Image Bank — сайт с изображениями морской и океанической тематики. Это огромная база данных с фотографиями в высоком разрешении без вотермарков.
• Minden Pictures — большой каталог изображений природы и животных, которые можно приобрести или просматривать без ограничений (с вотермарками).
• Comedy Wildlife Photo — большой фотосток со смешными изображениями животных. Отличный выбор для тех, кто ищет нечто необычное и устал от однообразных снимков живой природы. Определенно стоит обратить внимание!

Референсы с городами, автомобилями и едой

• Google Maps — фирменный картографический сервис от Google. Но нас интересует функция просмотра улиц и фото на карте. Если вам нужен качественный и бесплатный референс города , начните свои поиски именно с Google Maps.
• New Old Stock — сайт со старыми фотоснимками городов, улиц, зданий и интерьеров. К сожалению, здесь нет продвинутой системы поиска референсов по тематикам. Но это все равно прекрасный источник вдохновения для любого творческого человека, работающего с визуалом.
• Auto Salon Singen — огромная галерея фото автомобилей, удобно каталогизированная по производителям. Притом автомобили здесь самые разные — от старинных и раритетных до наиболее новых и современных.
• Foodiesfeed — большой каталог изображений продуктов и красивых блюд. Скачивать снимки в высоком разрешении для личного использования можно совершенно бесплатно.

Референсы для дизайнера

Если вы занимаетесь веб-дизайном и ищете источник для вдохновения, можем предложить несколько отличных вариантов:

• Cssdsgn — огромная подборка самых креативных и необычных веб-сайтов, удобно систематизированная по годам и алфавиту. К сожалению, с 2019 года каталог не обновлялся.
• Typewolf — внушительный по объемам блог-архив типографики в вебе с удобными фильтрами поиска. Единственный недостаток — на всех референсах используется латиница. Но для большинства дизайнеров это не будет проблемой.
• FontsIn Use — интересная база изображений с нанесенными на разные поверхности и изделия шрифтами. Здесь можно посмотреть, как тот или иной шрифт будет выглядеть, например, при печати на футболке или на кружке. Вы просто вводите имя шрифта в поиск, и система выдает вам нужные изображения. Ко всему прочему здесь есть кириллические шрифты.
• Siteinspire — настоящий долгожитель среди каталогов референсов для веб-дизайнера. Площадка вот уже полтора десятилетия собирает самые интересные проекты в свою библиотеку и предоставляет к ним свободный доступ. При этом база обновляется ежедневно.
• Httpster * — неплохой источник вдохновения для современного веб-дизайнера. На сайте большой каталог интересных референсов и примеров сайтов с самой необычной визуальной и технической реализацией.

*Httpster использует устаревший протокол HTTP, поэтому при загрузке может возникать ошибка, требующая подтверждения входа на небезопасный веб-ресурс

• Land-book — минималистичная и стильная платформа, где можно найти референсы для Landing Page, блогов, портфолио, мобильных приложений и так далее. Понравившийся референс сайта можно добавить в избранное, перейти по ссылке на сам сайт для ознакомления или скачать макет в формате изображения.
• The Gallery — некогда большой и активно обновляемый каталог креативных веб-ресурсов. К сожалению, в сентябре 2021 года сервис закрылся. Но при желании вы можете обратиться к владельцу и за символическую плату (которую устанавливаете сами) скачать себе весь архив из более чем 3 000 сайтов.

И еще кое-что…

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

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

Курс «Курс Web-дизайна»

Хочешь получить обучение от Юрия Линника?

На курсе вы освоите:

• Знание особенностей веб-проектов (респонсив, адаптив)
• Знание принципов юзабилити сайтов
• Создание дизайна под разные устройства (десктоп, планшеты, смартфоны)
• Работу с дизайн макетами в Figma
• Понимание принципов проектирования и разработки сайтов и интерфейсов

Все о референсах в дизайне: как использовать их для своих работ

Познакомьтесь со всеми направлениями дизайна, пройдите профориентацию и выберете, что нравится вам. 21 месяц, чтобы стать профессионалом.

• Что такое референс
• Референс, мудборд, плагиат
• Зачем нужны референсы
• Где используются референсы
• Виды референсов
• Где искать референсы
• Как правильно работать с референсами
• Примеры использования референсов
• Заключение

Что такое референс

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

Английское слово reference переводится как «пример», «отсылка». Многие используют референсы, чтобы на их основе придумать что-то свое.

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

Курс «Дизайнер: старт в профессии»

Дизайн меняет мир к лучшему. Дизайнеры занимаются разработкой визуального образа объектов и делают продукты, интерьеры, интерфейсы и 3D-модели красивыми и удобными.

Референс, мудборд, плагиат

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

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

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

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

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

Курс «Айдентика: пошаговая инструкция»

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

Зачем нужны референсы

• Уточнение информации. На самых ранних этапах референсы могут служить прообразом будущего проекта.
• Определение отличительных черт. Референсы помогают придерживаться общей эстетики проекта: было бы странно, если бы в этностиле появились отголоски минимализма.
• Поиск общего языка с заказчиком. Можно попросить показать примеры, и вам уже будет понятно, на что ориентироваться. Так тратится меньше времени на отрисовку возможных эскизов.

Курс «Основы Blender: создаем персонажа»

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

Где используются референсы

Референсы активно используются в различных сферах.

1. Фотография. Референсы играют решающую роль в создании композиции, освещения и настроения снимка. Здесь есть множество визуальных примеров: можно брать референсы из кинематографа, вдохновляться работами художников. Фотографы могут использовать изображения других мастеров, чтобы изучить удачные ракурсы, цветовые решения и техники обработки. Референсы также применяются в фотографии в сфере моды.
2. Интерьерный дизайн. В создании уютных и стильных интерьеров референсы помогают определиться с цветовой палитрой, расстановкой мебели и декором. Дизайнеры могут использовать фотографии готовых проектов или изображения интересных элементов для воплощения уникальных идей в пространстве.
3. Живопись. В рисовании референсы дают вдохновение для создания произведений искусства. Эталоны помогают изучить анатомию, перспективу и цветовые переходы.
4. Веб-дизайн. Здесь референсы играют решающую роль в создании удобных и стильных интерфейсов. Дизайнеры могут изучать успешные веб-сайты, анализировать их структуру, цветовую гамму и элементы навигации для создания своих уникальных проектов.
5. Брендинг. Референсы в брендинге помогают определить уникальные черты, которые делают бренд запоминающимся. Цветовые решения, логотипы успешных компаний и дизайн упаковки становятся эталонами для разработки собственного бренд-образа.

Хороший референс — тот, что может подсветить отличительные черты компании. К примеру, знаменитый кролик Duracell — первое, что приходит на ум при упоминании компании.

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

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

Виды референсов

Референсы могут быть классифицированы по различным параметрам.

Стилевые

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

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

Функциональные

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

Где искать референсы

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

Специализированные сайты

Behance

Бесплатный и удобный онлайн-каталог работ и портфолио.

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

Dribbble

Похожий на Behance сервис, который стал не только каталогом, но и сообществом единомышленников.

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

Pinterest

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

ArtStation

Площадка для специалистов из области геймдева и диджитал-иллюстраторов.

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

Motionographer

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

They draw

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

Muzli

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

Awwwards

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

Email-Competitors и Really Good Emails

Для коммуникативных дизайнеров и имейл-маркетологов также есть свой ресурс. На этих сайтах представлены проекты компаний из разных сфер.

Фотостоки

Фотосессии, кадры из кино и все, что можно представить на фотографии. Вот, что оценят как дизайнеры, так и фотографы.

Life of Pix — ресурс с бесплатными высококачественными фотографиями. Коллекция постоянно обновляется.

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

Adobe Stock — надежный и удобный сток от Adobe. Сюда загружают фотографии для интернет-магазинов, поэтому далеко не все подойдут в качестве референсов.

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

Курс «Что такое микростоки?»

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

Телеграм-каналы

В Telegram также можно встретить различные полезные подборки.

UI Muse — канал про адаптивный дизайн с решениями от известных компаний и дизайнеров. Подойдет для тех, кто ищет вдохновение.

Now How Channel — дизайн, собранный со всех уголков мира.

Глазами нейросети — иллюстрации, созданные нейросетями.

ruArt — телеграм-канал с работами подписчиков.

N С К У С С Т В О — полноценные фотосессии, объединенные одной стилистикой.

Crazyart — множество картин, артов и иллюстраций.

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

Post Tribe Inspiration — примеры и референсы для моушн-дизайна, 3D и CG.

Альтернативные способы поиска

Есть и другие способы найти референсы:

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

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

Наставница программы «Моушн-дизайнер» Алина Болдырева о своих методах работы

Как правильно работать с референсами

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

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

Как избежать плагиата

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

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

Этапы работы с референсами: от поиска до применения в проекте

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

1. Найдите подходящие референсы. Используйте различные источники: вдохновение может прийти из самых неожиданных мест.
2. Соберите все найденные референсы и организуйте их для удобства. Создайте мудборд или цифровую папку, чтобы быстро получать доступ к визуальному материалу.
3. Внимательно анализируйте выбранные референсы. Определите ключевые элементы, которые вы хотите внести в свой проект. Это может быть стиль, цветовая палитра, композиция и др.
4. Преобразуйте идеи из референсов, добавляя свой уникальный вклад. Используйте их как отправную точку.
5. Примените полученные концепции в своем проекте. Убедитесь, что они гармонично вписываются и соответствуют целям дизайна.

Примеры использования референсов

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

Выпускница программы «Иллюстратор» любит жуткие истории, эстетику Тима Бертона, а еще сильных женских и детских персонажей — таких, как у Стивена Кинга. Все эти референсы Алина использовала в своем проекте.

«Мне хотелось создать атмосферу храбрости и отчаяния, но с лучиком надежды — получилась смесь “Храброй сердцем” и мрачной сказки. Вместо однозначного хеппи-энда в этой истории есть мысль о том, что боль утраты и скорбь могут не только ломать, но и делать сильнее.

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

Марина Гармашова нарисовала честный комикс о своем опыте бега и защитила его в финале программы «Иллюстратор».

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

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

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

Чтобы прокачать свои навыки, присоединяйтесь к курсу «Смелый креатив: как легко придумывать прорывные идеи».

Заключение

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

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