Design
~~~Подбор цвета:
https://palx.jxnblk.com/ — хорошо раскладывает подбор к основному цвету
https://color.adobe.com/ — есть готовые наборы (очень много)
Inspiration:
http://collectui.com — удобно отсортировано по категориям
https://www.behance.net — самая актуальная платформа для портфолио. можно искать по категориям
https://dribbble.com — вторая по значимости платформа для портфолио. многие кейсы красивы но не рабочие в реальной жизни. скорее для визуального вдохновения.
https://pinterest.com — на пинтересте огромное количество хороших подборок, к тому же там удобно собирать поиск из тегов-запросов (landing web travel ... )
Готовые иконки:
PSD макеты:
можешь качать и смотреть как устроены файлы: сетки, размеры шрифтов, размеры блоков и т.д.
Фото/иллюстрации:
https://pngtree.com/ — хороший ресурс с уже обтравленными фото и иллюстрациями в формате png. К примеру, вот тебе шляпа) https://pngtree.com/so/cowboy-hat
https://www.everypixel.com/ — поиск по стоковым фото
Шрифты:
https://fonts.google.com/ — для начала стоит брать шрифты тут. они легко подключаемы и доступны. обращай внимание на наличие необходимого языка
https://fontpair.co/ и https://fontjoy.com/ — хорошие ресурсы для подбора шрифтовых пар (заголовок/параграф)
https://www.modularscale.com/?16&px&1.414 — инструмент для подбора размеров шрифта на сайте. по-умолчанию поставил тебе оптимальные значения:
16px — параграф
45px — заголовок 1
32px — заголовок 2
23px — заголовок 3
*для первого проекта норм.
https://pearsonified.com/typography/ — инструмент для подсчёта междустрочного интервала в зависимости от размера шрифта и ширины блока
Сетки:
https://www.sketchappsources.com/free-source/2698-bootstrap-4-grid-design-template-sketch-freebie-resource.html — bootstrap сетка. впринципе скетч сам её умеет. суть в том, чтобы эту сетку понимать и соблюдать.
https://gumroad.com/l/goldencanongrid — очень полезная сетка для построения композиции, советую её использовать. иструкция по использованию тут: https://www.youtube.com/watch?v=fWfD0EfiXcE
Полезное:
https://bureau.ru/soviet/ — Постоянно пополняемая подборка советов. Похоже на «Ководство» лебедева, только в 100 раз лучше (там и из ководства есть примеры).
https://ilyabirman.ru/projects/typography-layout/ — типографская раскладка для клавиатуры. очень важно правильно работать с с типографикой используя правильные символы. например вместо - ставить тире — , вместо кавычек для кода "" ставить типографские «» и т.д. на странице есть линк на плакат в котором вся раскладка и её использование подробно расписано.
https://ia.net/topics/learning-to-see — очень классная и полезная статья на английском. стоит прочесть и перечитывать иногда.