Behance
Портфолио и проекты дизайнеров со всего мира. Помогает собирать референсы, изучать подачу кейсов и показывать собственные работы потенциальным заказчикам.
Вдохновение
www.behance.netНа сайт ↗
Инструменты для создания сайта: исследование и сборка
Начните со сценариев посетителя и структуры страниц. Затем соберите прототип, визуальное решение и рабочую версию сайта.
Как выбрать инструмент
Выбирайте инструменты по этапам и нужному результату.
- Соберите референсы под задачу сайта: запись, заявка, покупка или поиск информации.
- Протестируйте структуру и основные переходы на простом прототипе. Проверьте мобильный экран до финальной графики.
- Выберите способ сборки и проверьте опубликованную страницу: формы, загрузку, доступность и базовые SEO-настройки.
Google Fonts
Библиотека шрифтов с просмотром начертаний, языков и примеров текста. Подходит для подбора гарнитур, скачивания файлов и подключения типографики на сайте.
Шрифты
fonts.google.comНа сайт ↗
Coolors
Генератор и каталог цветовых палитр. Позволяет быстро сравнивать сочетания и находить исходную цветовую схему для айдентики, сайта или иллюстрации.
Подбор цвета
coolors.coНа сайт ↗
Unsplash
Библиотека фотографий для сайтов, презентаций и редакционных материалов. Поиск помогает подобрать снимки по сюжету и собрать цельное визуальное настроение проекта.
Фотографии
unsplash.comНа сайт ↗
Icons8
Библиотека иконок, иллюстраций и фотографий для цифровых проектов. Помогает выбрать графику в согласованном стиле для интерфейса, лендинга или презентации.
Иконки
icons8.comНа сайт ↗
Recent · ранее Godly
Recent, ранее Godly, — галерея веб-дизайна и визуальных ресурсов. Помогает искать примеры композиции, типографики и оформления современных цифровых проектов.
Вдохновение
recent.designНа сайт ↗
Fontshare
Шрифтовая библиотека Indian Type Foundry с готовыми гарнитурами. Помогает выбирать наборные и акцентные шрифты и сравнивать их характер перед использованием в проекте.
Шрифты
www.fontshare.comНа сайт ↗
Adobe Color
Цветовой круг Adobe для построения гармоничных сочетаний. Позволяет выбрать основной цвет и правило гармонии, чтобы подготовить палитру для бренда или интерфейса.
Подбор цвета
color.adobe.comНа сайт ↗
Storyset
Редактор сюжетных иллюстраций: можно менять цвета и отдельные элементы, а затем добавлять анимацию. Подходит для первого экрана сайта и поясняющих блоков.
Иллюстрации
storyset.comНа сайт ↗
Pexels
Библиотека фотографий и видеороликов разных авторов. Подходит для подбора визуальных материалов к сайту, публикации, презентации или видеомонтажу.
Фотографии
www.pexels.comНа сайт ↗
Angle
Библиотека векторных мокапов устройств для Figma, Sketch и XD. Помогает представить мобильный или веб-интерфейс в готовой композиции с телефонами и компьютерами.
Мокапы
angle.shНа сайт ↗
Awwwards · сайты дня
Галерея сайтов, получивших награду Site of the Day на Awwwards. Подходит для исследования выразительной веб-подачи, анимации и интерактивных решений.
Вдохновение
www.awwwards.comНа сайт ↗
Flaticon
Каталог векторных иконок и стикеров с поиском по теме. Помогает подобрать согласованный набор символов для интерфейса, презентации, инфографики или печатного материала.
Иконки
www.flaticon.comНа сайт ↗
HANDZ
Библиотека 3D-рук с разными жестами, оттенками кожи и рукавами. Готовые изображения и модели помогают показать действие или привлечь внимание к кнопке и продукту.
3D-объекты
www.handz.designНа сайт ↗
Framer
Визуальная платформа для создания и публикации сайтов с CMS и AI-помощником. Подходит для лендинга или портфолио, которое дизайнер собирает на редактируемом холсте.
Прототипирование
www.framer.comНа сайт ↗
Miro · UX и исследования
Инструменты Miro для UX-работы на общей доске: исследования, пользовательские маршруты и обсуждение решений. Помогают связать наблюдения пользователей с проектированием интерфейса.
Для команды
miro.comНа сайт ↗
Font Squirrel
Каталог отобранных шрифтов с описаниями гарнитур и условиями использования. Помогает найти типографическую основу для сайта, печатного макета или графического проекта.
Шрифты
www.fontsquirrel.comНа сайт ↗
Fontpair
Каталог сочетаний Google Fonts с просмотром собственного текста. Помогает подбирать пары для заголовков и абзацев, сравнивать их в макете и сохранять понравившиеся варианты.
Шрифты
fontpair.coНа сайт ↗
Khroma
Персональный AI-инструмент подбора цвета, который учитывает выбранные пользователем оттенки. Генерирует, ищет и сохраняет сочетания, соответствующие предпочтениям дизайнера.
Подбор цвета
khroma.coНа сайт ↗
Dribbble
Сообщество дизайнеров с визуальными публикациями и портфолио. Подходит для поиска отдельных приёмов в интерфейсах, иллюстрации и айдентике и знакомства с авторами.
Вдохновение
dribbble.comНа сайт ↗
Landbook
Подборка лендингов, портфолио и блогов для дизайнерского исследования. Помогает сравнивать структуру страниц и находить направление оформления нового сайта.
Вдохновение
land-book.comНа сайт ↗
Lapa Ninja
Галерея лендингов и сопутствующих материалов для дизайнеров. Подходит для сравнения первых экранов, компоновки контента и визуальных решений разных продуктов.
Вдохновение
www.lapa.ninjaНа сайт ↗
Mobbin
Библиотека скриншотов мобильных и веб-приложений с поиском. Помогает сравнивать реальные экраны и изучать UI-решения перед проектированием собственного сценария.
Вдохновение
mobbin.comНа сайт ↗
Readymag · проекты 2021
Архивная подборка лучших проектов Readymag за 2021 год. Полезна для исследования редакционной вёрстки и экспериментальной веб-подачи в конкретном периоде.
Вдохновение
readymag.comНа сайт ↗
Tilda Icons
Библиотека векторных иконок Tilda по бизнес-темам. Помогает иллюстрировать услуги, преимущества и этапы работы на лендинге или в презентации.
Иконки
tilda.ccНа сайт ↗
unDraw
Библиотека сюжетных иллюстраций для сайтов и приложений. Основной цвет можно менять перед скачиванием, чтобы подстроить графику под палитру бренда.
Иллюстрации
undraw.coНа сайт ↗
remove.bg
Автоматически отделяет объект на фотографии от фона. Подходит для подготовки изображений товаров, портретов и коллажей с последующим размещением на новом фоне.
Другое
www.remove.bgНа сайт ↗
Spline
Браузерный редактор 3D-сцен с совместной работой, материалами и анимацией. Позволяет создавать интерактивные объекты и встраивать их в веб-проекты.
3D-объекты
spline.designНа сайт ↗
Визуальный поиск и коллекции изображений на тематических досках. Позволяет собирать мудборды, группировать референсы и исследовать варианты оформления проекта.
Информация
www.pinterest.ruНа сайт ↗
3dicons
Наборы объёмных иконок для интерфейсов, лендингов и презентаций. У изображений можно подбирать цвет и ракурс, чтобы согласовать графику со стилем проекта.
3D-объекты
3dicons.coНа сайт ↗
Huemint
Создаёт цветовые схемы с помощью машинного обучения. Помогает подбирать сочетания для бренда, сайта и графики с учётом того, как цвета используются в композиции.
Подбор цвета
huemint.comНа сайт ↗
Fontjoy
Автоматически подбирает сочетания шрифтов для заголовков и основного текста. Позволяет сравнивать пары и находить баланс сходства и контраста между гарнитурами.
Шрифты
fontjoy.comНа сайт ↗
CSS Gradient
Онлайн-редактор цветовых градиентов для сайтов и графики. Позволяет визуально настроить переход между оттенками и получить CSS для выбранного фона.
Градиенты
cssgradient.ioНа сайт ↗
Icons8 · удаление фона
Удаляет фон с фотографии и отделяет основной объект. Подходит для подготовки изображений товара, портретов и деталей коллажа на прозрачном фоне.
Изображения и видео
icons8.comНа сайт ↗