Не знаю насколько это вам поможет, но расскажу как делаю я.
Составляю гайдлайны для каждого нового проекта:
1. Сетка: 960 bootstrap (для стандартных проектов), либо составляю сам ориентируясь на объём контента
modulargrid.org/#app, можно взять хорошие готовые сетки тут
www.cssauthor.com/bootstrap-grid-system-psd-templates
2. Типографика: сразу даёт набор (h1, h2, h3, h4, параграф, список + размеры кегля, интерлиньяж и т.д. + набор стилей css, scss, less, styl, но это больше для верстки)
www.gridlover.net/app/. (Также есть множество готовых пресетов в разных пропорциях. Ну и конечно всё можно настроить вручную)
Как более слабая альтернатива
pearsonified.com/typography
3. Шрифты:
https://www.google.com/fonts/ +
www.fontsquirrel.com + подбор шрифтовых сочетаний:
www.typegenius.com,
goo.gl/mp4IJD (подборка с
designmodo.com/), ну и посерьёзней
https://www.typewolf.com/
4. Цветовая палитра (если у клиента нет брендбука, что чаще бывает):
www.materialpalette.com,
www.colourlovers.com,
https://color.adobe.com/ +
color.romanuke.com (чаще им пользуюсь, выбираю ключевой цвет бренда и подбираю подходящую палитру ориентируясь на него)
5. Кнопки и ссылки: ну тут понятно, размеры кнопок, форма, состояния, размер текста, цвет ссылок и их стиль.
6. Иконки: если есть готовый прототип сайта, то можно сразу составить набор иконок
www.flaticon.com, dribbble с пометкой free и т.д. и т.п.
Конечно всё зависит от проекта, иногда можно добавить ко всему этому ещё: набор функциональных блоков (которые постоянно повторяются), но зачастую достаточно и этого набора. Дальше из этого всего собирается макет.
В процессе дизайна:
1. Фотографии:
thestocks.im, и отличный плагин для PS — uberstock
2. Паттерны:
subtlepatterns.com
Ну собственно и всё.
Простой
