Дизайн-макет
- Колонки для Photoshop - 960.gs
- Макеты - HTML-templates
- Макеты - All-PSD
- Макеты - Freepsdfiles
- Макеты - html5up
- marvelapp - Сервис для "оживления" прототипов
- Памятка дизайнеру сайтов
Хороший тон в psd-макете:
- Слои группировать в папки и под-папки слева-направо и сверху-вниз, выделять цветами
- Адекватные название слоев и файлов (лучше на англ. языке)
- Фон страницы выделен в отдельный глобальный слой
- Не используеся Lorem Ipsum
- Нет лишних файлов
- Не растрированы шрифты, графика, иконки
- Построение по сетке
- Главные поля пропорциональны миниатюре макета
- Смарт-объекты
- SVG должно хорошо импортироваться
- Модульная сетка
- По хорошему вынести в отдельную папку все иллюстрации и мелкую графику
Ширина макетов
По сути, дизайн должен разрабатываться минимум для трёх устройств: desktop, tablet, mobile
- 1920px - стационарные компьютеры (Full HD)
- 1280, 1440px - ноутбуки
- 768, 812, 1024px - планшеты, landscape phone
- 360, 375, 414, 428px - смартфоны
Модульная сетка
Колоночная система. В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль
Типовые блоки и элементы
- иерархия заголовков трех-четырех уровней;
- ссылки, псевдо-ссылки;
- элемент выделения важной информации;
- цитата;
- ненумерованный список;
- нумерованный список;
- вложенные списки;
- иллюстрация на полосу, в текст;
- таблица или несколько их типов;
- файлы для скачивания;
- выноски;
- оформление маргиналий, если такие используются;
- подача информации в 2–3 колонки (зависит от сетки);
- простая форма.
Как создавать макет
До этого шага по идее должен уже быть прототип и мудборд.
Вначале думаем - потом делаем
Начинаем с геометрии и форм. По хорошему должен уже быть прототип. Возьмите карандаш и бумагу. Подумайте над задачами и идеей сайта. Сделайте быстрые черновые эскизы, найдите композицию, приблизительную сетку, расположение блоков и элементов, почеркушки требуемых иллюстраций. И только после этого садитесь за компьютер. Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.
От большего к меньшему, от общего к частному
Классическое преподавание рисунка и живописи учит: «Двигайтесь от большего к меньшему, от общего к частному. Вначале проработайте общую композицию, самые большие массы и объемы, самые крупные пятна, а потом дорабатывайте, уточняйте, насыщайте деталями.»
Это правило целиком применимо ко всем аспектам и жанрам дизайна.
Продумайте свой проект, найдите идею и композицию, нарисуйте серию эскизов. И потом, планомерно, эти эскизы воплощайте, начиная с сетки, компоновки блоков, элементов, крупных цветовых пятен. И последовательно насыщайте их деталями.
Виды макетов
Лента
Блоки во всю ширину экрана, друг под другом. Идеально для лендингов. Самый распространённый вид.
Плитка
Блоки образуют плитку, чаще всего из изображений со всплывающими масками при наведении.
Cлайдер (карусель)
Блоки во всю ширину с прокруткой контента.
Рубрикатор
Сложная сетка, для интернет-магазинов, новостных сайтов, соц. сетей.