верстка макета что это
Что такое верстка?
Вы знаете, как в старину создавали ваш макет для печати?
Чтобы заказать макет, вам пришлось бы прийти в мастерскую. Открыв деревянную дверь, вы вошли бы в небольшое помещение пропахшее деревом. И увидели, как мастер вручную, точными и выверенными движениями, создающими иллюзию простоты, вырезает на деревянной пластине макет вашей страницы.
И поверьте, у вас даже не возникло бы желание отвлечь или поторопить мастера. Потому что если он ошибется, всю работу ему придется начать с самого начала.
Сейчас все стало проще. Все изменилось (неизменными остаются только глубокие знания и профессионализм мастера работающего над вашим макетом). Компания Apple впервые изобрела настольную издательскую систему. Компания Adobe написала программы для обработки графической и текстовой информации.
Верстка макета выполняется в правильно освещенном офисном помещении. Специалист по верстке делает ваш макет за обычным рабочим столом, на котором установлены два монитора (один большой для изображения, а второй поменьше для меню программы). Любую ошибку можно исправить в течение нескольких секунд (ничего не придется начинать с самого начала).
Для согласования макета вам не нужно никуда идти. Макет сам придет к вам в виде файла на вашу электронную почту.
Верстка в полиграфии
Верстка — это создание макета полиграфического издания.
Верстка — общее название, объединяющее в себе много направлений. Как и лес, когда мы его видим из далека. Но когда приближаемся поближе, ощущаем его чарующий воздух. Видим, что он состоит из множества различных деревьев (больших и маленьких), собранных природой вместе на ограниченном пространстве.
Если рассмотреть верстку более детально, вы увидите, что верстка специализируется на создании макетов для различной полиграфической продукции.
Например, при верстке каталогов макет создается из фотографий, текстов, элементов навигации, облегчающих быстрый поиск необходимой информации.
Когда идет работа над годовым отчетом, в макете размещается большое количество таблиц, графиков, диаграмм и текста.
Медицинский справочник создается совершенно по другом. Он не похож на годовой отчет или каталог. В нем много специально созданных графических иллюстраций, помогающих понять, о чем говорится в тексте, химических формул и таблиц.
Информация в медицинском справочнике выстроена так, чтобы врачи, фармацевты и другие специалисты могли быстро найти нужную информацию, и им было удобно работать с ней.
Вы видите, что у каждого направления верстки есть свои особенности и своя специфика.
Где расположен этап верстки в технологическом процессе?
Материалы передают на верстку после того, как улеглись страсти по выбору главной идеи создаваемого полиграфического издания.
Завершились все споры, какие материалы войдут в макет, а какие нет. Вы согласовали дизайн обложки, цветовую гамму макета и дизайн внутреннего разворота издания.
Отобраны все фотографии. Нарисованы все графические иллюстрации. Написаны, проверены и отредактированы тексты. Составлен план макета в электронной таблице (или в текстовом файле).
Все готово, можно приступить к верстке — созданию макета будущего издания.
Есть ли место творчеству при версте макета?
Специалист по верстке — это технический специалист, который работает по предоставленному ему плану в соответствии с утвержденным вами дизайном.
На верстке не работают с дизайном. Невозможно попросить специалиста по верстке добавить куда-нибудь еще один элемент, изменить композицию или добавить еще одну фотографию.
Работа специалиста по верстке очень похожа на работу токаря. В начале рабочего дня токарь получает задание (какую деталь ему нужно изготовить), заготовку, необходимые инструменты (например резцы), чертеж и технологическую карту.
Токарь не может выдумать новую деталь. С помощью его творчества, знаний и опыта он превращает обычный кусок металла в высокоточное изделие. Изделие созданное в строгом соответствии с чертежом и параметрами точности изготовления.
Никто не вмешивается в процесс изготовления детали. В этом процессе и проявляется творчество мастера. Он знает, какие приемы нужно применить. Какие моменты обязательно учесть. На каких режимах изготавливать различные элементы детали.
Аналогично специалист по верстке создает макет в строгом соответствии с планом и утвержденным дизайном. В плане четко указаны, какие элементы должны быть размещены на каждой странице издания.
Дизайн внутреннего разворота задает общее графическое оформление страниц.
Творчество специалиста по верстке проявляется в правильном размещении всех элементов в макете и установке для них необходимых параметров в программе.
Это очень важно. Потому что после завершения верстки макет перейдет на стадию допечатной подготовки (pre press). На стадии допечатной подготовки сверстанный макет будет подготовлен к печати в соответствии с требованиями выбранной вами типографии.
В чем особенность этапа верстки?
Подойдя к этапу верстки, вы точно знаете, сколько времени у вас осталось до даты отгрузки вашей полиграфической продукции.
Дата отгрузки полиграфической продукции (в большинстве случаев) согласована заранее. Полиграфическую продукцию выпускают для представления на мероприятии (совете директоров, выставке, годовом собрании акционеров) и т.д.
Дату мероприятия изменить нельзя.
Время печати полиграфической продукции определятся типографией.
Типография (полиграфическое производство) — это выстроенный технологический процесс. Последовательность операций производства задана главным технологом.
Время прохождения технологических операций известна. Время каждой технологической операции зависит от физических величин (например, от времени полного высыхания краски на бумаге).
Никто не может приказать краске высохнуть за пять минут, если для закрепления на бумаге ей необходимо несколько часов. Краска нас не послушает.
Если мы нарушим технологию, то испортим нашу продукцию. И все придется повторить еще раз. Повторная печать приведет к потери времени и денег (бумагу и другие расходные материалы придется приобрести повторно).
Подойдя к процессу верстки, вы точно знаете сколько осталось времени до начала мероприятия. За это время необходимо выполнить верстку, подготовить макет к печати, отпечатать и доставить готовую продукцию на мероприятие. С этим уже ничего сделать невозможно.
Из полученного временного отрезка вы вычитаете время печати.
Потому что время печати сократить не получится. Можно сократить время ожидания до начала производства вашего заказа. Но ускорить процесс полиграфического производства основанного на физических принципах, к сожалению, не получится.
Стало известно сколько времени осталось на верстку. За это время нужно успеть сверстать макет и подготовить его к печати, чтобы получить полиграфическую продукцию вовремя.
Сколько времени есть на верстку?
Каждый проект индивидуальный. Ваш проект отличается от любого другого. Поэтому мы подходим индивидуально к каждой работе, находим то единственное решение, которое подойдет вам именно для сейчас.
На верстку полиграфической продукции у вас может быть от нескольких часов до нескольких месяцев (если вы все делаете заранее, не спешите и никуда не торопитесь).
Можно ли ускорить процесс верстки без потери качества?
Да, можно! Скорость выполнения верстки можно изменять. Можно сделать макет как за несколько дней, так и за несколько часов без потери качества.
Здесь нет никакой магии и волшебства. Все зависит от организации процесса верстки и количества специалистов работающих над вашим Проверено правописание первой тысячи слов макетом одновременно.
Если у вас большой запас по времени, вы никуда не торопитесь, то скорость работы может быть минимальной.
Над вашим макетом будет работать один специалист. Заказу будет присвоен минимальный приоритет (это будет похоже на электричку, которая идет до пункта назначения со всеми промежуточными остановками). Ваша работа будет пропускать вперед срочные и обычные заказы, но при этом ежедневно будет продвигаться к завершению и гарантированно выполнена точно в установленный срок.
Если запас времени небольшой (пять семь рабочих дней) на верстку макета. Заказу будет присвоен обычный приоритет. Он будет пропускать вперед только срочные заказы. Им будет заниматься один специалист.
На полиграфическом производстве может быть большая загрузка (в полиграфии есть сезонное увеличение загрузки, например, перед приближением нового года) и срок печати увеличится. Времени на верстку станет меньше. Для сокращения сроков верстки специалисту придется задерживаться после окончания рабочего дня и поработать над вашим макетом в выходные дни.
Если времени на верстку осталось совсем мало (от нескольких часов до нескольких дней), одному специалисту с такой задачей не справится при всем желании.
Заказу будет присвоен высший приоритет. Ваш заказ будут пропускать все заказы (кроме таких же срочных). И над его выполнением будет работать собранная команда специалистов.
Макет будет разделен на части. Каждый специалист будет работать со своим фрагментом макета.
Не переживайте. Разделение работы на части не окажет негативного влияния на качестве сверстанного макета.
Можете быть уверены, что все отдельные части будут собраны в единое целое так, что никто и никогда не поймет (после окончательной сборки), что над макетом работала группа специалистов по верстке одновременно.
Одновременная работа над разными частями макета ускоряет процесс верстки.
Количество специалистов по верстке, одновременно работающим над макетом, определяется наличием времени и сложностью создаваемого макета.
Чем больше частей будет в макете, тем больше специалистов будут работать одновременно. К нужному времени подготовленный к печати макет гарантированно будет направлен вам на согласование.
Почему у вас не получится сдать материалы на верстку и забыть о процессе верстки?
В процессе верстки макета всегда возникают вопросы. Нужно уточнить какие-то детали. Например, принять решение о фотографии, качество которой не соответствует минимальным техническим требованиям для печати. Происходит постоянный процесс общения между специалистами по верстке и представителем заказчика.
Что происходит после того, как у специалиста по верстке возникает вопрос?
Когда у специалиста по верстке возникает вопрос, он приостанавливает выполнение данной операции. Пишет письмо представителю заказчика. И при возможности, переходит в выполнению над другими страницами макета.
Когда вы никуда не торопитесь, времени достаточно. Можно подождать пока придет ответ.
Но когда до окончания работы остаются считанные часы, ситуация в корне меняется.
Чтобы все успеть, работы выполняются в вечернее и ночное время. Включая выходные дни. Мы помним что дату начала мероприятия перенести нельзя, ускорить печать невозможно. Мы можем управлять только временем создания макета.
Что произойдет, когда сложности начинаются в пятницу вечером (а так бывает чаще всего). Или поздним вечером или даже ночью.
Моментально специалист по верстке сформулирует трудность. Напишет вам (или назначенному вами ответственному за проект) свой вопрос. Приостановит данную работу и будет ждать ответа.
Если вопрос пришел в пятницу вечером, перед самым окончанием рабочего дня (такое случается очень часто), а ответ на него придет утром в понедельник.
Потеряно два дня работы (суббота и воскресенье). За это время должно быть сделано очень много. И не факт, что в понедельник эту потерю времени можно будет наверстать без увеличения количества специалистов, работающих над макетом.
Вы не сможете забыть о работе по подготовке вашего макета.
Вам нужно будет быть постоянно на связи или назначить ответственного, который будет на связи двадцать четыре часа в сутки. Оперативно отвечать на все вопросы и решать все трудности, которые встретятся на пути верстки макета.
Как формируется цена на верстку макета?
Как вы видите, работа по верстке макета может быть организована различными способами. Но при любом варианте вы гарантированно получите вовремя качественный макет.
Минимальная стоимость макета возможна при работе одного специалиста в обычном рабочем режиме с девяти до восемнадцати часов с часовым перерывом на обед.
Если работу нужно ускорить, специалисту нужно задержаться на работе после ее окончания и выйти поработать в выходные дни. Это отразится на стоимости. Стоимость будет выше. Никто не захочет просто так задерживаться и провести выходные на работе.
В критической ситуации, когда над макетом работает группа специалистов, работа организована в круглосуточном режиме, включая выходные дни. Стоимость будет еще больше. Потому что каждому специалисту необходимо оплатить выполненную работу.
Каждый проект уникальный. В каждом заказе есть свои особенности.
После того, как будут определены все детали по организации работы, будет понятна сложность создаваемого макета и его дизайн. Мы увидим, в каком виде будет предоставлен материал. Будет известен срок, за который необходимо сделать макет и подготовить его к печати. Возможно, подойти к вопросу стоимости его изготовления.
Хватит это верстать, ударим автоматизацией по макетам
А Вас не посещала мысль, что вёрстка руками — это долго, дорого, избыточно и устарело?
Меня вот постоянно. В данной статье я поверхностно затрону текущее состояние индустрии, проблематики и поделюсь результатами своих исследований.
Интересно? Добро пожаловать под кат!
Перед началом
Если хочется сразу «пощупать», вот проверка концепции.
Она демонстрирует общие моменты, ряд аспектов модели и крайних случаев остались за пределами реализации, что сказалось на качестве, но я считаю, что общий концепт проверен, подробнее ниже.
Термины
В тексте я использую термин «Верстка» в 2‑х значениях:
Введение
А так же мы имеем и вовсе космические исследования этой темы при помощи нейронок, а ля pix2code или sketch2code.
Но к моему сожалению, я так и не смог найти инструмент, который можно органично ввести в процесс разработки.
А чего же хочется? Хочется получить макет у дизайнера, добавить логики, разбить на компоненты, поправить вёрстку, там где нужно, получить библиотеку компонентов и вернуть это всё дизайнеру для будущего взаимодействия. Понимаю, это превосходит даже самые передовые возможности индустрии, но такова моя мечта.
Как говорит Джейм Стетхем Конфуций, большая дорога начинается с первого шага, вот и я раздобыв немного время, решил понять, с чего же начать. Об этом и будет данная статья.
Проблематика
Тут нужно сразу обговорить разницу между вёрсткой и интерфейсом:
Вёрстка — это полуфабрикат, грубо говоря, результат конвертации графического формата в HTML, CSS и другие файлы, предназначенный для дальнейшего преобразования в интерфейс.
Интерфейс — полноценный артефакт системы, с которым будут взаимодействовать пользователи.
На 2020 год ручная вёрстка всё ещё является основным способом создания web интерфейсов, что довольно любопытно само по себе. Это идёт вразрез трендам параллельных стеков, таких как нативные и десктоп приложения, где визуальные инструменты дизайна интерфейсов являются стандартом их создания.
Можно долго рассуждать почему это так, но как я считаю, главные выводы — это высокие требования к конечной верстке и необходимость низкоуровневого контроля, «лобби верстальщиков» предлагаю оставить за скобками.
Вёрстка сложна, требует применения специальных методик и инструментов для управления, минимизации ошибок и поддержки в актуальном состоянии.
Отдельный вопрос — это анимации, так создание анимации является для многих проектов вовсе непосильной задачей в плане ресурсоемкости.
Верстка это дорого, в среднем это от 25% стоимости всей системы для SPA и до 75% для посадочных страниц.
Не существует общепринятой теории вёрстки как таковой.
Стандарт W3C очень широкий и каждый верстальщик / команда руководствуется своими собственными правилами и стандартами, которые попадают в рамки валидной разметки.
Решение
Для начала нужно формализовать процесс вёрстки, определить сущности, алгоритм и правила. Конечно сама тема довольно обширная, и её полное раскрытие не является темой данной статьи. Исходя из этого, рассмотрим только интересную в данный момент часть.
Шаблон
Шаг 1
Визуально разделим на высокоуровневое дерево блоков.
Найдём строки и колонки макета
Шаг 2
Семантический анализ, определим основные блоки:
Тут мы сразу сталкиваемся с интересным явлением, простого макета не всегда достаточно для построения полноценной структуры, так проектировщик интерфейса должен уточнить поведение блоков. Что наталкивает на мысль, что семантического анализа тоже не всегда достаточно.
И пока нам этого достаточно. Тут мы можем разделить нашу задачу на две большие группы:
Отложим семантическую группу для будущих исследований и сосредоточимся на технической.
Несмотря на то, что вёрстка по картинке нейронной сетью задача очень интересная, по моему мнению, она избыточна.
Сложно себе представить ситуацию, когда при нормальном рабочем процессе верстальщику придёт макет в формате растрового изображения.
Чаще всего это форматы, созданные в таких инструментах как Figma, Sketch или Adobe Photoshop, которые в себе уже содержат практически исчерпывающую информации о макете, самое главное:
Получение HTML документа на основе данной информации является уже решенной проблемой, так инженеры из Figma уже поделились своей реализацией конвертации и результатами исследования, а такие сервисы как Anima прямо построены на синхронизации макетов и интерфейса.
Но почему же подобные решения не привели к эффекту разорвавшейся бомбы и спустя 2 года нет ничего лучше старой доброй ручной вёрстки?
Тут я повторюсь, моё мнение, причина этого два фактора:
Контроль, несомненно, нужная вещь, но без удовлетворения первого требования, не особо имеющая смысл. Проще будет реализовать сразу качественную вёрстку и управлять ей, чем пытаться исправить некачественную.
Таким образом, первостепенным является первое требование. Но что же делает код качественным? Если убрать за скобки официальные показатели качества как LTR, Accessibility и подобное, мы останемся с важными показателями качества для разработчиков:
Таким образом главной задачей для автоматизации и будет соответствие этим критериям.
Попробуем же доказать, что это возможно, построив дерево блоков. Для этого нам нужно, опять же, формализовать процесс и ввести необходимые понятия, оставив ряд крайних случаев для будущих исследований.
Строки и столбцы
Строки
Если позиция одного элемента попадает в отрезок высоты другого, то они образуют одну строку.
Столбцы
Аналогично, если позиция одного элемента попадает в отрезок ширины другого, то они образуют одну колонку.
Отношения элементов
Независимое расположение
Элементы позиционируются относительно друг друга, опираясь на поток.
Дерево достраивается при необходимости.
Расположение с перекрытием
Перекрывающие элементы вырываются из потока, позиционируются абсолютно, не влияют на позиционирование других элементов.
Процесс построения дерева блоков
Шаг 1
Определим все строки.
Шаг 2
Находим отступы у каждой строки.
Шаг 3
Выбираем строку для проработки и определяем тип разметки:
Шаг 4
Для многоколоночной, определяем тип колонок:
В зависимости от типа, формируем отступы между колонками.
Шаг 5
Определяем тип колонки по количеству элементов в ней:
Если тип единичный, позиционируем элемент относительно колонки, переходим к следующему.
Шаг 6
Для типа колонки «множественная» находим все строки
Типы строк аналогичны типам колонок:
Находим отступы.
Повторяем весь алгоритм пока есть хоть один необработанный блок.
И теперь реализуем полученные утверждения в код.
Упрощение:
Увидеть и «пощупать» доказательство концепции можно по ссылке.
Вывод
Автоматизация качественной вёрстки возможна без привлечения слабо контролируемых алгоритмов машинного обучения. Это позволит значительно сократить расходы на создание продуктов и увеличить их качество. Не маловажно и то, что это упростит работу разработчикам и сделает её более интуитивной и приятной.
Но необходимы дальнейшие исследования, а сама проблема требует более пристального внимания сообщества для реализации полнофункциональной модели и инструментов, основанных на ней.
Что дальше?
Считаю следующий важный этап — это подтверждение концепции контролируемости автоматической разметки. Главным фактором тут будет являться обратное преобразования кода в макет, так, чтобы при изменении разметки обновлялся и он — создание двусторонней связи между инструментом дизайна и разметкой.
Буду рад конструктивной критике и такой же дискуссии. Всем мир!
Вёрстка простого макета
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.
Настройка рабочего пространства в программе Adobe Photoshop
Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:
Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:
Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:
Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:
Теперь все готово, можно начинать верстать макет.