Достанем старого кота из ящика: Кратко опишу как рисую дизайн я. Делать это достаточно просто, делается все поэтапно:
1. Пишу в блокнот списком отдельные мыcли по поводу проекта
- Нужен фильтр по 10 параметрам
- Нужна форма оплаты
- Нужен модуль корзины на AJAX
- Нужен модуль поиска
- Нужны кнопки шаринга в соц.сети
- Нужен модуль каталога статей
- ...
Подобных пунктов бывает до 50 (опять же у меня)
2. Определяюсь с типами страниц смотря в список из первого пункта
- Главная
- Страница каталога товаров
- Страница товара
- Страница корзины
- Информационные страницы
- ...
3. Раскидываю список из п.1 по списку п.2 (функционал по страницам)
- Главная
Модуль корзины на AJAX
Модуль поиска
...
- Информационные страницы
Модуль корзины на AJAX
Модуль поиска
Модуль каталога статей
...
- ...
--------------------------------- На этом рутина заканчивается ----------------------------
4. Рисую прототип страниц (в принципе подойдет А4 + карандаш, но мне удобнее пользовать
ninjamock.com)
На данном этапе собираются в единое целое отдельные мысли, сперва рисуем на макете все что получилось в 3-м пункте, затем смотрим, думаем, что-то добавляем, что-то убираем, стараемся продумать все действия пользователя, короче продумываем юзабилити.
На выходе должно получиться несколько макетов, количество которых равно количеству разных типов страниц
5.
Смотрю на макет из п.4, вспоминаю о целевой аудитории, определяюсь с цветами и стилем и начинаю отрисовывать в фотошопе каждую деталь макета. В какие-то моменты для вдохновения иду на ресурсы с работами лучших дизайнеров (кстати это лучше делать и на предыдущих этапах, а также каждый день перед работой, все полезнее, чем просмотр котиков). Ссылки на данные ресурсы в конце.
6.
Верстаю ручками, подсознательно перебирая каждый элемент дизайна в голове, задавая себе вопрос: "А можно ли этот блок нарисовать при помощи css?" Таким образом в html-шаблоне остается минимум графики.
7.
Натягиваю шаблон на CMS
8.
Допиливаю шероховатости, оптимизирую ресурсы (минимум запросов к серверу, максимум скорости загрузки)
9.
Если дизайн адаптивный - работаю над адаптивностью (разные разрешения экранов, клацанья по смартфону, тесты в
pagespeed)
Как-то так, не помню откуда я такой сценарий взял, может сам сформировал в процессе работы, но мне нравится работать подобным образом, косяков меньше, в итоге дизайн получается более монолитным и продуманным.
Ссылки на ресурсы:
-
https://dribbble.com/ - Лучшие дизайнерские работы в WEB и мобильных приложениях со всего мира
-
https://www.behance.net/ - Лучшие работы вообще в графическом дизайне
-
http://ru.365psd.com/ - Большая коробка с графикой, которую можно еще и скачать в PSD, Среди этой кучи есть много достойных работ
-
http://codepen.io/ - Отличная подборка различных элементов, написанных уже кодом. Хороший ресурс для верстальщика