Что составляет дизайн макета

Дизайн-макет — это. Виды, создание и разработка

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

Определение

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

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

Характеристики

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

• понятность;
• читабельность;
• гармоничность композиции;
• интересы заказчика, его ключевая идея;
• иметь необходимые технические характеристики.

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

Целостность дизайн-макета создается с помощью следующих инструментов:

• линии и формы;
• цвет и тон;
• текстура;
• размер;
• перспектива.

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

• пропорциональность;
• уравновешенность конструкции;
• четкие акценты;
• целостность и единство элементов.

По сфере назначения макеты делятся на архитектурные и рекламные.

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

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

Для прессы

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

• количество и периодичность выходов;
• формат издания;
• размер возможного блока размещения, его расположение.

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

Макет сайта

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

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

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

Полиграфия

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

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

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

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

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

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

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

Источник

5 основных этапов работы над макетом

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

1. Сбор информации

На этом этапе мы получаем всю вводную информацию от клиента, внимательно изучаем тз, а также проводим анализ ниши (смотрим конкурентов, аудиторию). Этот этап важен, потому что он поможет нам заложить в дизайн основные смыслы (цели проекта, цели и задачи дизайна проекта, какую эмоцию должен получить пользователь при касании с нашим дизайном, на какие мысли/идеи дизайн может натолкнуть пользователя, какое ключевое действие он должен совершить и т.д.).

2. Мудборд

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

3. Генерирование идей и определение основных концепций

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

4. Скетч (вайерфрейм, набросок)

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

5. Дизайн

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

Важно отметить, что это не всегда линейный процесс. На стадии скетчей мы можем постоянно возвращаться к стадии генерирования идей и менять смыслы (эти этапы вообще могут проходить параллельно друг другу). Или на этапе дизайна мы можем внезапно прийти к мысли “все не то и все не так” – и вернуться на этап номер 2 или 1.

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

Источник

Что должно быть в макете сайта: шпаргалка для дизайнера

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

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

Осторожно, в статье много иллюстраций.

Общие рекомендации

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

Шрифты

Их нужно прикреплять к макету, иначе разработчик скачает какие-нибудь не те и испортит дизайн.

Векторные объекты

Удивительно, но векторная картинка должна быть в векторе и на макете. Если в макет вставить изображение другого формата, там оно будет выглядеть нормально, но при тестировании станет мыльным. Чтобы такого не происходило, надо всегда использовать вектор: скажем, прикреплять SVG-иконки.

Сетка

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

Сетка на макете сайта в Figma

Обязательные элементы для сайта

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

Страница 404

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

404 — это код самой популярной ошибки. Кроме неё существует и множество других состояний, но для упрощения работы 404 стала универсальной страницей для обработки ошибок.

Если не забыть про 404, можно пофантазировать и сделать креативной даже эту, самую типовую, страницу. Например, можно добавить интерактивности.

Страница 404 сайта компании Dewis

Пустая страница

Если поисковик или фильтр не выдал никаких вариантов, то открывается страница с текстом из разряда «Записей за выбранный период нет». И о ней тоже надо подумать заранее.

Пустая страница при отсутствии вариантов на сайте «N+1»

Однако некоторые сайты даже в случае неудачного поиска специально показывают альтернативные варианты: пустой выдачи быть не может.

Страница с результатами поиска

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

Поиск товаров на сайте Zara Home

А так выглядит та же страница, если выпадающего списка нет:

Картинка для шаринга

Речь идёт о картинке, которая появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку. Кстати, разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.

Ссылка на HTML Academy во Вконтакте

Страница с текстом

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

цитата и длинная цитата с подписью и фото;

видео (и подпись, если она нужна);

картинка (и подпись, если она нужна);

списки (нумерованный и маркированный), вложенные списки;

Блог HTML Academy

Необязательные элементы

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

Стили для карты отдельным текстовым файлом

Если вместо обычной карты хочется сделать что-то нестандартное, можно воспользоваться сервисом Snazzy maps. Только нужно уточнить у клиента, будет ли он покупать лицензионный ключ к картам. Если да, передавать разработчикам стили надо в виде JSON-файла.

Разные стили карты Санкт-Петербурга на Snazzy maps

Выделение активного пункта в меню

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

Поисковый запрос в Google

Хлебные крошки

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

Блог HTML Academy

Личный кабинет

Сюда относятся страницы входа, страницы с настройками и введёнными данными, страницы с предпочтениями (любимые товары и т.д.).

Редактирование профиля на ivi.ru

Постраничная навигация

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

Статья на сайте National Geographic

Кнопка «Вверх»

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

Кнопка «вверх» при поиске товаров на сайте Румиком

Фильтры

Если они есть, нужно внимательно проверить все возможные детали для каждого.

Чекбоксы, радиокнопки — надо учесть особенности всех типов фильтров.

Выбор товаров на Ozon

Кнопка «Сбросить/очистить всё» или сбросить отдельные пункты.

Поиск товаров на Ozon

Раскрытый список с пунктами.

Фильтр категории на Ozon

Ползунок для фильтра с ценой (от… до…).

Фильтрация цены товаров на Ozon

Блок с количеством товаров:

Выбор количества товаров на Ozon

Обработка ошибок или подсказки к полям:

Подсказка к полю на Ozon

Согласие на обработку персональных данных

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

Регистрация на сайте Zara.Home

Фавикон

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

Фавиконки YouTube и Google Документов

Заглушки для изображений

Если фотография человека или товара не загружена, должно быть какое-то изображение — заглушка.

Товары с сайта Ozon

Модальные окна

То, что происходит после отправки формы:

«Спасибо за заявку»

«Ваша заявка не отправлена, произошла ошибка»

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

Оформление заказа на на сайте Румиком

Календарь

Если делать календарь, то стоит задизайнить несколько состояний::

интервал между выбранными датами;

Если что-то из этого не сделать, пользователь просто не сможет сориентироваться в календаре.

Выбор даты на Aviasales.ru

UI kit

Это готовый набор графических элементов. Если они понадобятся верстальщику снова, их не придётся искать по всему проекту, а можно будет сразу обратиться к Ul kit. Так будет проще разобраться и другому верстальщику, если по прошествии времени клиент захочет собрать новые страницы на основе существующих. Сделать UI kit — хороший тон для дизайнера. В UI Kit могут входить кнопки, хлебные крошки, формы, ссылки, отступы, фон, декоративные псевдоэлементы (например, полосочки),

Набор кнопок с сайта UI Garage

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

Чтобы лучше понимать верстальщиков и сразу делать всё, как нужно, пройдите курсы по вёрстке Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «HTML и CSS. Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена на любой профессиональный курс станет ещё приятнее.

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

Источник