База знаний для веб-дизайнеров
Где искать референсы
и как прокачать
насмотренность?
Источники референсов, визуальные примеры и упражнения, которые помогут находить идеи для своих проектов.
Содержание статьи:
- Референсы и насмотренность — что это и зачем они нужны?
- Часть 1. Где искать референсы?
- 1. Общие галереи сайтов
- 2. Лендинги и одностраничные сайты
- 3. Отдельные элементы интерфейса
- 4. Дизайнерские портфолио и кейсы
- 5. Дополнительные источники референсов
- Часть 2. Как прокачивать насмотренность?
- 1. Графический дизайн, постеры и айдентика
- 2. Иллюстрации
- 3. Социальные сети
- 4. Кино, видео и сериалы
- 5. Книги, видеоигры и искусство
- 6. Окружающая среда
- Как тренировать насмотренность на практике?
- Насмотренность — только начало
Референсы и насмотренность — что это и зачем они нужны?
Референсы — визуальные примеры, которые помогают решить конкретную дизайнерскую задачу: подобрать стилистику, композицию, типографику, цветовые сочетания или отдельные элементы интерфейса.
Насмотренность — навык замечать, анализировать и применять удачные визуальные решения. Чем разнообразнее источники вдохновения, тем больше инструментов появляется для создания собственного дизайна.
Работа с референсами и развитие насмотренности помогают:
- Быстрее находить идеи и формировать визуальную концепцию.
- Развивать чувство композиции, цвета и типографики.
- Находить нестандартные решения за пределами привычных сайтов.
- Формировать мудборды и аргументировать дизайн-решения.
- Постепенно вырабатывать собственный визуальный почерк.
Главное правило: не переносить чужие решения один в один, а анализировать, за счет чего они работают, и адаптировать отдельные приемы под свою задачу.
Навык анализировать референсы и превращать их в собственные решения мы также разбираем на «Надизайнила», потому что именно на этом этапе часто возникает разница между простым повторением красивой картинки и осознанной работой дизайнера.
Перейти на страницу курса
Часть 1. Где искать референсы?
1. Общие галереи сайтов
Подойдут для поиска общей стилистики, визуальных концепций, композиций и изучения актуальных решений в веб-дизайне.
- Awwwards — международная и самая весомая галерея сайтов. Для поиска выразительных концепций, интерактивных решений, анимации и нестандартной верстки.
- Made on Tilda — подборка сайтов, реализованных на Tilda. Полезна для изучения возможностей платформы и поиска референсов под собственные проекты.
- SiteInspire — галерея сайтов с разными стилистическими направлениями. Подходит для поиска визуальных концепций и минималистичных решений.
- Httpster — коллекция современных сайтов. Здесь можно искать интересные сочетания типографики, композиции и графических приемов.
- Minimal Gallery — подборка сайтов с акцентом на минимализм, сетки, типографику и работу с пространством.
- Referest — русскоязычный ресурс с визуальными примерами для дизайнеров. Есть возможность фильтрации по нишам, блокам, цветам.
- Brutalist Websites — подборка сайтов в брутализме. Подойдет для поиска нестандартной композиции, типографики и более смелых решений.
- Siiimple — подборка минималистичных сайтов.
- Designspiration — визуальная библиотека с фотографиями, графикой, типографикой и веб-дизайном. Удобна для формирования мудбордов и поиска стилистического направления.
- FWA — международная премия и галерея креативных digital-проектов. Для поиска технологичных сайтов, интерактивных решений и необычных концепций.
2. Лендинги и одностраничные сайты
Если разрабатываете лендинг, рекомендую искать референсы не только по внешнему виду первого экрана, но и по структуре всего сайта, последовательности блоков и подаче информации.
- Land-book — большая библиотека лендингов. Удобна для поиска референсов по тематике, стилистике и другим параметрам.
- Lapa Ninja — коллекция лендингов с полноразмерными скриншотами страниц. Можно изучать не только первый экран, но и структуру сайта целиком.
- One Page Love — подборка одностраничных сайтов.
3. Отдельные элементы интерфейса
Не всегда нужно искать референсы для целого проекта. Иногда сайт практически готов, но работа останавливается на одной детали — например, осталось оформить футер, а подходящее решение никак не находится. Вместо того чтобы пересматривать десятки сайтов в поисках нужного блока, можно воспользоваться специализированными библиотеками, где уже собраны референсы отдельных элементов интерфейса.
- Footer.design — коллекция футеров. Можно изучать разные варианты композиции, типографики, сеток и размещения информации.
- Navbar Gallery — библиотека оформления навигации и меню.
- 404s.design — подборка нестандартных страниц ошибки 404.
- Mobbin — библиотека интерфейсов реальных цифровых продуктов. Полезна для изучения отдельных экранов, компонентов и пользовательских сценариев.
4. Дизайнерские портфолио и кейсы
Здесь можно искать не только визуальные решения, но и изучать, как другие специалисты оформляют и презентуют свои проекты.
- Behance — международная платформа с кейсами. Особенно полезна для изучения презентации проектов, мокапов и визуальных концепций.
- Dprofile — российская платформа дизайнерских портфолио (альтернатива Behance). Можно находить работы веб-дизайнеров и студий, изучать оформление кейсов.
- Dribbble — площадка с отдельными дизайн-решениями и концептами. Подойдет для поиска интересных деталей, композиции, типографики и UI-элементов.
- Pinterest — удобный инструмент для быстрого поиска и сохранения референсов. Рекомендую создавать отдельные доски под конкретные проекты и задачи.
- Cyrillic Design — полезен для поиска типографических решений и работы с русскоязычным текстом.
5. Дополнительные источники референсов
- Designspiration — визуальная библиотека с фотографиями, графикой, граф. дизайном. Удобна для формирования мудбордов и поиска стилистического направления.
Часть 2. Как прокачивать насмотренность?
Насмотренность развивается не только через изучение чужих сайтов. Интересные дизайнерские решения можно находить в графике, фотографии, кино, иллюстрациях и повседневной жизни. Чем разнообразнее визуальный опыт, тем проще и быстрее находить нестандартные идеи и формировать макеты.
1. Графический дизайн, постеры и айдентика
Обращайте внимание на композицию, типографику, работу с цветом, фактурами и передачу смыслов через графику.
Попробуйте самостоятельно создавать постеры — передать идею в рамках одной композиции иногда сложнее, чем на большом сайте. Это хорошая практика для развития визуального мышления.
Где искать:
- Designspiration — подборки графики, постеров, типографики и других визуальных работ.
- Book Cover Archive — архив книжных обложек для изучения композиции и работы со смыслами.
2. Иллюстрации
Изучайте авторские стили, формы, фактуры, цветовые сочетания и способы передачи эмоций через графику.
Отдельные визуальные приемы можно адаптировать и внедрять в веб-дизайн: использовать необычные формы, иллюстративные элементы, текстуры или характерные цветовые палитры для создания более выразительных и нестандартных сайтов.
3. Социальные сети
Социальная сеть с картинками может стать полноценными источниками визуального вдохновения, если использовать их осознанно.
Подписывайтесь не только на веб-дизайнеров, но и на фотографов, иллюстраторов, графических дизайнеров, художников, стилистов, декораторов и представителей других творческих профессий.
Создавайте отдельные сохраненные подборки по темам: интересная типографика, цвет, композиция, необычная съемка, графические приемы и т. д.
4. Кино, видео и сериалы
Кино — отличный инструмент для изучения композиции, цвета, света и визуальных метафор.
Обращайте внимание на построение кадров, сочетание оттенков, атмосферу и то, как режиссер передает определенное настроение без слов.
Сохраняйте интересные кадры — в дальнейшем они могут стать основой для мудборда или визуальной концепции сайта.
5. Книги, видеоигры и искусство
Изучайте книжные обложки, картины, игровые интерфейсы и визуальные миры.
Здесь можно находить необычные ассоциации, цветовые палитры, стилистические приемы и идеи, которые редко встречаются в привычных подборках веб-дизайна.
6. Окружающая среда
Вдохновение не обязательно искать в интернете. Архитектура, вывески, упаковки продуктов, меню, природа, одежда и повседневные предметы — все это тоже визуальные референсы.
Фотографируйте интересные сочетания цветов, фактуры, формы и композиции. Со временем такие наблюдения будут откладываться в визуальной памяти, формируя собственную базу образов и ассоциаций. Постепенно вы начнете замечать интересные решения автоматически, даже не выделяя отдельное время на развитие насмотренности.
Как тренировать насмотренность на практике?
Одного просмотра красивых работ недостаточно. Важно учиться замечать, анализировать и воспроизводить отдельные визуальные приемы.
Несколько простых упражнений:
- Сохраняйте осознанно. Не просто добавляйте понравившуюся картинку в коллекцию, а определяйте, что именно вас в ней зацепило.
- Анализируйте. Обращайте внимание на детали и старайтесь мыслить как автор: почему он выбрал именно такую композицию, цвет или типографику? Какую задачу решает тот или иной прием? Учитесь не просто замечать красивые решения, а понимать логику, которая за ними стоит.
Такой анализ помогает постепенно мыслить не как зритель, а как дизайнер. Эту же привычку мы развиваем на «Надизайнила», разбирая решения через задачу, смысл и дальнейшее применение в проекте.
Перейти на страницу курса
- Пробуйте самостоятельно. Создавайте постеры, иллюстрации, небольшие композиции или экспериментальные первые экраны без привязки к коммерческим задачам.
- Выходите за пределы своей ниши. Старайтесь регулярно изучать направления, которые напрямую не связаны с веб-дизайном.
- Переносите приемы из других направлений. Например, попробуйте представить, как композицию постера, цветовую палитру фильма или графику с упаковки можно адаптировать для первого экрана сайта.
- Работайте с ограничениями. Придумайте небольшую дизайнерскую задачу и ограничьте себя в инструментах: например, создайте первый экран только с помощью типографики, двух цветов и простых геометрических форм. Это помогает искать решения не за счет количества декоративных элементов, а за счет композиции.
- Создавайте свой банк референсов. Организуйте отдельные папки в галерее телефона, Figma, Pinterest. Желательно разделять материалы по категориям. Регулярно пополняйте свою коллекцию, чтобы со временем сформировать собственную библиотеку визуальных решений. Так при работе над новым проектом не придется каждый раз начинать поиск с нуля — можно будет вернуться к уже собранным материалам, быстрее сформировать концепцию и сократить время на разработку.
Когда появляется собственная система работы с референсами, поиск идей перестает занимать бесконечное количество времени. Как встроить этот этап в реальный процесс разработки сайта, мы подробнее разбираем на нашем курсе.
Перейти на страницу курса
Главное — не количество сохраненных референсов, а умение понимать, почему определенное визуальное решение работает и как его можно переосмыслить в собственном проекте.
Насмотренность — только начало
Насмотренность не обязательно превращать в отдельную задачу и заставлять себя ежедневно выделять на время. Старайтесь чаще замечать детали вокруг себя, а во время привычного скроллинга ленты — сохранять интересные визуальные решения. Главное, не просто коллекционировать красивые картинки, а анализировать, что именно вас зацепило и почему. Со временем это войдет в привычку, а собственная визуальная база будет пополняться практически незаметно.
Но находить красивые решения — одно, а уметь применять их в собственных проектах — уже совсем другое. Именно поэтому на курсе «Надизайнила» мы уделяем внимание не только визуальной составляющей, но и всему процессу разработки сайта: от идеи и структуры до реализации. А также учим находить клиентов и продавать свои услуги, чтобы полученные навыки можно было применять на реальных коммерческих проектах.
Хочешь развиваться вместе с нами? Заполняй анкету предзаписи, чтобы первой узнать о старте нового потока и условиях участия.
