rocket_launchТарифы

Библиотека вдохновения Refframe

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

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

Смотреть референсы Примеры секций

Яркая обложка журнала с радужным градиентом и бабочками на краях, лежит на траве рядом с красными грибами.

Высокая страница-коллаж с яркими обложками журналов и логотипом Fisk внизу.

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

Минималистичная страница магазина с фото украшений и формой контакта.

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

Вертикальный коллаж модных и портретных фотографий в сетке на чёрном фоне.

Новые референсы сайтов

Открыть весь каталог

Форма оформления заказа на минималистичном сайте с несколькими способами оплаты и правой колонкой с итогами.

Минималистичная карточка оформления заказа на светло‑серой округлой панели с изображением товара и кнопкой оплаты внизу.

Сетка закруглённых карточек с подписями Shop, About, Events, Journal, Sounds и Instagram под каждой.

Раздел FAQ с выпадающими ответами и чат-пузырями на светлом фоне.

Веб‑страница с поиском и фильтрами, показывающая список магазинов рядом с большой картой.

Одноколоночная страница с округлыми изображениями и точечным логотипом внизу.

Минималистичная страница с наградами: крупный оранжевый заголовок на светлом фоне.

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

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

Яркий красный первый экран с крупной бледной типографикой и коллажем фото справа внизу.

Крупная жирная надпись All Projects на тёмном фоне с чипами и блоком Info справа.

Сетка плиток с логотипами клиентов на тёмно‑зелёном фоне, справа карточка к кейсам по eCommerce.

Популярные подборки веб-дизайна

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

Секции

Референсы первых экранов

Референсы секций «О нас»

Референсы секций возможностей

Референсы футеров сайтов

Референсы шапок и навигации сайтов

Референсы секций услуг

Референсы секций процесса

Референсы секций команды

Референсы секций отзывов

Референсы контактных секций

Референсы FAQ-секций

Референсы секций с ценами

Индустрии

Индустрии

Референсы корпоративных сайтов

Индустрии

Референсы интернет-магазинов

Индустрии

Референсы сайтов технологических компаний

Стили

Референсы минималистичных сайтов

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

Референсы красочных сайтов

Референсы чёрных сайтов

Сайты с крупной типографикой

Идеи и методы из блога Refframe

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

Читать блог

Чеклист передачи лендинга рядом с макетом сайта и панелью кода для реализации

Чеклист перед сдачей лендинга

Практический чеклист перед handoff: контент, адаптивность, UI-состояния, accessibility, ассеты, соответствие компонентам и визуальная проверка

Процессы

31.07.269 мин

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

Композиция, сетка и типографика

Шесть практических правил для проверки иерархии, группировки, выравнивания, сетки, текстовых ролей и читаемости веб-макета

Процессы

31.07.268 мин

Спецификации компонентов, токенов и структуры сайта передаются в терминал Claude Code

Дизайн-система для claude code

Практический пакет контекста для Claude Code: правила проекта, соответствие Figma и кода, структура страницы, референсы и проверка реализации

Процессы

31.07.2610 мин

Компоненты, токены, основы и структура сайта объединяются в дизайн-систему, подготовленную для AI

Дизайн-система для работы с AI

Как превратить визуальные решения в токены, контракты компонентов, адаптивные правила и проверки, понятные AI-инструменту для разработки

Исследования

31.07.269 мин

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

Дизайн-система сайта в Figma

Пошаговый процесс для Figma: как превратить повторяющиеся цвета, интервалы, типографику, контролы и сетки сайта в небольшую рабочую систему

Процессы

31.07.2610 мин

Правила типографики, цветов, компонентов и компоновки связаны с макетом сайта

Дизайн-система для веб-дизайнера

Практическое объяснение дизайн-системы: из чего она состоит, чем отличается от UI-кита и какой может быть первая рабочая версия для сайта

Процессы

31.07.268 мин

Референс, мудборд и дизайн-пример показаны как три разных визуальных артефакта

Референс, мудборд или пример?

Три похожих слова описывают разные рабочие артефакты: источник решения, набор направления и конкретную иллюстрацию

Процессы

22.07.266 мин

Awwwards, Behance, Pinterest, Dribbble, Muzli, сайты и закладки собираются в папку референсов

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

Как выбирать источник референсов под конкретную задачу: веб-паттерны, продуктовые сценарии, визуальное направление или творческий ориентир

Исследования

22.07.267 мин

Библиотека референсов для дизайнерских решений

Исследуйте на нужном уровне

Переходите от целых сайтов к отдельным секциям, стилям и индустриям, не теряя связь с оригинальным источником

Понимайте, что сохраняете

Открывайте каждый пример на отдельной странице с редакционным описанием и переходите к похожим референсам

Создавайте полезные подборки

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

От первой идеи к обоснованному направлению

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

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

Превратите вдохновение в рабочее направление

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

Смотреть референсы