Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>29 авг 2022</li>

3 <li>0</li>

4 </ul>Что и зачем нужно сделать дизайнеру, чтобы его картинки превратились в качественный продукт.

5 Иллюстрация: Merry Mary для Skillbox Media

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

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

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

9 <ul><li>появились лишние отступы,</li>

10 <li>пропали элементы,</li>

11 <li>текст выходит за рамки контентной области.</li>

12 </ul>Часто это происходит из-за того, что дизайнер плохо подготовил макет для вёрстки и разработчик его не понял. В нашем материале - инструкция, как этого избежать и сэкономить время себе и команде.

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

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

15 Илья Бирман,<a>арт-директор</a>

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

17 А ещё стоит сразу предупредить разработчиков, в каком формате вы будете передавать файлы.

18 Разработчики делают сайты на CSS и HTML - они считают все изображения и расстояния в пикселях. Пиксель по умолчанию не может быть дробным, поэтому кегль или отступ с размером 27,789 пикселя внедрить очень трудно.

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

20 Изображение: Skillbox MediaКажется, что если текстовый блок гораздо больше, чем нужно, то ничего страшного не произойдёт - там же всё равно нет текста. На самом деле для разработчика это знак - ограничители текста должны быть именно такими, потому что дизайнер что-то там придумал. Из-за этого итоговая вёрстка может превратиться в кашу. Поэтому следите, чтобы у текста всегда была включена настройка автоматического выравнивания по высоте .

21 Изображение: Skillbox MediaЕщё одно свойство текста - он может быть бесконечно длинным. Если вы это не учитываете, то готовьтесь, что итоговая вёрстка будет постоянно ломаться.

22 Изображение: Skillbox MediaТакже старайтесь делать модули - если они на одном и том же информационном уровне, то они должны быть одинаковыми. А "почти одинаковых" модулей должно быть как можно меньше, чтобы разработчики быстрее и чище превратили ваши картинки в продукт.

23 Изображение: Skillbox MediaЧтобы не перенагружаться с выравниванием всего со всем, используйте Auto Layout. Он автоматически подстроит все модули внутри себя по заданным значениям.

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

25 <ul><li>удалите скрытые слои и лишние стили,</li>

26 <li>разблокируйте все слои,</li>

27 <li>дайте всем объектам осмысленные названия.</li>

28 </ul>Изображение: Skillbox MediaЧтобы сэкономить на этом время, пользуйтесь плагинами:

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

30 Ещё одна важная вещь - связь экранов друг с другом. Чтобы система работала так, как вы задумали, разработчик должен понимать, что будет, если пользователь нажмёт на одну из кнопок внутри экрана. Эту связь можно показать с помощью стрелок:

31 Изображение: Skillbox MediaСостояния элементов интерфейса лучше всего демонстрировать вариативными компонентами. А для указания связей лучше подойдёт<a>плагин Autoflow</a>.

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

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

34 Изображение: Skillbox MediaНе забывайте, что все состояния элементов можно показать интерактивными компонентами. А ещё хорошо, когда на странице со всеми элементами описаны стили: цвета, шрифты и иконки.

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

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

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

38 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>