Референсы для веб-дизайна
Мы не писали о pinterest, dribble, behance потому что это знают все и при этом визуально привлекательный дизайн на картинке != работающий продукт с классным дизайном.
Еще несколько сайтов со шрифтами
На этом все, прощаемся. Если у вас есть места где еще можно подглядеть стиля — милости просим в комментарии.
Где искать референсы для сайта
Сайт получил награду Special Kudos на международной дизайн-премии CSS Design Awards
Сайт получил награду Honorable Mention и Mobile Exсellence на международной дизайн-премии Awwwards
Сайт получил награду Website of the Day на международной дизайн-премии CSS Design Awards
Сайт попал в галерею лучших сайтов на Тильде MadeOnTilda
Проект занял 4 место на всероссийском конкурсе ArtMasters 2020 в номинации «Веб-дизайн»
Проект занял 1 место на всероссийском конкурсе ArtMasters 2021 в номинации «Веб-дизайн»
| ЗАПОЛНИТЬ БРИФ |
САЙТЫ НА ТИЛЬДЕ
UX/UI ДИЗАЙН
КЕЙС В РАЗРАБОТКЕ
ИГРА ЕШЁ В РАЗРАБОТКЕ
ПРИХОДИТЕ ЧЕРЕЗ НЕДЕЛЮ :))
Где брать референсы для веб-дизайна: сайты с подборками UI/UX решений. Собрала самые интересные ресурсы и расположила по убыванию: от самых классных до наиболее «засмотреннных».
Screenlane
| Перейти на сайт |
Сайт с подборками сайтов и приложений.
Самая крутая функция ресурса — фильтр по дизайну отдельных UX-элементов: можно посмотреть подборку форм/карточек/тарифов, etc. Всего 100+ фильтров.
Landingfolio
| Перейти на сайт |
Сайт с подборками сайтов и приложений.
Самая крутая функция ресурса — фильтр по дизайну отдельных UX-элементов: можно посмотреть подборку форм/карточек/тарифов, etc. Всего 100+ фильтров.
Где искать референсы, если на фотостоках нет ничего подходящего
«Google Kaрты», анатомический атлас в 3D, картины гиперреалистов и другие источники вдохновения для дизайнеров и художников.
Иллюстрация: Полина Честнова для Skillbox Media
Дарья Тамилина
Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
Дарья Голощапова
Пишет, следит за красотой ситуации.
В интернете бывает непросто найти нужную картинку-референс. Обычно за ними сначала идут на стоки или в Pinterest, но если вам нужны тематические ресурсы, мы собрали несколько хороших источников. Они помогут найти вдохновение или нужный пример для работы.
Из подборки вы узнаете, где есть небанальные референсы:
- Референсы с людьми — от обычных поз до детализированных изображений рук в разных положениях.
- Референсы животных — фотостоки с экзотическими насекомыми, рыбами и млекопитающими.
- Референсы с городами, машинами и едой — фотостоки на случай, если вам понадобится конкретный объект.
Зачем нужны референсы
Референсы нужны, чтобы понять, какие есть распространённые решения конкретных дизайн-задач. Например, как оформляют главные экраны сайтов по аренде автомобилей или как создать своего персонажа с определёнными характеристиками в 3D. Референсы, как и мудборды, нужны всем: художникам, иллюстраторам, дизайнерам, геймдизайнерам.
Референсы с людьми
Midjourney
Неисчерпаемый источник изображений людей в разных позах и разной одежде
Нейросеть позволяет вам использовать самые разные образы, миксовать одежду, менять позы. Это удобный инструмент, он может выстроить образ со сложными фактурами и неожиданными персонажами, которые нечасто встречаются вместе в природе. Например, роскошные меха и танцующий Дональд Трамп.
Насчёт референсов рук тоже можно наконец-то не беспокоиться: нейросеть после весеннего обновления V5 наконец-таки рисует пять пальцев и строит анатомически верное изображение.
Adorka Stock
Ресурс, созданный художниками для художников
Одна из многих сложностей для иллюстраторов и художников — найти нестандартные фигуры или модели плюс-сайз и с настоящими телами, складками, морщинами. Особенно тяжело приходится тем, кому требуются неотредактированные изображения.
С этой проблемой столкнулась художница Сара Форд и стала фотографировать себя, чтобы помочь художественному сообществу с референсами. Постепенно к инициативе присоединились и другие художники и иллюстраторы.
Ресурс располагает большим количеством изображений — с самыми разными фигурами, в сложных ракурсах, с крыльями, русалочьими хвостами и прочим великолепием без капли ретуши. Все модели для съёмок используют облегающее бельё, чтобы подчеркнуть анатомию. Фотографии бесплатны, еженедельно появляются новые позы для рисования.
SketchFab
Крутой ресурс с фокусом на 3D
В SketchFab все модели для референсов можно крутить и увеличивать. Изображения делятся по категориям: автомобили, анатомия человека, интерьер, персонажи, архитектура, селебрити.
Скачивание изображений платное, но любую модель можно бесплатно открыть в браузере и увеличить, поменять ракурсы.
И главное, можно крутить руки!
Character Design References
Большая визуальная библиотека с огромным количеством референсов персонажей
Ресурс для тех, кто устал копаться в Pinterest — вас ждут тщательно отобранные доски по самым разным темам: анатомия, выразительные фигуры, персонажи комиксов, фигуры с луком, мечом. Удобное распределение референсов по темам даёт возможность быстро найти нужное изображение в разных ракурсах и стилях рисования, а главное, вы не застрянете на полдня в переходах по лишним картинкам.
На сайте много бордов с анатомией: от классических изображений до экспрессивных.
Reference Angle
Обязателен для всех художников, которым важно рисование с натуры
Теперь вас не будет мучить вопрос, как нарисовать зевающего бородача в очках на три четверти: вы будете точно знать и сможете без труда найти сотню референсов, чтобы правильно построить такую сложную фигуру. И без гугл-картинок.
Сервис подбирает картинки живых людей в нужном ракурсе. Слева — трёхмерная модель головы, которую можно крутить в разные стороны. Вы можете выбрать пол, возраст, эмоции, положение рта, открытые или закрытые глаза. На каждый запрос приходится в среднем по 600 изображений в нужном ракурсе. Сервис бесплатен.
Generated Humans
Сток с изображениями лиц людей, сгенерированными нейросетью
На сайте более двух миллионов портретных фото людей разного возраста, пола, расы. Они созданы искусственным интеллектом, но выглядят правдоподобно.
Коллективный портрет людей примерно одного возраста, одного телосложения, но разных рас. Заметно, что фигуры созданы нейросетью, но как рабочий материал такие изображения подойдут
Можно бесплатно скачать до 10 тысяч изображений, просто оставив адрес почты на сайте.
Руки
В картинах гиперреалистов и реалистов Хавьера Аризабало, Омара Ортиза и Даниэля Майдмэна
Где брать референсы для дизайна сайтов?
Референс — это пример сайта, который нравится.
Чтобы донести свои идеи, референсы ищут и дизайнеры, и заказчики. И если дизайнеры точно знают где искать, то у заказчиков могут возникнуть вопросы.
Первое на что стоит обратить внимание — сайты конкурентов и в смежных нишах. Владелец бизнеса, как правило, знает своих конкурентов. Но также можно их найти в поисковике, в различных рейтингах или рекламе. Сайты конкурентов помогают понять, что вообще творится в нише, какие приняты паттерны.
Далее можно поискать хорошие сайты на известных ресурсах с наградами по веб-дизайну — Awwwards, CSS Design Awards, Madeontilda, CSS winner. Там собраны трендовые сайты, дизайнеры делятся своим мастерством, можно понять что сейчас модно в веб-дизайне. Сюда же можно отнести Behance, но там можно найти работы разного уровня.
Следующий шаг — поиск сайтов в менее известных подборках, таких как Onepagelove, Site Inspire, Cargo Site, Webdesign Inspiration, Minimal Gallery. Сайты, собранные там менее популярные, не очень «заезженные», но при этом хорошие.
Также я использую Pinterest для поиска идей. На этом ресурсе можно смотреть шире и найти референсы не только в веб-дизайне, но и в графическом дизайне. Эт поможет сформировать мудборд и увеличить горизонт мышления.
А вы используете референсы для своих проектов? Где их находите ?)