Где брать вдохновение и ресурсы, если ты не дизайнер

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

Репозиторий awesome-design от разработчика Tony Chan — это как раз тот случай, когда кто-то уже проделал за вас огромную работу по отбору годноты. Это огромный каталог инструментов, сервисов и обучающих материалов, который пригодится любому фронтенд-разработчику или фулстеку, вынужденному иногда брать на себя роль UI/UX дизайнера.

Что внутри этого хранилища

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

Цвета и градиенты

Если вы до сих пор выбираете цвета «на глаз», загляните в раздел Color. Там собраны сервисы, которые сделают это за вас. Например:

• Coolors — генератор схем, где можно просто нажимать пробел, пока не найдете идеальное сочетание.
• Nippon Colors — потрясающая подборка традиционных японских цветов, если хочется чего-то эстетичного и необычного.
• WebGradients — коллекция из 180 готовых CSS-градиентов. Просто копируете код и вставляете в проект.

Иконки и логотипы

Забудьте про поиск картинок в Google Images. В репозитории десятки ссылок на качественные паки:

• Font Awesome и Google Material Icons — база, которую знают все.
• Simple Icons — если нужны SVG-иконки популярных брендов (GitHub, Docker, React и прочие) в едином стиле.
• The Noun Project — огромная библиотека иконок буквально для всего на свете.

Типографика

Шрифты — это 90% дизайна веба. В соответствующем разделе есть не только ссылки на Google Fonts или Font Squirrel, но и инструменты для подбора пар. Например, Google Font Combinations помогает понять, какой заголовок будет дружить с основным текстом.

Практическая польза для разработчика

Главная ценность awesome-design не в том, чтобы прочитать его как книгу, а в том, чтобы использовать как справочник в конкретных ситуациях.

Допустим, вам нужно быстро набросать лендинг. Идете в раздел Stock, берете качественные фото на Unsplash или Pexels. Затем заглядываете в Mockup, находите подходящий темплейт устройства на Device Shots, чтобы красиво показать скриншоты вашего приложения. В финале выбираете палитру в Color Hunt — и вуаля, проект выглядит профессионально, хотя вы не нарисовали ни одного пикселя в Figma.

Кстати, про Figma и Sketch. В разделе Toolkit собраны ссылки на основные инструменты и плагины к ним. Даже если вы не планируете становиться профи в дизайне, базовое владение Figma сейчас — это стандарт индустрии для фронтенд-разработчика.

Концепции и обучение

Если у вас внезапно появилось свободное время и желание копнуть глубже, обратите внимание на вторую половину репозитория. Там собраны ссылки на:

1. Styleguides — посмотрите, как устроены дизайн-системы у гигантов вроде Apple, Google (Material Design), IBM или Starbucks. Это отличный способ понять, как строятся интерфейсы мирового уровня.
2. Книги — классика вроде «Don't Make Me Think» Стива Круга или «About Face» Алана Купера. Это база по UX, которая не устареет еще долго.
3. Подкасты и медиа — ресурсы типа Design Milk или Smashing Magazine, чтобы быть в курсе трендов.

Почему это стоит добавить в закладки

Проект живет с 2016 года и за это время собрал почти 17 тысяч звезд. Сообщество активно докидывает новые ссылки через Pull Requests, так что список остается актуальным.

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

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