как передать макет в разработку — Дизайн на vc.ru
Чтобы все изображения и кнопки были на своих местах, анимации корректно работали, а шрифты на макете совпадали со шрифтами в интерфейсе, разработчику нужно больше, чем доступ к проекту в Figma. Мы в Friflex проектируем интерфейсы для миллионов пользователей, и, работая над проектами, очень внимательно следим, чтобы после программирования дизайн сохранял функциональность и внешний вид. В этой статье Светлана Моторкина, Head of Design, Friflex, опираясь на свой опыт, рассказывает, как подружить дизайнера и фронтендера и передать макет в разработку без потерь.
10 913 просмотров
Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после прикрутки к движку все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.
Важно понимать, что после передачи макета работа дизайнера не заканчивается.
Сегодня мы детально рассмотрим процесс от начала до конца. В этой статье я поделюсь своими советами, которые помогут сэкономить время и силы на просьбах от разработчиков что-то срочно нарезать или добавить промежуточное состояние экрана.
Шаг 1. Старт проекта
Перед любым новым проектом дизайнер часто задается вопросом: «Какие данные проекта есть на этом этапе и что нужно отрисовывать». После общения с менеджером и получения технического задания не всегда хватает информации о технических ограничениях. Поэтому желательно ознакомиться с возможностями API, выяснить, с какими наборами данных мы будем работать и что с ними можно сделать.
После ознакомления с документацией надо понять, с чего мы начинаем и какой экран нужно отдать в первую очередь. Для этого назначаются встречи с разработчиками, где можно обсудить планы проекта, этапы сдачи экранов и определить их приоритетность.
На встрече заранее согласуйте примерные гайдлайны с разработкой. Это поможет избежать возможных проблем со стилем текста, набором цветов, размерами иконок и т.д. Также не забудьте договориться о технических возможностях и сроках разработки, например, при проектировании сложных анимаций.
Шаг 2. Работа с макетами
Соблюдение структуры
Для простой и удобной навигации в любом проекте должна быть выстроена понятная структура. Называйте страницы и фреймы осмысленно.
Это позволит коллегам понять логику макета и начать быстрее ориентироваться в структуре.
Используйте Changelog (журнал изменений) – фрейм, который содержит поддерживаемый, упорядоченный в хронологическом порядке список изменений для каждой версии проекта. Так разработчик всегда будет в курсе всех изменений.
Компоненты
Компоненты спасают дизайнера от рутины. Задав вид компонента один раз, его автоматически измененные копии можно использовать в разных частях проекта.
Описание компонента
При описании каждого из компонентов попробуйте поставить себя на место разработчика, которому предстоит взять макет в работу.
Создавайте док-фрейм для каждого компонента, в котором будет:
- Описание компонента.
Детально продумайте и опишите свой компонент, например, все виды и размеры компонента, возможные конфигурации, максимальную и минимальную ширину компонента и т. д.
Создавая компонент, закладывайте все состояния заранее. Все возможные загрузки, активное и неактивное состояние / при наведении / нажатии в пустом и заполненном виде / ошибки и т. д.
Лайфхак: ознакомиться с примером описания для компонента «Button» можно на сайте Carbon Design System.
Адаптивность и сетки
Адаптивность
Адаптивность – способность макета подстраиваться под разный формат разрешения экрана.
Возьмите за правило отрисовывать несколько вариантов макетов под адаптив для разных устройств. Достаточно три – четыре версии (Например для веб: от 1280 – ∞, 1024, 768, 320).
Не забывайте отрисовывать макеты под минимальный размер, либо всегда проверять или закладывать размер на экранах 320px.
Показывайте отзывчивость с помощью Constraints в Figma, т.е. привязки. Если вы рисуете четыре макета, то для каждого из них обязательно нужно прописывать constraints.
Лайфхак: при отрисовке адаптива нужно учитывать Landscape (горизонтальное положение) состояние. Особенно если использование вашего продукта это предусматривает. Актуально для карт, навигаторов, воспроизведения видео.
Сетка
Для того чтобы между дизайнером и разработчиком не было разногласий по поводу отступов и расстояний, используется сетка. Сетка помогает правильно организовать элементы.
Для мобильных устройств обычно используется 4px или 8px сетка.
В результате любой элемент макета кроме линий всегда имеет размер, кратный четырем или восьми.
Это автоматически снимает все вопросы по случайным смещениям, дробным пикселям и т.п.
Для веба используется известная сетка Boostrap.
Существует два вида сетки:
- Фиксированая сетка – сетка, в которой колонки зафиксированы по ширине.
- Резиновая сетка – сетка, в которой колонки меняют свою ширину в зависимости от размера устройства.
Лайфхак: добавляйте в стиль созданные колонки/сетки. Чтобы применить колонки к монтажной области, достаточно ее выделить и выбрать на панели «Design» в разделе «Layout Grid» соответствующий разрешению макета стиль. Включить/выключить отображение колонок и сетки: Ctrl + G (для Mac),
Ctrl + Shift + 4» (для Windows).
Карты экранов
Карта экранов показывает весь User Flow, не давая разработчику запутаться в архитектуре продукта. С картой экранов будет понятна логика переходов и взаимодействие с интерфейсом для конкретных кейсов.
Лайфхак: не обязательно рисовать пути вручную, для этого есть множество плагинов.
Заметки разработчику
Оставляйте заметки разработчику. Такие, как описание действия компонента при нажатии на него. Выберите Master Component, нажмите на иконку настройки и в появившемся окне Documentation (документация) введите текст в поле «How to use this component». Текст отобразится в виде комментария в CCS.
Перед сдачей макетов в разработку уберите все лишнее: наброски, варианты макета, референсы. Но не удаляйте наработки и макеты, которые потеряли актуальность. Они могут пригодиться для следующих работ. Соберите их в отдельную страницу проекта. Для удобства можно использовать плагин Archiver.
Автоматически упорядочивайте и очищайте документ Figma с помощью плагина Clean Document. Он позволяет удалять скрытые слои, разгруппировывать однослойные группы и т.д.
Шаг 3 Передача в разработку
Статус готовности и версионность
Если вы передаете макеты в разработку и параллельно ведете работу, не забывайте указывать, какие макеты уже готовы.
Есть несколько способов явно обозначить статус готовности:
- Делить на отдельные пейджи. Разбивайте макеты на вкладки по готовности: готово для разработки / в процессе.
- Указывать статус в самом макете. Маркируем статусы на каждой группе или на каждом макете.
Если в макетах происходят глобальные изменения, например, была изменена структура раздела на сайте, то старайтесь делить макет на версионность, т.е. создавайте новую версию на каждый новый пейдж.
Незначительные изменения, например, смену вида иконки в интерфейсе, можно фиксировать для разработчиков в Changelog (журнал изменений).
Прототипирование
Разработчик не всегда понимает, какой элемент с чем и как должен взаимодействовать в интерфейсе. Для этого нужно прототипирование. Переходы и простые прототипы можно собирать в Figma. Для более сложной анимации вам потребуются дополнительные инструменты: Principle, After Effects и т.д.
Лайфхак: если у вас не хватает навыков сложной анимации, прикрепляйте референсы анимации в виде скринов и ссылок.
Помните, что любая сложная анимация может как сделать ваш интерфейс привлекательным, так и сильно замедлить его.
Графические ассеты и шрифты
Разработчики могут обратиться с просьбой выгрузить графику для каждой платформы в своем формате. Чтобы не тратить на это время, можно сделать выгрузку автоматически с помощью плагина Export Presets. Плагин помогает формировать в один клик ассеты в нужном формате, включая пресеты по умолчанию для самых популярных платформ.
При использовании нестандартных шрифтов в макете, не забывайте прикладывать архив или давать ссылку на скачивание.
Анализ объема работ и общение с разработчиком
После подготовки макетов оцените, на сколько большой объем работы в итоге получился. Разбейте макет на несколько задач, созвонитесь с разработчиком и обсудите план работ. После чего передавайте все макеты в разработку.
Если вы не работайте в Figma, а используете Sketch, можно передавать макеты в Zeplin.
Шаг 4 Дизайн-ревью
На стадии дизайн-ревью задача дизайнера состоит в том, чтобы сверять дизайн- макеты и логику работы.
Фидбек от разработчиков
На этапе ревью могут всплыть дополнительные нюансы, которые не были учтены в работе: забыли показать все состояния стейтов, шрифт на экранах плохо читаем, на дизайне контраст. Работайте с фидбеком от разработчиков. Они имеют опыт и навыки программирования и могут посоветовать, как и где упростить интерфейс, сократить шаги/клики пользователя.
Лайфхак: используете комментарии в Figma как дополнительный инструмент для коммуникации. Участники могут читать, добавлять упоминания и оставлять комментарии к файлу без ограничений.
Правки
Практически невозможно сделать все идеально! Не затягивайте и пишите правки с момента получения первой сборки. Сверяйте все на разных размерах устройств, платформ. Чем раньше вы начнете проверять, тем меньше ошибок уйдет в прод.
Лайфхак: возьмите скриншот сборки экрана и приложите рядом со своим макетом. Зафиксируете рядом с экранами правки и отправьте на доработку.
После того, как разработчик внес все правки, задача переходит на QA.
Надеюсь, этот гайд поможет вам научиться передавать макеты в разработку быстро и без потерь, а также позволит сэкономить силы и время на доработках. А если вы хотите узнать, как ускорить процесс разработки в крупных проектах, читайте нашу статью про дизайн-систему от Ильи Лесова.
Дизайн макетов сайта обзор, сравнение, лучшие продукты, внедрения, поставщики.
Дизайн-макет сайта – это визуальный образ будущего сайта, разработанный с учетом технических возможностей HTML верстки. Такой макет является демонстрацией того, как визуально будет выглядеть ваш сайт после верстки и наполнения.
Макет представляется в виде картинки, которая будет отображена в интернет браузере, без активных кнопок и других динамических элементов.
Специфика разработки графического дизайн-макета применительно к сайту представляет из себя сочетание технических и визуальных параметров будущего сайта. Это проработка расположения и размера элементов сайта с точки зрения удобства поиска и использования информации на сайте.
Основой для разработки дизайн-макета сайта являются предоставленные заказчиком материалы: логотип, слоган, фирменные (или предпочтительные) цвета, графические элементы, фотографии и другие элементы дизайна, а также заполненная клиентом анкета.
Макеты играют жизненно важную роль в процессе веб-дизайна для бизнеса. Это потому, что это позволит владельцам предварительно просмотреть дизайн своего веб-сайта до того, как он достигнет финальной стадии. Если вы хотите использовать макеты при разработке своего бизнес-сайта, найм услуг по дизайну макета является лучшим и наиболее доступным вариантом.
- Продукты
- Сравнение
- Поставщики
- Производители
- FAQ
- Материалы
Наиболее популярные продукты категории Дизайн макетов сайта Все продукты категории
IMMWIT WEBSITE MOCKUP DESIGN
IMMWIT
Поставщики Дизайн макетов сайта
Производители Дизайн макетов сайта
F.
A.Q.
Дизайн макетов сайтаЧто такое макет сайта?
В мире веб-дизайна макет веб-сайта — это высококачественный симулятор того, как будет выглядеть веб-сайт. Макеты веб-сайтов объединяют структуру и логику каркаса, но с изображениями, графикой и элементами пользовательского интерфейса, которые будут иметь конечный продукт.
Однако, хоть макеты веб-сайтов и не включают переходы и используемые функции, которые вы увидите в прототипе и в конечном продукте, они обычно включают базовую навигацию и взаимодействия. Проще говоря, макеты помогают нам определить:
- Информационную архитектуру: как вы организуете информацию вашего сайта логически и иерархически
- Поток пользователей: как пользователь будет взаимодействовать с вашим сайтом и навигацией UX
- Визуальную иерархию и макет: как все элементы отображаются на ваших веб-страницах, их размер и положение относительно друг друга и расстояние между ними
- Цвет: почти всегда содержит цветовую схему, которую вы будете использовать в конечном продукте
- Типографию: содержит точные типы шрифтов, размеры и жирность, которые будут иметь ваш конечный продукт
- Изображения: используйте SVG и высококачественные изображения, которые точно соответствуют тем, которые вы включите в свой конечный продукт
Короче говоря, макеты веб-сайтов помогут вам определить все важные факторы вашего продукта, чтобы обеспечить наилучший возможный UX до начала дорогостоящего программирования.
Вы уверены что хотите удалить ?
Да
Нет
Макеты, темы, шаблоны и загружаемые графические элементы на Dribbble
Просмотр макетов
Макеты
Посмотреть макеты
Макеты
Посмотреть архив макетов
Архив макетов
Посмотреть макеты веб-сайтов
Макеты веб-сайтов
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Посмотреть макеты для мобильных устройств
Мобильные макеты
Посмотреть архив макетов
Архив макетов
Посмотреть макеты
Макеты
Посмотреть макет сайта
Макет сайта
Посмотреть архив макетов
Архив макетов
Посмотреть годовой отчет Monetone
Годовой отчет Monetone
Посмотреть макеты фигур Voume
Раскладки Voume Shapes
Посмотреть архив макетов
Архив макетов
Просмотр баланса — макеты и тип
Баланс — макеты и тип
Просмотр макетов презентаций
Макет презентации
Посмотреть макеты
Макеты
Посмотреть макеты
Макеты
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Современные макеты, темы, шаблоны и загружаемые графические элементы на Dribbble
View Circular — Целевая страница маркетингового агентства
Циркуляр — Целевая страница маркетингового агентства
Посмотреть редакционную типографику Исследование
Редакционная типография Исследование
Посмотреть исследование дизайна магазина Frankie Shop
Исследование дизайна магазина Фрэнки
Посмотреть презентацию черно-белой фотографии
Презентация черно-белой фотографии
Посмотреть креативный ребрендинг Kady
Ребрендинг Kady Creative
Посмотреть модный редакционный макет Исследование
Fashion Editorial Layout Exploration
Посмотреть концепцию архива Attico
Концепция архива Attico
Посмотреть торговую площадку NFT — NT11121714
Торговая площадка NFT — NT11121714
Посмотреть мобильную презентацию черно-белой фотографии
Мобильная презентация черно-белой фотографии
Просмотр LJB.
