Перейти к основному содержимому

Дизайн-макет

Хороший тон в psd-макете​

  1. Слои группировать в папки и под-папки слева-направо и сверху-вниз, выделять цветами
  2. Адекватные название слоев и файлов (лучше на англ. языке)
  3. Фон страницы выделен в отдельный глобальный слой
  4. Не используеся Lorem Ipsum
  5. Нет лишних файлов
  6. Не растрированы шрифты, графика, иконки
  7. Построение по сетке
  8. Главные поля пропорциональны миниатюре макета
  9. Смарт-объекты
  10. SVG должно хорошо импортироваться
  11. Модульная сетка
  12. По хорошему вынести в отдельную папку все иллюстрации и мелкую графику

Ширина макетов​

По сути, дизайн должен разрабатываться минимум для трёх устройств: desktop, tablet, mobile

  • 1920px - стационарные компьютеры (Full HD)
  • 1280, 1440px - ноутбуки
  • 768, 812, 1024px - планшеты, landscape phone
  • 360, 375, 414, 428px - смартфоны

Модульная сетка​

Колоночная система. В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль

Типовые блоки и элементы​

  • иерархия заголовков трех-четырех уровней;
  • ссылки, псевдо-ссылки;
  • элемент выделения важной информации;
  • цитата;
  • ненумерованный список;
  • нумерованный список;
  • вложенные списки;
  • иллюстрация на полосу, в текст;
  • таблица или несколько их типов;
  • файлы для скачивания;
  • выноски;
  • оформление маргиналий, если такие используются;
  • подача информации в 2–3 колонки (зависит от сетки);
  • простая форма.

Как создавать макет​

До этого шага по идее должен уже быть прототип и мудборд.

Вначале думаем - потом делаем​

step1.jpg

Начинаем с геометрии и форм. По хорошему должен уже быть прототип. Возьмите карандаш и бумагу. Подумайте над задачами и идеей сайта. Сделайте быстрые черновые эскизы, найдите композицию, приблизительную сетку, расположение блоков и элементов, почеркушки требуемых иллюстраций. И только после этого садитесь за компьютер. Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.

От большего к меньшему, от общего к частному​

step2.jpg

Классическое преподавание рисунка и живописи учит: «Двигайтесь от большего к меньшему, от общего к частному. Вначале проработайте общую композицию, самые большие массы и объемы, самые крупные пятна, а потом дорабатывайте, уточняйте, насыщайте деталями.»

Это правило целиком применимо ко всем аспектам и жанрам дизайна.

Продумайте свой проект, найдите идею и композицию, нарисуйте серию эскизов. И потом, планомерно, эти эскизы воплощайте, начиная с сетки, компоновки блоков, элементов, крупных цветовых пятен. И последовательно насыщайте их деталями.

Виды макетов​

  • Лента​

    stream.jpg

    Блоки во всю ширину экрана, друг под другом. Идеально для лендингов. Самый распространённый вид.

  • Плитка​

    tile.jpg

    Блоки образуют плитку, чаще всего из изображений со всплывающими масками при наведении.

  • Cлайдер (карусель)​

    step2.jpg

    Блоки во всю ширину с прокруткой контента.

  • Рубрикатор​

    blog.jpg

    Сложная сетка, для интернет-магазинов, новостных сайтов, соц. сетей.