- PVSM.RU - https://www.pvsm.ru -
Частая жалоба верстальщиков: «Они делают непонятный макет! Отступы пляшут, заголовки разных размеров и начертаний, элементы выпадают из сетки! Не хочу с ними работать”. Дизайнеры, в своё время, жалуются на то, что верстальщики портят макеты.
Эти жалобы взаимодополняемы. Если начать разбираться в корне проблемы, то виноватыми окажутся оба. Как помирить этих двух работников фронта?
Необходимо понять, что в большинстве случаев меняться нужно обоим.
Удивительно, как много людей, называющих себя „веб-дизайнерами“ игнорируют этот базовый элемент работы. Сетка задает строгую горизонтальную иерархию вашего макета. Большинство верстальщиков используют готовые сетки или делают свои, что даёт им высокую точность и скорость вёрстки.
Изучите принцип работы сетки, например Bootstrap [1].
Если вам сложно самому рассчитать размеры колонок, используйте специальный онлайн-калькулятор [2].
Возьмите на вооружение 10, 8 или 4-пиксельную сетку. В изучении 8px сетки отлично помогает изучение концепции Material Design и этой статьи [3].
Вам нет необходимости вникать в подробности Javascript, работы с npm, git, или препроцессорами. Вам необходимо освоить вёрстку для того, чтобы понять, что можно сделать, а что нет. Когда вы сами поймете, как создаётся вёрстка, вы сможете объективно оценить, насколько сложную задачу вы ставите перед верстальщиком, и, в случае чего, упростить её.
Очень часто происходит так, что дизайнер не показывает и даже не рассказывает верстальщику о ховер-эффектах (какими они будут при наведении или нажатии на объект). В таких случаях часто верстальщик делает ховер-эффект таким, каким он сам его видит у себя в голове.
Не заставляйте думать верстальщика за вас. Показать состояния объектов можно вот так:
Также можно перенести все объекты для ховера на отдельный лист, чтобы показать их состояния до и после.
Типизируйте все объекты на макете. Если это заголовок Open Sans 1.2em, то пусть он везде будет Open Sans 1.2em. Аналогично поступите с кнопками, абзацами, интерлиньяжем и отступами. Мы не говорим, что всё должно выглядеть одинаково — нет. Вы должны понимать, что чем больше у вас типизированных объектов, тем проще верстальщику с ними работать. Если вы хотите полностью сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
Об этом пункте не говорил разве что ленивый, но слишком уж часто верстальщику приходят макеты с хаотично накиданными слоями, название которых ни о чём не говорит. Переименуйте слои согласно их смыслу и сгруппируйте по типам. Вы можете использовать в названиях как БЭМ-синтаксис, так и общие термины вроде button, header, footer и так далее.
Соберите все иконки и изображения из вашего макета и разместите в папку проекта согласно смыслу. Например вот так: img/photos/photo1.jpg, img/icons/facebook.svg и так далее. Этот простой шаг поможет верстальщику гораздо быстрее и эффективнее работать с макетом при вставке графики.
Под Kit’ом я имею виду отдельный лист, в котором прописаны все типизированные элементы системы: например заголовки всех уровней и разновидностей, кнопки и их вариации, разделительные линии и так далее. Если вы ранее типизировали объекты, то вы легко можете перенести их в Kit на отдельный лист. Благодаря этому верстальщик может спокойно подготовить базу с помощью методологии БЭМ и собирать сайт словно кубики лего.
Если вы предоставляете на вёрстку статичный макет, постарайтесь оставить максимальное количество комментариев по тем элементам дизайна, по которым вопросы могут возникнуть. Не ленитесь. Потратьте время сразу, и избавьте себя от кучи вопросов на будущее. Большинство программ для создания интерфейсов позволяют делать это максимально удобным способом.
Очень важно оценить художественную работу дизайнера до начала вёрстки. Вы можете подумать, что тот или иной объект верстать будет сложно, но для начала осознайте, почему именно так поступил дизайнер, и будет ли картина такой же цельной, если убрать или изменить объект? Предложите дизайнеру свой вариант, и в большинстве случаев он объяснит вам, почему он использовал именно такое решение, и возможно ли его изменить или удалить без потерь для макета.
Чтобы лучше понимать работу дизайнера и оценить его труд по-настоящему, испытайте себя в его роли. Выберите любую понравившуюся вам программу для работы с графикой и нарисуйте один или несколько макетов, соблюдая все требования, которые вы предъявляете дизайнеру. Оцените свою работу как художник, и отдайте на суд людям в чатах, на форумах, друзьям и знакомым. Это даст вам лишний повод убедиться, что дизайнер не зря ест свой хлеб… Ну или то, что в вас всегда спал художник.
Очень часто рисуя по макету, верстальщики пренебрегают какими-то “мелочами” и не верстают их. Они считают, что дизайнер просто увлёкся, и нарисовал ненужные “красотульки”. Нет! Хороший дизайнер изучает продукт, для которого будет рисовать дизайн, продумывает элементы, композицию, размещает все на это макете и создаёт единую картину. Если у вас возникают какие-то сомнения относительно изменений в дизайне, обязательно согласуйте их с дизайнером.
Обсуждайте дизайн. Получив макет, оцените его (соблюдая первый пункт), и расскажите дизайнеру в каких местах и почему нужно внести правки. Что такое адаптивная сетка и для чего она конкретно нужна. Уточняйте спорные моменты: возможно, что дизайнер намеренно разрушил ритм композиции, а не просто допустил небрежность. Если у кнопки, ссылки или картинки нет ховер-эффекта, спросите, как он должен выглядеть или где он прорисован. Обязательно обговаривайте спорные моменты, тогда не только ваша работа, но и работа дизайнера улучшится.
Верстальщикам часто приходилось получать макеты в неудобных для вёрстки форматах, в которых достаточно проблематично посмотреть размеры, цвета, тени или отступы. Решите вместе с дизайнером, какой программой лучше пользоваться для обоих. Разнообразие программного обеспечение ны рынке легко позволяет это сделать. Уже сейчас в вопросе создания пользовательских интерфейсов у вас есть выбор между продуктами Adobe (например Adobe XD), Sketch, Figma или Framer (который буквально на днях выпустил в очередном релизе возможность создавать интерфейсы). Выберите что-то одно или несколько программ и поймите, как вы будете взаимодействовать.
Самое главное в работе двух работников фронта, это понять возможности друг друга и общаться. Как и в любых отношениях, здесь должна быть согласованность и налаженная коммуникация. Начните внедрять эти пункты по одному или же все сразу, и тогда работа принесёт вам искреннее удовольствие.
Над статьёй работали Григорий Мочалин и Илья Дзенски.
Автор: idzenski
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/257017
Ссылки в тексте:
[1] Bootstrap: https://v4-alpha.getbootstrap.com/layout/grid/
[2] онлайн-калькулятор: http://gridcalculator.dk/
[3] этой статьи: https://habrahabr.ru/company/everydaytools/blog/319700/
[4] Источник: https://habrahabr.ru/post/330144/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.