Верстальщик — кто это такой и почему от его работы зависит многое
В нашем блоге мы каждый раз стараемся раскрывать темы, которые помогут сделать процесс создания сайта еще более понятным для начинающих интернет предпринимателей.
Сегодня мы поговорим о верстальщике.
О том, почему верстальщик — это своего рода переводчик между дизайнером и программистом и почему без него нельзя обойтись любому качественному продукту — в нашем материале.
Верстка как следующий этап после дизайна
Представим, что вы обратились в веб студию за разработкой своего веб-сайта.
Обсудив все нюансы проекта с проджект-менеджером, вам нужно согласовать разработанный специалистом дизайн.
Ну, а после того, как все предложенные дизайнером работы сойдутся в один готовый пазл, который будет вас устраивать, мастера займутся…
Так-так, действительно, чем же они займутся?
И тут мы плавно переходим к верстке.
Что же такое эта верстка сайта?
По сути, макеты дизайна — это просто набор изображений, лежащих мертвым грузом, если их не «оживить». Процесс этого оживления и есть HTML верстка. Другими словами, этот перевод макета из графического редактора в браузер.
Верстка html-страниц — это вам не в пинг-понг играть. Это сложный, требующий внимания и терпения процесс, от которого зависит корректное отображение сайта на разных гаджетах, что в свою очередь влияет на ранжирование в поисковой выдаче.
Я не волшебник — я верстальщик
С работой верстальщика, как и с любым другим видом деятельности, связан целый ряд заблуждений:
- Это работа программиста
Скажем прямо: оставьте в покое программиста! У него итак хватает своей работы, и если этот специалист будет тратить свое время на другие задачи вы представляете, насколько затянутся сроки вашего проекта?
Да и вообще — это разная работа и точка.
На самом деле, это очередной миф. Хотя верстальщик работает с кодом, он должен хотя бы немного быть творческим человеком, так как ему частично приходится заниматься доработкой дизайна. И более того: поскольку специалист работает с кодом, помимо хорошего воображения, от него требуется терпение и усидчивость.
Цена на такие услуги ничуть не выше стоимости услуг программиста или другого веб-мастера.
Цена зависит от самого проекта, уровня подготовки специалиста и компании, которая предлагает услуги такого специалиста. Она просчитывается индивидуально, с учетом всех особенностей вашего ресурса.
Что должен уметь верстальщик
Быть верстальщиком — это быть Google переводчиком между дизайнером и программистом. Действительно, такой специалист должен понимать основы дизайна и композиции, а также разбираться в коде.
Разработчик берет то, что нарисовал дизайнер и переводит его на язык, понятный для программиста: описывает дизайнерский макет с помощью тегов таким образом, чтобы потом этот макет можно было представить в виде последовательности этих тегов.
В чем работает верстальщик?
- Графический редактор
Здесь специалист работает с графикой;
- Текстовый редактор
Используется для написания кода веб-страницы;
Необходим для того, чтобы проверить правильность отображения сверстанных страниц.
Главная задача хорошего специалиста — сделать так, чтобы пользователю было удобно работать с вашим сайтом, с какого бы устройства или гаджета он его не просматривал.
Поэтому существуют несколько видов верстки, которые решают все эти вопросы:
Она учитывает тот тип устройства, с которого будут сидеть посетители вашего сайта и делает так, чтобы страницы ресурса адекватно отображались как на мобильном телефоне, так и на обычном компьютере.
Эта верстка, как и табличная — просто способ расстановки элементов на экране, который раньше применяли верстальщики в ту далекую пору, когда еще не было «флексов» и «гридов».
- Кроссбраузерная
Нужна для адекватного отображения сайта на всех популярных браузерах. Пользователи вашего ресурса могут использовать любой популярный браузер и без помех просматривать странички веб-сервиса.
Это часть адаптивной верстки сайта наряду с десктопной.
Преследует цель логичной и последовательной иерархии страницы.
Не стоит доверять верстку кустарному специалисту, который еще и программист и дизайнер в одном флаконе.
Ну не бывает так. Наша студия верит в то, что для качественного выполнения работы разработчику не стоит распылять свой талант на различные направления, а лучше сосредоточиться на чем-то одном.
Мы рекомендуем выбирать студию со сплоченной командой разработчиков, где каждый занимается тем, что любит и умеет. Именно такой подход дает наилучший результат.
zwebra.com.ua
Тонкости работы верстальщика в полиграфии
Верстальщик необходим в типографиях, дизайн-студиях, издательствах, рекламных агентствах. Этот специалист должен хорошо знать графические редакторы. В прямые обязанности верстальщика входит создание макетов продукции. Он не занимается визуальным оформлением страниц — это работа дизайнера или арт-редактора. Задача верстальщика — грамотно оформить страницы, чтобы каждый блок находился на своем месте.
Как работает верстальщик
Работа верстальщика — это корректное наполнение страниц и распределение материалов. Специалист создает макет, распределяя материалы и создавая блоки на страницах. После этого макет поступает дизайнеру, который добавляет красок страницам. Он может вставить изображения, изменить шрифт или размер шрифта. После работы дизайнера изначальный макет может смотреться некорректно, и его необходимо повторно править. Поэтому макет снова поступает верстальщику, который устраняет все недочеты.
Дорабатывать обычно приходится текстовый контент. Наиболее распространенная проблема — «висячая строка». Это такое явление, когда первая строка абзаца оказывается в конце предыдущей страницы или последняя строка выталкивается на следующую страницу. Выглядит «висячая строка» непрофессионально, она портит весь облик страницы. Именно поэтому ее убирают. Другая распространенная проблема — «висячий предлог». Предлог, который оказался в конце строки, стремятся убрать, потому что это неправильно. Возникают проблемы и с расстоянием между строками, это называется интерлиньяж.
Верстальщик знаком с правилами и требованиями к тексту в макете, поэтому он может быстро исправить все недочеты. После исправлений текст остается стилистически правильным и красивым, но при этом он оптимально вписывается в макет. Текстовые блоки . после правки располагаются ровно, они отстоят от картинок на одинаковом расстоянии. Верстальщик может выполнять работу по финальной корректорской правке.
Совмещение обязанностей
В полиграфии требуются универсальные специалисты, поэтому работа верстальщика может подразумевать не только подготовку макетов страниц и правку. Верстальщик может выполнять работу:
В издательстве или типографии может не существовать дизайнерского отдела. В этом случае верстальщику придется не только готовить макет, но и облагораживать страницы, оформляя их визуально для потребителя. Некоторые верстальщики считают, что так даже удобнее — они сами могут вносить финальные правки после того, как оформили страницу. Однако объем работы и требований к сотруднику при этом возрастает.
Выполняя работу специалиста по допечатной подготовке, верстальщик будет сам с нуля создавать страницу. Это не только накладывает больше ответственности, но и требует от работника больше знаний и умений. В полиграфии иногда требуется создание упаковки с нуля, но для выполнения такой работы нет конструктора. В этом случае издательство может потребовать от верстальщика выполнения обязанностей конструктора. При этом в трудовой книжке у сотрудника будет значиться только одна должность — верстальщик. В некоторых случаях эту профессию обозначают также как дизайнер-верстальщик.
Что должен знать специалист
Также профессионалу стоит знать основы типографики. Это базовый навык, который подразумевает владение основами науки компоновки текста на странице. Часто верстальщикам приходится работать с многостраничными текстовыми изданиями, для работы с ними требуется знание особенностей многостраничной типографики.
К важным качествам верстальщика можно отнести внимание к деталям, перфекционизм, усидчивость и способность к монотонной работе. Без этих качеств профессионализма добиться очень сложно. Специалисту необходимо уметь обращать внимание на мелочи. Чувство композиции верстальщику тоже не повредит, особенно если он выполняет также работу цветокорректора и дизайнера.
Поделитесь ссылкой со своими друзьями:
pakman.ru
Верстальщик. Кто это?
Многие не знают, кто такой верстальщик веб-страниц. Дизайнера знают, программиста знают. А когда говоришь, что ты верстальщик, в ответ слышишь: «А кто такой верстальщик, что ты делаешь?»
Обратимся к всезнающей Википедии.
Верстальщик веб-страниц — человек, профессионально занимающийся вёрсткой веб-страниц. В общем случае в задачу верстальщика веб-страниц (далее верстальщик) входят:
- создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть HTML, XHTML
- оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS
Далее, как правило, слышишь: «А чем верстальщик отличается от программиста, ведь те также пишут какой-то код».
Тогда я стараюсь простым языком объяснить, что верстальщик – это что-то среднее между дизайнером и программистом, связующее звено. Верстальщик берет макет, который нарисовал дизайнер, и делает «заготовку» для программиста. Верстальщика можно сравнить с переводчиком. Он описывает (переводит) дизайн при помощи тегов. Теги – это специально оформленный текст, который представляет информацию о разных элементах дизайна (текст, иллюстрация, таблица). Таким образом, после работы верстальщика, нарисованный макет можно просматривать в виде набора тегов.
После верстки дизайнер проверяет, чтобы его творение так же красиво смотрелось в браузере, а программист проверяет, чтобы программный код можно было интегрировать с кодом разметки страницы.
Что нужно верстальщику для работы? Как минимум:
- текстовый редактор
- графический редактор
- браузер
В графическом редакторе верстальщик работает с графикой, в текстовом пишет код веб-страницы, а в браузере тестирует правильное отображение сверстанных страниц.
По натуре верстальщик должен быть немного творческим человеком, т.к. в ходе работы ему приходится много работать с графикой, зачастую самому дорабатывать элементы дизайна. В то же время верстальщик, как и программист, должен быть усидчив, внимателен и немного «завернут» на коде.
Основная задача верстальщика – сделать просмотр web-страниц наиболее удобным и простым для пользователя. Верстальщик должен учитывать тип устройства, на котором будет просматриваться сайт. Должен верстать страницу с учетом того, что ее могут открывать на различных разрешениях экрана, в различных версиях браузеров, с отключенной графикой и скриптами. Пользователями сайта могут оказаться люди с нарушением слуха и зрения. Кроме этого, верстка должна соответствовать принятым стандартам. Все эти факторы очень усложняют работу верстальщика, делают ее более трудоёмкой, чем это может показаться на первый взгляд. Может, поэтому сейчас наблюдается большой спрос на работу верстальщика.
Некоторые называют работу верстальщика нудной и неинтересной. В чем-то с ними можно согласиться. Но как объяснить тот факт, что верстальщик может заниматься своей работой целый день, а часто и ночь и не замечать, как летит время. А может быть работа верстальщика не такая и нудная?
Если сравнивать работу верстальщика и журналиста, то можно однозначно сказать, что журналист больше общается с людьми, ездит в командировки и видит много интересных мест.
Верстальщик так же не обделен общением с людьми (заказчиками), но чаще всего это происходит при помощи Интернета (ICQ, Skype,E-mail). Интересные места верстальщику заменяют интересные, профессиональные дизайны сайтов, а путешествует верстальщик не на поезде и самолете, а сидя на своем рабочем кресле. Путешествует по всемирным просторам Интернета, в поисках новых решений поставленных задач.
Наверное, надо просто быть верстальщиком, чтобы это понять!
Так кто же такой верстальщик?
www.webmolot.com
Работа в команде. Как помирить дизайнера и верстальщика / Habr
Частая жалоба верстальщиков: «Они делают непонятный макет! Отступы пляшут, заголовки разных размеров и начертаний, элементы выпадают из сетки! Не хочу с ними работать”. Дизайнеры, в своё время, жалуются на то, что верстальщики портят макеты.
Эти жалобы взаимодополняемы. Если начать разбираться в корне проблемы, то виноватыми окажутся оба. Как помирить этих двух работников фронта?
Необходимо понять, что в большинстве случаев меняться нужно обоим.
Дизайнеры:
1. Используйте сетку
Удивительно, как много людей, называющих себя „веб-дизайнерами“ игнорируют этот базовый элемент работы. Сетка задает строгую горизонтальную иерархию вашего макета. Большинство верстальщиков используют готовые сетки или делают свои, что даёт им высокую точность и скорость вёрстки.
Изучите принцип работы сетки, например Bootstrap.
Если вам сложно самому рассчитать размеры колонок, используйте специальный онлайн-калькулятор.
Возьмите на вооружение 10, 8 или 4-пиксельную сетку. В изучении 8px сетки отлично помогает изучение концепции Material Design и этой статьи.
2. Изучите основы вёрстки
Вам нет необходимости вникать в подробности Javascript, работы с npm, git, или препроцессорами. Вам необходимо освоить вёрстку для того, чтобы понять, что можно сделать, а что нет. Когда вы сами поймете, как создаётся вёрстка, вы сможете объективно оценить, насколько сложную задачу вы ставите перед верстальщиком, и, в случае чего, упростить её.
3. Показывайте состояния объектов в различных состояниях
Очень часто происходит так, что дизайнер не показывает и даже не рассказывает верстальщику о ховер-эффектах (какими они будут при наведении или нажатии на объект). В таких случаях часто верстальщик делает ховер-эффект таким, каким он сам его видит у себя в голове.
Не заставляйте думать верстальщика за вас. Показать состояния объектов можно вот так:
- Сделать один элемент отличающимся от остальных и набросить на него сверху курсор “руки”.
- В случае модальных окон создать для него отдельный слой, который можно безболезненно скрыть, и показать на примере или через прототип как будет появляться и исчезать окно.
Также можно перенести все объекты для ховера на отдельный лист, чтобы показать их состояния до и после.
4. Типизируйте
Типизируйте все объекты на макете. Если это заголовок Open Sans 1.2em, то пусть он везде будет Open Sans 1.2em. Аналогично поступите с кнопками, абзацами, интерлиньяжем и отступами. Мы не говорим, что всё должно выглядеть одинаково — нет. Вы должны понимать, что чем больше у вас типизированных объектов, тем проще верстальщику с ними работать. Если вы хотите полностью сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
5. Переименуйте слои
Об этом пункте не говорил разве что ленивый, но слишком уж часто верстальщику приходят макеты с хаотично накиданными слоями, название которых ни о чём не говорит. Переименуйте слои согласно их смыслу и сгруппируйте по типам. Вы можете использовать в названиях как БЭМ-синтаксис, так и общие термины вроде button, header, footer и так далее.
6. Соберите изображения и иконки
Соберите все иконки и изображения из вашего макета и разместите в папку проекта согласно смыслу. Например вот так: img/photos/photo1.jpg, img/icons/facebook.svg и так далее. Этот простой шаг поможет верстальщику гораздо быстрее и эффективнее работать с макетом при вставке графики.
7. Создайте Kit
Под Kit’ом я имею виду отдельный лист, в котором прописаны все типизированные элементы системы: например заголовки всех уровней и разновидностей, кнопки и их вариации, разделительные линии и так далее. Если вы ранее типизировали объекты, то вы легко можете перенести их в Kit на отдельный лист. Благодаря этому верстальщик может спокойно подготовить базу с помощью методологии БЭМ и собирать сайт словно кубики лего.
8. Комментируйте
Если вы предоставляете на вёрстку статичный макет, постарайтесь оставить максимальное количество комментариев по тем элементам дизайна, по которым вопросы могут возникнуть. Не ленитесь. Потратьте время сразу, и избавьте себя от кучи вопросов на будущее. Большинство программ для создания интерфейсов позволяют делать это максимально удобным способом.
Верстальщики:
1. Посмотрите на макет глазами дизайнера
Очень важно оценить художественную работу дизайнера до начала вёрстки. Вы можете подумать, что тот или иной объект верстать будет сложно, но для начала осознайте, почему именно так поступил дизайнер, и будет ли картина такой же цельной, если убрать или изменить объект? Предложите дизайнеру свой вариант, и в большинстве случаев он объяснит вам, почему он использовал именно такое решение, и возможно ли его изменить или удалить без потерь для макета.
2. Попробуйте нарисовать дизайн
Чтобы лучше понимать работу дизайнера и оценить его труд по-настоящему, испытайте себя в его роли. Выберите любую понравившуюся вам программу для работы с графикой и нарисуйте один или несколько макетов, соблюдая все требования, которые вы предъявляете дизайнеру. Оцените свою работу как художник, и отдайте на суд людям в чатах, на форумах, друзьям и знакомым. Это даст вам лишний повод убедиться, что дизайнер не зря ест свой хлеб… Ну или то, что в вас всегда спал художник.
3. Не принимайте решений за дизайнера
Очень часто рисуя по макету, верстальщики пренебрегают какими-то “мелочами” и не верстают их. Они считают, что дизайнер просто увлёкся, и нарисовал ненужные “красотульки”. Нет! Хороший дизайнер изучает продукт, для которого будет рисовать дизайн, продумывает элементы, композицию, размещает все на это макете и создаёт единую картину. Если у вас возникают какие-то сомнения относительно изменений в дизайне, обязательно согласуйте их с дизайнером.
4. Поддерживайте диалог
Обсуждайте дизайн. Получив макет, оцените его (соблюдая первый пункт), и расскажите дизайнеру в каких местах и почему нужно внести правки. Что такое адаптивная сетка и для чего она конкретно нужна. Уточняйте спорные моменты: возможно, что дизайнер намеренно разрушил ритм композиции, а не просто допустил небрежность. Если у кнопки, ссылки или картинки нет ховер-эффекта, спросите, как он должен выглядеть или где он прорисован. Обязательно обговаривайте спорные моменты, тогда не только ваша работа, но и работа дизайнера улучшится.
5. Обсудите общие инструменты для работы
Верстальщикам часто приходилось получать макеты в неудобных для вёрстки форматах, в которых достаточно проблематично посмотреть размеры, цвета, тени или отступы. Решите вместе с дизайнером, какой программой лучше пользоваться для обоих. Разнообразие программного обеспечение ны рынке легко позволяет это сделать. Уже сейчас в вопросе создания пользовательских интерфейсов у вас есть выбор между продуктами Adobe (например Adobe XD), Sketch, Figma или Framer (который буквально на днях выпустил в очередном релизе возможность создавать интерфейсы). Выберите что-то одно или несколько программ и поймите, как вы будете взаимодействовать.
Заключение
Самое главное в работе двух работников фронта, это понять возможности друг друга и общаться. Как и в любых отношениях, здесь должна быть согласованность и налаженная коммуникация. Начните внедрять эти пункты по одному или же все сразу, и тогда работа принесёт вам искреннее удовольствие.
Над статьёй работали Григорий Мочалин и Илья Дзенски.
habr.com
кто такие дизайнеры верстальщики????и вообще верстка?
Если дизайнер-верстальщик на полиграфию, то это человек оформляющий страницы печатных изданий в соответствии со стандартами и допечатнной подготовки. А в Вебе не бывает Дизайнеров-верстальщиков! Это выдумки работодателей, чтобы на одну зарплату завербовать двух специалистов на одну арплату. В вебе бывают: — Дизайнеры, которые делают художественное оформление визуальной части сайта со всеми заморочками, — Верстальщики, которые этот дизайн нарезают и добавляют стили ко всем заголовкам, шрифтам, ссылками, кнопочками и оптимизируют под разные браузеры, чтобы потом кодер или программист мог без труда нацепить дизайн на движок и заставить его работать. А дизайнер-верстальщик — это несостоявшийся веб-программист или дизайнер, или студент который готов делать двойную работу, а то и тройную за одну зарплату.
они верстают (набирают) страницы газетные, что бы потом печатать в типографии
Дизайнеры верстальщики- они занимаются например версткой газеты, значит они решают где будет находится заголовок, статья, реклама, иллюстрации в этой газете. Можно сказать они «одевают» газету)) ) По крайней мере я сама видела))))
Скорее всего это веб-дизайнеры, разрабатывают дизайн сайта. Я сам веб-мастер, но в дизайне я не очень.
верстка — это расположение визуальной или текстовой информации на странице (книги, плаката, веб-страницы, газеты и тп) , такой вот вид дизайна соответственно, дизайнеры-верстальщики — люди, которые этим занимаются, их цель — сделать страницу удобной для восприятия и красивой ))
Сайты верстают, т. е. пишут! Моряки не плавают, а ходят! Картины не рисуют, а пишут!
Если дизайнер-верстальщик на полиграфию, то это человек оформляющий страницы печатных изданий в соответствии со стандартами и допечатнной подготовки. А в Вебе не бывает Дизайнеров-верстальщиков! Это выдумки работодателей, чтобы на одну зарплату завербовать двух специалистов на одну арплату. В вебе бывают: — Дизайнеры, которые делают художественное оформление визуальной части сайта со всеми заморочками, — Верстальщики, которые этот дизайн нарезают и добавляют стили ко всем заголовкам, шрифтам, ссылками, кнопочками и оптимизируют под разные браузеры, чтобы потом кодер или программист мог без труда нацепить дизайн на движок и заставить его работать. А дизайнер-верстальщик — это несостоявшийся веб-программист или дизайнер, или студент который готов делать двойную работу, а то и тройную за одну зарплату.
touch.otvet.mail.ru