Что такое дизайн макеты

Макет сайта: как сделать дизайн и передать исходники верстальщику

Удалить скрытые слои, настроить отступы, экспортировать иконки и приложить шрифты: что нужно сделать дизайнеру, чтобы разработчик не запутался в макет

Чтобы стать опытным дизайнером, нужно сделать несколько больших проектов и понять, как всё устроено изнутри. Если времени на проекты нет, то все нюансы передачи макетов разработчикам и правильном общении с ними можно узнать на нашем курсе.

Зачем приводить всё в порядок

Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.

Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:

Скорее всего, это происходит потому, что дизайнер плохо подготовил макет для вёрстки.

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Для чего нужен макет

Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создаёт макет сайта, затем передаёт исходники разработчику.

Макет сайта — это эскиз, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте.

При работе над макетом в графическом редакторе у дизайнера нет ограничений. Если выбранный шрифт не подходит, его можно поменять в один клик. Если кнопка выглядит неудачно, можно легко изменить её цвет и размеры.

Разработчик получает от дизайнера макет в графическом формате. Затем с помощью HTML и CSS, языка для разметки страниц и таблицы стилей приводит макет в такой вид, который понимают браузеры.

Правила создания макета

Верстальщик постоянно сверяется с исходными файлами, которые получил от дизайнера. Смотрит отступы и расстояния, копирует текст, задаёт нужные стили.

Важно! Часто дизайнер в спешке отправляет макет разработчику и при этом забывает проверить работу на ошибки. А верстальщик тоже может не заметить проблем и опубликовать это всё на сайте.

Обычные ошибки дизайнера:

Чтобы это происходило реже, необходимо соблюдать основные правила создания макета и взаимодействия с верстальщиком.

1. Договоритесь о формате файлов

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

Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.

Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.

Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?

2. Следуйте требованиям интерактивного дизайна

Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.

3. Избавляйтесь от дробных расстояний

Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми чётными числами. Не используйте нечётные числа и дроби.

4. Наведите порядок в слоях и артбордах

Во время работы над макетом дизайнер располагает слои в хаотичном порядке, не переименовывает их, скрывает неподходящие варианты. С таким макетом сложно работать верстальщику и другим специалистам, в нём нет структуры.

Чтобы создать порядок в слоях:

Источник

Все о дизайн-макетах: определение, описание, виды

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

Определение

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

Описание

Хорошо сделанный, качественный дизайн-макет, должен отвечать нескольким главным требованиям: быть читабельным, понятным с первого взгляда заказчику и более широкой аудитории потребителей.

Соответствовать необходимым техническим характеристикам, демонстрировать эстетическую привлекательность и гармоническое сочетание всех деталей, полностью соответствовать запросам заказчика.

Сохранять целостность, которая достигается с помощью:

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

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

Рекламные дизайн-макеты используются в процессе создания полиграфической продукции, прессы, интернет проектов.

Для печатных изданий

Дизайн-макеты для прессы, в основном, создаются для визуализации статей, изображений, заметок. В процессе разработки макета обязательно учитываются особенности и нюансы медиаструктуры.

Во внимание принимается:

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

Полиграфия

Учитывая особенности восприятия, информационная составляющая макета выстраивается слева на право, с сохранением пропорций, эстетической привлекательности, гармоничности. Исходя из того, что контакт с рекламным блоком длится не более 2-х секунд, текст разбивается на основной (используется крупный шрифт на темном или ярком фоне) и второстепенный (более мелкий шрифт на светлом или нейтральном тоне). Блоки с помещенным внутрь текстом отделяются полями или изображениями.

Макет сайта

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

Дизайнеры используют макеты, чтобы наглядно донести свою концепцию потенциальному заказчику или руководителю. Визуализировать образ, довести его до совершенства, без больших финансовых затрат.

При демонстрации макета заказчику считается важным показать проект (сайт, одностраничник или другое) в реальном масштабе. Для этой цели используют специальные компьютерные программы.

Дизайн-макет необходим в любой сфере, где творческая идея должна воплотиться в реальность. Он избавляет производителей от изготовления недоработанного продукта и последующей его переделки.

Источник

Пространство, сетки и макеты

В этой статье автор рассказывает о том как подойти к созданию дизайн-системы, рассказывает о её основах и том, как применить описанные методы и понятий в текущем дизайн проекте. Новички смогут узнать базовые понятия, а профессионалы могут освежить или покритиковать содержаний данной статьи.

Организация пространства является ключом к добротному и прекрасному дизайну. Пространственные системы, сетки для вёрстки и макеты фактически предоставляют правила, которые придают вашим проектам постоянный ритм, ограничивают принятие лишних решений и помогают командам оставаться на одном уровне понимания дизайна проекта. Эти фундаментальные понятия являются обязательным требованием для всех дизайн-систем. В этом руководстве мы пройдёмся по основам определения базовых пространственных единиц, создания правил отношений при помощи сеток (grids) и объединения их для создания современных макетов (layout) пользовательского интерфейса.

Что такое пространственная система?

Ежедневно дизайнеры принимают пространственные решения, начиная от определения высоты кнопки или области вокруг иконки. Пространственная система — это набор правил для измерения параметров и пространства ваших элементов в пользовательском интерфейсе. Единообразие на пространственном уровне позволяет вашему продукту быть более последовательным и позволяет лучше вести коммуникацию внутри вашей команды, сокращая количество решений, которые дизайнеры должны принимать в течении дня. Одним из примеров пространственной системы является «сетка 8pt». Тем не менее, существует много вариантов и конфигураций из которых всегда можно выбирать.

Ниже на картинке видно, как выглядит форма логина, когда к ней не применяется пространственный шаблон. Для пользователей дизайн может показаться «дешевым», непоследовательным и, как правило, ненадежным. В то время, как предсказуемость ритма визуально приятна и это то, чего вы ожидаете от брендов, которым доверяете.

Когда же эта форма логина настраивается в соответствии с пространственной системой 8pt, ритм становится предсказуемым и визуально приятным. Для пользователей такое поведение предсказуемо. Это увеличивает доверие и привязанность к бренду.

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

Как начать работу с пространственной системой?

Стоит начать с определения базового блока — это позволит вам создать шкалу поддерживаемых размеров в вашей пространственной системе. Просматривая различные продукты в Интернете, вы увидите несколько разных подходов к этому. Вы можете встретить таки системы, как 4pt, 5pt, 6pt, 8pt, 10pt. Здесь нет неправильного выбора, до тех пор пока не разберётесь, чему каждая из этих систем способствует или какие решения она предотвращает.

Предпочитаемый мною метод — линейная шкала 8pt для элементов с полушагом 4pt для интервальных значков или небольших текстовых блоков. Я предпочитаю 4pt базовую сетку для моей типографики, что означает, что высота линий моего выбора шрифта всегда будет делиться на 4. Эта система предназначена для уменьшения путаницы, и к тому же проста в реализации.

При создании своей собственной пространственной системы задумайтесь о следующих вещах:

1. Потребности пользователей

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

2. Количество переменных

Выбор меньшего базового блока, такого как 4pt, 5pt или 6pt, может создать слишком много переменных в вашей системе. В итоге станет всё труднее наблюдать разницу между 12pt и 16pt, что может затруднить согласованность в действиях команды. Я нахожу, что приращение в 8pt являются правильным балансом для визуального отдаления при наличии разумного количества переменных. В дополнение используется половинная единица из 4 точек для размещения значков или настройки небольших текстовых блоков.

3. Нечетные числа

Введение нечетных чисел, таких как 5pt, в пространственные правила может затруднить центрирование элементов без разделения пикселей. Например, центрирование текста и значков в кнопке высотой 25 пикселей может создать размытые пиксели на экранах у некоторых пользователей. Аналогичным образом, масштабирование пользовательского интерфейса для разных мобильных и настольных экранов, для которых требуется 1,5x масштаб, также приведет к размытости пикселей.

Как применить пространственную систему?

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

В этом примере можно увидеть, что высота строки этого текста составляет 20px, но если я использовал 8px отступы сверху и снизу, кнопка будет иметь высоту 36px. Какому же измерению в таком случае нужно дать приоритет? Существует два способа решения этой проблемы:

1. В приоритете Элемент (строгое определение размера элемента)
При таком подходе размер элементов имеет приоритет при сопоставлении с заданной пространственной системой. Это включает в себя такие вещи, как кнопки и входные данные формы. Эти элементы, скорее всего, имеют предсказуемое содержание и являются ключом к созданию ритма в общей композиции.

2. В приоритете Контент (строгое внутреннее заполнение)
Когда контент менее предсказуем, и мы заботимся о его отображении, стоит применить строгие внутренние отступы и задавать размеры элементов в зависимости от их содержимого. Размеры этих элементов могут по-прежнему соответствовать правилам вашей пространственной системы, но это вторично по отношению к пространству вокруг содержимого. Это полезно для таблиц с неопределенным количеством пользовательского контента.

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

Что такое система вёрстки?

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

Система вёрстки на основании столбцов

Такая система вёрстки помогает вам организовать контент в равномерно расположенные вертикальные столбцы. Пространство между столбцами называется «размером желоба». Применение правил вашей пространственной системы к таким «желобам» поможет придать вашему проекту согласованный ритм. Типичным примером является сетка из 12 столбцов, поскольку она позволяет разделить данную область на 2, 3, 4 или 6 частей.

Модульная система вёрстки

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

Базисная система вёрстки

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

Создание макета

Макеты являются кульминацией и объединением определенных пространственных правил и организации контента в одну композицию. Объединение вашего контента в продуманные структуры — это легкая часть, а сложная часть — это составить всё вместе с четкой иерархией в бездонном океане ежедневно меняющихся платформ и размеров экранов.

Определение логики масштабирования контента является обязательным требованием для веб-приложений. Размеры и масштабы экрана могут варьироваться от рабочего стола до мобильного устройства. Существует три основных типа при создании макета дизайна, каждый из которых может масштабироваться по-своему изящно. Некоторые дизайн-проекты могут использовать все эти концепции одновременно.

Адаптивный (Adaptive)

Адаптивный макет полностью меняется в зависимости от формата, в котором он отображается. При этом загружаемый интерфейс адаптируется для настольных компьютеров, планшетов и мобильных устройств. Это обеспечивает более индивидуальный подход к устройству пользователя, но задача перестроить одну и ту же функциональность в несколько форматов одновременно может стать очень дорогостоящей и трудоёмкой.

Отзывчивый (Responsive)

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

Строгий (Strict)

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

Как реализовать пространственную систему на существующем наборе дизайн-проектов

Начать с нуля любой проект легко. Вызов проблеме состоит в модернизации существующего дизайна.

Первый шаг — привлечь к этому процессу всех заинтересованных лиц. Убедить членов команды и заинтересованных лиц изменить текущий процесс разработки продукта может быть сложно, особенно если не раскрывать ценность их роли в этом процессе. В то же время разработчики хотят больше четких требований и проводить меньше времени с суетливыми дизайнерами, рассказывающим им как и где необходимо уменьшить отступы. Менеджеры хотят, чтобы пользовательская и бизнес логики предоставлялись конечным пользователям как можно быстрее. Дизайнеры хотят, чтобы их проекты быстро и эффективно переводились непосредственно в понятный и чёткий пользовательский опыт. Все эти вещи могут быть достигнуты путем инвестирования сил всех участников процесса в единую пространственную систему.

Начните с малого. Перестройка всего, что может вписаться в недавно определенную пространственную систему, может показаться сложным процессом. Ищите простые компоненты для преобразования, например кнопки, а затем распространяйте их на более общие элементы, например поля формы. Задайте общий вектор понимания вместе с вашей командой на этом пути. Поддерживать порядок в дизайн системе — то же самое, что пасти кошек (прим. — задача почти что невыполнимая). Для упрощения процесса расширьте возможности людей, таких как разработчики, которые будут непосредственно внедрять, поддерживать и претворять в жизнь дизайн систему.

Принимайте взвешенные решения. Докажите заинтересованным сторонам, как эта работа уменьшит дизайнерский и технический долг технологиям и повысит скорость работы дизайна. После завершения части работы, такой как организация рабочего процесса с иконками, начиная от проектирования и заканчивая реализации, уделите немного времени, чтобы получить представление команды о моментах «до и после», опросив участников процесса.

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

Источник

Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop

11 минут на чтение

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

Что такое макет сайта

Макет сайта — это его реалистичный прототип, созданный в графической программе вроде Photoshop. Он выглядит как готовый сайт: со всеми блоками текста и изображений, кнопками, фоновыми рисунками и так далее. Единственное отличие в том, что в макете нет функционального наполнения: например, страница с товарами заполнена шаблонами описаний.

Зачем нужен макет сайта

Макет сайта — это результат работы дизайнера по заданию заказчика. Дальше макет переходит к верстальщику и программисту, эти специалисты уже превращают графический файл в настоящий сайт.

В идеале в создании макета сайта участвует много специалистов, кроме дизайнера и верстальщика: копирайтер, дизайнер пользовательских интерфейсов, программист бэкенда и даже маркетолог.

Макет нужен, чтобы весь процесс прошел быстро: исполнителям пришлось вносить минимум правок, а заказчик сэкономил время и деньги.

Макет во всем этом процессе помогает:

Разработка макета сайта: работаем поэтапно

Давайте подробно разберемся, как макет появляется на свет и что учесть в процессе создания.

Техзадание

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

Прототип

Когда задание прописано, можно делать блочную структуру макета сайта, то есть прототип. Это схематичный рисунок, который показывает расположение основных элементов: хедер, футер, блоки контента на странице, примерное соотношение их размеров.

Макет сайта на разных устройствах

Подбор цвета

Подберите не более пяти цветов — пара для шрифта, пара базовых цветов для фона и один акцентный. Если есть логотип или брендбук, отталкивайтесь от него.

Те, кому сложно подбирать цвета, могут использовать специальный сервис. Их много, вот некоторые бесплатные:

Подбор шрифта

Для макета сайта вам также понадобится пара шрифтов — один для заголовков, другой для основного текста. Как максимум можно подобрать третий, если очень нужно. Что нужно помнить, когда выбираешь шрифт:

Проработка

Теперь можно начинать непосредственно создавать макет сайта.

В одном из следующих разделов я пошагово покажу, как создать макет сайта в Photoshop по этой схеме.

Важно! Каждый элемент рисуйте на отдельном слое и логично называйте. Кнопка — button, название товара — item name и так далее. Не забывайте логически группировать слои и давать группам имена.

Создание гайда

Хорошим тоном будет сделать описание макета сайта для верстальщика. В описании можно зафиксировать все основные характеристики макета:

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

Сюда же можно вынести сравнение версий для разных устройств: что меняется, когда сайт просматривают на компьютере, планшете или телефоне.

Как создать макет сайта в фотошопе

Быстро покажу процесс создания макета сайта в фотошопе. Сверстаем главную страницу интернет-магазина кружек, на ней будут хедер, блоки с категориями товаров и футер — все просто. Изображения для сайта возьму из бесплатного фотобанка Unsplash, а вы можете найти где-то еще — например, в одном из бесплатных фотобанков в нашей подборке.

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

Создаем новый файл в Photoshop. Можете настроить самостоятельно или перейти на вкладку «Для Интернета». По умолчанию программа предлагает макет «Заказная» размерами 1366 на 4000 пикселей, я немного округлю ширину до 1380 пикселей. Это распространенный размер, подходящий под размер экрана компьютера или ноутбука. Цветовая модель — RGB, разрешение — 72 пикселя на дюйм, фон прозрачный.

Создание нового файла в Photoshop с параметрами под макет сайта

Теперь задаем модульную сетку. Заходим во вкладку «Просмотр» верхнего меню и выбираем там пункт «Новый макет направляющей». По умолчанию программа предлагает создать восемь столбцов с полями и внутренними отступами, но мы сделаем 12 — так будет удобнее делить страницу на 2, 3, 4 или 6 блоков.

Также зададим значение средника в 15 пикселей (это внутренний промежуток между колонками), верхнее и нижнее поле поставим по нулям, правое и левое — 30 пикселей. Вы можете выбрать свои значения, но помните, что отступы и поля должны быть кратны одной цифре, например, 5.

Первый шаг — создать сетку направляющих, предпочтительно из 12 столбцов

Теперь зальем фон. Для этого используем корректирующий слой — так будет проще при необходимости менять его цвет, чтобы не заливать по новой. В панели «Слои» выбираем значок кружка, кликаем на него и выбираем опцию «Цвет», указываем нужный оттенок. Теперь остается лишь удалить маску с этого слоя, чтобы остался только цвет:

Создаем фоновый слой и заливаем его одним цветом

Не забудьте переименовать слой — лучше на латинице, и можете сразу его заблокировать с помощью кнопки с иконкой замка в панели слоев.

Переименуем и заблокируем фоновый слой

Следующий шаг — выбрать цвета. Я уже подобрала фоновую картинку, поэтому будем отталкиваться от нее с помощью сервиса Adobe Color. Заходим в сервис, выбираем в меню «Извлечение темы», загружаем картинку и получаем несколько готовых сочетаний. Коды полученных цветов можно скопировать.

Сервис Adobe Color поможет подобрать цвета по фотографии

Готово, можно приступать непосредственно к отрисовке. У меня будет маленький и простой лендинг, поэтому я не буду прорабатывать блочную структуру, а сразу начну создавать элементы. Если вы делаете что-то более сложное, лучше набросайте для начала схему.

Первым делом создадим хедер с логотипом компании и ссылками на другие разделы сайта. В основе будет прямоугольник, залитый одним из выбранных цветов. Логотипа у меня нет, поэтому просто напишу придуманное название в шапке и создам заголовки для других разделов сайта.

В хедер помещаем логотип и ссылки на разделы

Теперь добавлю главное изображение страницы и напишу на нем небольшой слоган. Контейнер для баннера, сам баннер и текст на нем сгруппирую в папку Banner. Если будете размещать картинку как в моем примере, не оставляя поле с одной стороны — обязательно сделайте пометку для верстальщика, как должна вести себя картинка при растягивании страницы в ширину. Например, что она должна оставаться «приклеенной», а справа будет возникать пустое поле; либо же она должна увеличиваться вместе со страницей.

Под хедером разместим главное фото и слоган магазина

Пришла очередь сделать блоки категорий, у меня их будет шесть. Чтобы не делать их слишком маленькими, размещу в два ряда по три блока. Учитывая, что в макете 12 колонок, один блок займет ровно четыре колонки. Я не буду сразу прорабатывать каждый блок, а создам шаблон с серой плашкой и размножу его на нужные позиции:

Категории товаров представим в виде шести симметричных блоков

Заполняем блоки их картинками и меняем текст. Параллельно группируем элементы, чтобы бокс под картинку, сама картинка и подпись были в одной подгруппе.

Заполняем блоки фотографиями и текстом

На этом этапе мне не очень нравятся поля между блоками — они получились довольно узкими, и фотографии сливаются. Чтобы это исправить, я уменьшу каждый блок на 10 пикселей слева и справа. Обратите внимание, что элементы хедера также подвинулись, чтобы соответствовать категориям: логотип на 10 пикселей вправо, элемент «О нас» на 10 пикселей влево.

Увеличение полей между блоками

Дело за малым — остался футер. Поставим сюда форму для сбора почты и укажем контакты для связи. Чтобы не ставить обычный цветной фон, я нашла еще одну картинку и поставлю ее в футер. И обратите внимание, что элементы футера также отступают на 10 пикселей от направляющей, как и категории над ними. Не забываем — обязательно группируем слои и даем им нормальные названия, чтобы верстальщику потом было проще разобраться.

В футер помещает еще одно фоновое фото, на нем располагаем форму подписки и контакты

Оставшуюся высоту холста можно обрезать и радоваться результату. Вот, что получилось у меня:

Готовый макет сайта

Уверена, ваш макет сайта выйдет гораздо круче :).

Автоматизация email рассылок

Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.

Как создать макет сайта онлайн или в программе

Подобрала для вас пять сервисов, в которых можно создать макет сайта онлайн, и одну удобную бесплатную программу для десктопа.

Wilda

Русскоязычный онлайн-конструктор, где можно создать макет сайта, документа, буклета, баннера и так далее. Пользователь выбирает один из шаблонов (для сайтов их 16) или работает с нуля.

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

Цена: макеты создаются бесплатно. Платить нужно за скачивание — от 150 рублей за одно скачивание, либо за публикацию в онлайн — 50 рублей. При покупке пакетного тарифа будет дешевле.

Mockflow

Инструмент для быстрого прототипирования сайтов, предназначен для UI/UX дизайна. Макет сайта составляется из готовых блоков — например, хедера, карточки товара, баннера или блока «Эти товары недавно искали…». Эти блоки можно лишь изменять по размеру, отредактировать их цвет или содержимое не получится. Перед созданием макета нужно выбрать, для какого интерфейса вы будете составлять прототип, это повлияет на набор блоков.

Цена: есть бесплатный тариф на один проект объемом не более трех страниц. Далее от 15 долларов в месяц.

iPlotz

Удобный, хотя и немного устаревший онлайн-конструктор макетов сайтов. Работает на Flash Player, поэтому может притормаживать, особенно на слабых компьютерах.

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

Здесь также есть два обширных набора иконок, растровый и векторный, и набор курсоров в виде «показывающих пальцев» — видимо, он предназначен для создания подсказок верстальщику и программисту, как должен нажиматься или двигаться определенный элемент.

Цена: бесплатно за один пятистраничный проект, далее от 15 долларов в месяц.

Moqups

В этом онлайн-конструкторе макетов можно сделать сайт, диаграмму или график, подготовить бизнес-отчет.

Здесь 24 шаблона макетов сайтов и возможность создать макет с нуля. Пользователю предлагается собрать свой сайт из готовых блоков: текст, кнопка, ссылка, радиопереключатель, поле для ввода текста, прокрутка страницы, баннер и так далее. Все элементы можно настраивать: менять цвет, размер и текст на них. Если создаете проект из нескольких страниц, то можно линковать их между собой, чтобы сайт был более реалистичным.

Цена: бесплатно доступен один проект из максимум 200 элементов, далее от 16 долларов в месяц.

Marvel

Еще один сервис для создания макета сайта онлайн. Приятный современный интерфейс, инструментов немного, но достаточно для работы. Есть уже готовые элементы сайта с возможностью редактирования, фигуры — прямоугольник, эллипс, линия, и изображения со встроенным фотобанком.

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

Цена: бесплатно для одного проекта без возможности скачивать созданные файлы. Далее от 12 долларов в месяц.

Justinmind

Десктопная программа с обширными возможностями. В начале работы пользователь выбирает, для какого интерфейса будет создавать дизайн: мобильного на Android или iPhone, десктопа, планшета. Затем миксует страницу из готовых компонентов, которые можно гибко настроить под себя: изменить цвет, размер, текст и картинки.

Программа выгодно отличается от схожих онлайн-сервисов количеством функций, даже на бесплатной версии. Можно посмотреть симуляцию того, как страница будет выглядеть на устройстве, и экспортировать результат в формате HTML. Интерфейс напоминает Photoshop — дизайнерам будет легко разобраться. Программа принимает на вход файлы из Photoshop, Sketch и Adobe XD.

Цена: неограниченная бесплатная версия. Платные начинаются от 19 долларов в месяц и отличаются возможностью командной работы, расширенными наборами элементов, усиленной поддержкой и прочими бонусами.

Ошибки в создании макета сайта

Самые распространенные ошибки при макетировании можно разделить на две группы — ошибки, которые влияют на восприятие и общую «красоту» сайта, и ошибки, из-за которых верстальщик неправильно создает сайт по готовому макету.

Ошибки в дизайне

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

Избегайте этих ошибок:

Ошибки, критичные для верстки

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

Создание макета сайта: что стоит запомнить

Макет — это полноценная модель будущего сайта. Он нужен, чтобы скоординировать работу дизайнера, верстальщика и программиста, а также наглядно показывать заказчику ход работы.

Создание макета идет по следующим этапам:

Каких ошибок стоит избегать, чтобы макет сайта получился красивым и его было легко сверстать:

Чтобы сделать макет, можно нанять дизайнера или потратить время самостоятельно — есть много бесплатных сервисов и программ, просто найдите подходящую для себя. А когда сайт будет готов, обязательно подключайтесь к SendPulse — с нами легко собирать лиды и делать рассылки через email, SMS, push, Viber и чат-ботов.

Рассказываю, как делать по-настоящему крутые email рассылки. Помогаю найти баланс между заботой о клиенте и успешными продажами.

Источник