Передаем макет и верстку правильно
Сетка помогает правильно упорядочить элементы и задает ритм для всего макета. При передаче макета верстальщику не забудьте указать размера контейнера всего содержимого сайта. А если некоторые блоки имеют контейнер со своей шириной, то укажите его размер отдельно.
Расстояния
Старайтесь унифицировать все расстояния между блоками вашего макета. Это значительно упростит работу верстальщику, да и визуально ваш макет будет выглядеть более аккуратным.
Текстовые стили
Не поленитесь создать отдельную страницу, где будут указаны гарнитура, кегль, начертание и межстрочный интервал. Кроме того, не забудьте указать как они будут меняться на разных разрешениях экрана.
Адаптив
Не следует отдавать макет в разработку без отрисованных экранов мобильной версии, полагая, что верстальщик сам всё придумает и реализует. Это задача самого дизайнера и то, каким видит адаптив макета разработчик, может значительно отличаться от того, что будет удобно пользователям.
Состояния элементов
Проработайте состояния всех элементов. Возьмите, например, кнопку из макета и нарисуйте все её состояния: обычное, при ховере, при нажатии. Также тут можно указать все стили, которые присутствуют в макете.
Главное правило при работе над макетом – это внимание к деталям и упорядоченность. Не стоит делать что-то «на глаз» и тогда шансы на то, что финальный сайт будет похож на макет значительно повысятся.
На что ещё следует обратить внимание перед тем, как передавать макет верстальщику? Делитесь своим опытом в комментариях.
Сохраните этот пост, чтобы не потерять.
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
Регистрация и добавление нового макета
Чтобы начать пользоваться редактором, нужно зайти на https://www.figma.com/ и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.
Вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для знакомства с приложением. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch . При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.
После добавления макет появится в общем списке.
Структура макета и рабочие инструменты
Интерфейс в разделе работы с макетом состоит из нескольких блоков.
- Боковая панель. Здесь показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
- Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
- Основное меню в верхней части страницы. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
- Боковая панель справа включает три вкладки, но нам будут нужны только две из них — Design и Inspect, в которой расположены разделы Code и Local Styles. В этих вкладках находится вся доступная информация об элементе.
Работа с параметрами элементов
Основная задача верстальщика при работе с макетом — узнать параметры элементов и перенести их в вёрстку. Давайте разберём по пунктам, как это сделать в Figma.
Параметры текста
Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Inspect — Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.
Изображение
Свойства width и height во вкладке Inspect — Code расскажут о размере изображения.
Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF.
Цвет элемента
В разделе Code вкладки Inspect можно узнать фоновый цвет элемента — значение background .
Размеры и расстояние между элементами
Размер определяется несколькими способами.
Например, во вкладке Code можно посмотреть значения свойств width и height . Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между двумя любыми элементами. Для этого нужно выделить первый элемент, а затем наводить курсор на остальные — будет появляться направляющая и значение.
Figma — это удобный и простой инструмент для верстальщика, и мы предлагаем вам попробовать его в деле. Заходите в магазин макетов, выбирайте любой и практикуйтесь.
Пригодится верстальщику:
- Дизайн для верстальщиков
- Вёрстка для дизайнеров
- Топ-20 лучших плагинов для Figma в 2023
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как передать макет верстальщику из фигмы
Но лучше применять специальные программы, например Принцип. Если работаете в Виндоусе, присмотритесь к аналогу — Протопай.
Прикладывайте к макету шрифты и иконки
Во время работы собирайте все используемые шрифты, иконки и картинки в отдельную папку, чтобы потом отправить её разработчикам вместе с макетом. Растровые картинки должны быть в ретиновом размере — в два раза больше их размеров в макете.
Если используете шрифт с сервиса Гугль‑фонтс, дайте разработчику ссылку на него. В этом случае файл шрифта не понадобится, потому что на сайт его подключают через этот сервис.
Проведите презентацию
Важно провести презентацию макета до окончания работ по дизайну — возможно, вы придумали штуку, которую сложно, долго или вообще невозможно реализовывать. Так вы вовремя об этом узнаете и у вас будет время придумать другое решение.
Созвонитесь с разработчиками, включите презентацию экрана или расшарьте Фигму и проведите разработчиков по всем макетам. Пусть разработчики зададут вопросы и прокомментируют ваши решения в дизайне.
Дальнейшие изменения в макетах уже после начала разработки необязательно презентовать вживую. Их можно донести в переписке.
P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.
Как передавать макеты в разработку?
Время от времени некоторые мои коллеги-дизайнеры интересуются каким образом необходимо подготавливать макеты для передачи разработчикам. Я подготовил гайд, которы поможет им разобраться в этом вопросе.
В глобальном плане макеты не требуют какой-то особой подготовки если изначально они выполнены аккуратно и в удобном для работы приложении.
По состоянию на сегодняшний день, наиболее популярными приложениями для разработки дизайна интерфейсов является Figma. Этот редактор может работать на любой платформе и запускается через браузер практически на любом железе. Редактор дает возможность получать доступ к макету всем участникам команды в режиме онлайн, все изменения в проекте происходят в реальном времени, их сразу же видят все члены команды. Для передачи файлов Фигмы коллегам достаточно скопировать и переслать ссылку на макет хранящийся в облаке.
Таким образом, я рекомендую использовать для работы приложения хранящие макеты в облаке и поддерживающие возможность кооперативного редактирования макетов в реальном времени. Figma будет отличным выбором.
Мы обсудили как быть с приложениями для разработки дизайна интерфейсов, теперь можно обсудить правила которых стоит придерживаться при подготовке макетов.
1. Используйте базовую единицу и модульные системы для построения макетов
При построении системы отступов и сеток в макете стоит выбрать значение которому будут кратны настройки сеток и отступов. Если в качестве базовой единицы выбрать значение равное четырем — все отступы и размеры объектов в макете должны делиться без остатка на это значение. Отступы могут быть представлены значениями 4, 8, 12, 16 и т.д., а высота кнопок, к примеру, значениями 32, 40, 44, 48, 52 и т.д.
При построении сеток учитывайте, что бывает как минимум три типа устройств десктоп, планшет и мобилка. При построении сетки отталкивайтесь от минимальных размеров экранов, чтобы все помещалось. Например, для мобилки стоит отталкиваться от экрана 320рх, планшет — 768рх, десктоп — 1024рх. Макет может рисоваться под любой размер экрана, главное чтобы на указанных разрешениях он выглядел также корректно, как и на более крупных.
2. Используйте целые значения размеров элементов и отступов
Благодаря целым значениям макет будет аккуратнее, его рендер на экране также будет более качественным. При условной отрисовке обводки в 1,5px будет возникать размытие этой обводки на экранах с низкой плотностью точек. В случае с разношёрстными отступами да ещё и с дробными значениями разработчикам придется гадать какой отступ должен быть между однотипными элементами 32.7, 32.6 или все же 32px.
Для работы с целыми пикселями необходимо включить функцию Snap to Pixel Grid в меню Preferences.
Чтобы быстро избавиться от дробных значений в размерах, можно нажать на подпись слева от значений.
Также для пакетного устранения дробных значений отлично подходит плагин Pixel Perfect.
Запустить плагин можно через панель плагинов.
После чего нужно нажать кнопку «Run» и плагин, как по щучьему велению, уберет все дробные значения в выбранных фреймах.
3. Выстраивайте логичную систему отступов
В одинаковых элементах стоит использовать одинаковые отступы, между логическими блоками стоит использовать одинаковые отступы — так проще верстать макеты.
Для ускорения процесса расстановки одинаковых отступов можно воспользоваться опцией Фигмы — Auto layout. Эта опция группирует объекты в фрейм с равномерными отступами.
Для создания Auto layout необходимо выбрать фреймы, между которыми будут расставляться отступы, после чего следует нажать на клавиатуре комбинацию клавиш «Shift+A» либо нажать соответствующую кнопку на панели настроек.
После созданий лейаута можно будет настроить размер отступов введя необходимое значение в соответствующее поле.
Подробнее о том как работать с Авто лейаутами можно прочитать в официальном руководстве Фигмы.
4. Сохраняйте настройки текста, цвета и эффектов в стили
Сохранение настроек в стили позволяет организоваться порядок в стилях, выстроить понятную структуру, исключить возникновение в макете ошибок и новых переменных, упростить разработку.
Подробнее о том, как сохранять стили описано в мануале Фигмы.
5. Подписывайте слои и стили понятными именами
Для организации порядка в макетах подписывайте понятными названиями слои и стили в макетах. Это позволит говорить всем членам команды на одном языке. Также хорошей практикой является расположение стилей и слоев в логичной последовательности.
Слои (фреймы, компоненты) принято располагать в хронологической последовательности, стили текста от более крупного к менее крупному, цвета от менее насыщенных к более насыщенным.
В качестве примера построения иерархии текста можно использовать руководство Материал по работе с типографикой, построение иерархии цвета также хорошо описано в руководстве Материал по работе с цветом.
6. Создавайте Ui-kit
Создавайте наборы элементов интерфейса с возможными состояниями таких элементов. Очень рекомендую все элементы преобразовывать в компоненты, это позволит в будущем их переиспользовать, что снизит количество ошибок и увеличит скорость разработки макетов.
Как работать с компонентами просто и понятно проиллюстрировано в туториале Фигмы.
7. Задавайте корректные размеры текстовых фреймов
Показывайте в макетах реальный размер текстового фрейма, описывайте его поведение если заголовок не помещается по длине. Заголовок может уйти в эллипсы (в конце строки будет показано троеточие) или заголовок может перенестись на другую строку.
8. Оставляйте комментарии
Комментируйте свои решения с использованием инструмента Add comment, вызывается кнопкой «С», либо через настройки компонента. Комментирование компонента доступно на панели настроек (находится справа).
Если комментарий к компоненту добавить через правую панель — комментарий будет отображаться в инспекторе кода, в любой части макета.
9. Показывайте анимацию с помощью прототипов
Придумывая анимацию создавайте фреймы с раскадровкой, после анимируйте их с помощью инструмента Prototype. Проще один раз наглядно показать вашу задумку, чем десять раз объяснять и вносить корректировки в ходе разработки.
10. Передавайте разработчикам шрифты и иконки
Передайте разработчику ссылку на источник шрифта, выгрузите иконки и иллюстрации в SVG. Это ускорит процесс разработки и снизит количество дополнительных вопросов.
11. Проводите презентации и обсуждайте решения
Перед передачей решения на согласование с ЛПР стоит обсудить возможность его реализации с разработчиками. Наглядная демонстрация решения может упростить работу всем. Презентации можно оформлять в виде слайдов с комментариями, в формате звонков по видеосвязи, скринкастов, с помощью интерактивных прототипов с комментариями.
Если среди читателей присутствуют разработчики — буду благодарен за комментарии и дополнения к этому гайду.)