Блог свободен от NOFOLLOW!

В чем разница между полиграфическим и web-дизайном?

Дата: 25-04-2011 | Автор: Yaroslav.CH | Рубрика: Дизайн
Метки: , , ,

29

В чем разница между полиграфическим и web-дизайном?

В последние годы для дизайнеров становится все более привычным выполнять несколько ролей. Исходя из моего опыта, чаще всего объединяются полиграфический и веб-дизайн. Однако, не смотря на общую схожесть, рассчитывать, что переход от «печати» к «web» будет абсолютно безболезненным — не стоит. В обеих сферах есть свои ключевые аспекты и стандарты, которые необходимо принять, выучить и закрепить изначально.

Недавно я общался с профессиональным полиграфическим дизайнером — она планировала начать изучение стандартов веб-дизайна и попросила проконсультировать ее в тех вопросах, которые для нее были не ясны. Для того, чтобы избежать ошибок, изложенных в статье «11 частых ошибок начинающего web-дизайнера», сегодня мы обсудим те базовые стандарты, которые отличают полиграфический и веб-дизайн.

Стандарты в полиграфическом дизайне

Размер файлов

Полиграфический дизайнер, работая над макетом визитки, буклета или афиши, в сущности никогда не задумывается о размере файла на выходе. В принципе, в этом и нет особой необходимости — все в большей мере зависит от технических возможностей рабочей станции самого дизайнера, чем от каких-либо внешних факторов. Кроме того, де-факто стандартом для полиграфии является 300 dpi, что существенно влияет на размер макетов. Например, я помню одну достаточно сложную афишу, которая в слоях «завесила» больше 1 Gb. Единственной проблемой было лишь упаковать ее для передачи в полиграфию.

«Одноразмерный» дизайн

Визитная карточка, папка или бланк имеют жестко заданный размер. Полиграфическому дизайнеру не нужно морочить себе голову разными размерами объекта — исключая некоторые случаи (например, логотип), все макеты всегда будут привязаны к тому реальному размеру в сантиметрах, которые имеет готовый продукт.

Зависимость дизайна от материала

В полиграфическом дизайне существуют определенные параметры, которые привязывают дизайн к тому материалу, на котором будет напечатан макет. Например, печать на бумаге и на пленке имеет свои отдельные аспекты, а УФ-лакировка или высечка, требуют дополнительной адаптации макета со стороны дизайнера.

Крупные элементы

Размер элементов дизайна в полиграфии редко сочетается с размером веб-элементов. Например, одной из «подводных камней» веба, является т.н. «интерфейсный дизайн» — то есть, отрисовка мелких элементов: кнопок, переключаетелей, флагов и т.д.

Многие полиграфические дизайнеры часто «спотыкаются» даже об иконки, которые на первый взгляд рисовать не так уж и трудно, но основная проблема всплывает при уменьшении иконки до требуемого размера. В итоге выясняется, что те градиенты, штрихи и линии, которые хорошо смотрелись в крупном исполнении, в размере 64×64 выглядят уже совершенно не так.

Ограничения в полиграфическом дизайне

Цветовая палитра

Каждый полиграфический дизайнер знает, что то, что он видит на мониторе, никогда не будет абсолютно идентичным тому, что будет при печати. Именно поэтому при подборе цветов для макета используют стандартизированную цветовую модель Пантон (PMS — Pantone Matching System), цвета которой являются эталонами.

Существует множество каталогов образцов цветов Pantone, каждый из которых рассчитан на определённые условия печати — например, для печати на мелованной, немелованной бумаге, каталог для металлизированных красок (золотая, серебряная) и т. д. Более того, производитель настаивает на том, что «веера» необходимо ежегодно заменять, так как за это время процесс выцветания и истирания изображения делает цвета неточными.

Техника исполнения макета

В полиграфическом дизайне существуют определенные техники отрисовки, которые хорошо смотрятся на бумаге, но не слишком годятся для web. Например, это тонкие градиенты (переходы от темно-серого к черному) или же однопиксельные линии. Обойти эти ограничения можно, но для этого нужно потратить определенное количество времени для поиска компромисса.

Позиционирование макетов

В полиграфическом дизайне есть такое понятие как «вылет» — «мертвая» зона вокруг всего макета, которая будет обрезана при порезке. Например, я много раз видел неправильно позиционированные макеты для биг-бордов, на которых часть дизайна уходила под рамку самого щита. Это и есть несоответствие размера макета — размеру исходного объекта и пренебрежение вылетом.

Стандарты web-дизайна

Большая свобода в цветах

В веб-дизайне, исходные цвета макета и цвета готового «продукта» практически всегда одинаковы. Конечно, существуют свои ограничения, которыми нельзя пренебрегать, однако они не настолько жесткие, как для полиграфического дизайна. Основная проблема, которая может подстерегать веб-дизайнера, это отличие настроек дизайнерского и пользовательского мониторов.

«Движущиеся» объекты

Полиграфический дизайн — статичен. Веб-дизайн — динамичен. Эту аксиому нужно запомнить каждому полиграфическому дизайнеру, который хочет начать заниматься веб.

Динамика web-сайтов проявляется не только в изменении ширины макета при изменении разрешении монитора пользователя (т.н. «резина»), но также и в самой идеологии веб. Меню может выпадать, складываться, разъезжаться; блоки текста могут разворачиваться и сворачиваться; действие по клику может кардинально изменять объект; и так далее.

Скроллинг страниц

Подозреваю, что тем количеством копий, которые были сломаны в боях под лозунгами «Нет/Да скроллингу на страницах!» можно было бы вооружить среднего размера армию. Полиграфический дизайн в принципе не предусматривает такое понятие как «прокрутка страницы» — пользователь видит весь объект сразу и целиком. Даже в случае многостраничного буклета, каждая его страница представляет собой законченную композицию.

В web-дизайне ситуация иная — здесь страница может быть неограниченного размера, но композиция сайта должна учитывать тот факт, что объект не имеет жестко фиксированного размера и не охватывается взглядом сразу и весь.

Ограничения web-дизайна

Один размер для всех

Этот пункт напрямую пересекается с предыдущим («движущиеся объекты») — разные разрешения мониторов пользователей обязывают дизайнера учитывать этот параметр при создании макета. Разные браузеры по разному обрабатывают определенные элементы и об этом тоже нужно помнить.

Кроме того, в последнее время все большую и большую популярность набирает «мобильный веб» — не смотря на попытку производителей приблизить экраны мобильных устройств к экранам мониторов, пока что до подобного слияния еще далеко. И потому нужно не забывать, что ваш макет могут смотреть как на 30" мониторе, так и на 3" телефоне. И для каждого из устройств он должен выглядеть практически одинаково.

Ограничения размеров файлов

В этом вопросе веб-дизайн абсолютно противоположен полиграфическому. Учитывая, что каждый элемент вашего макета будет проходить по каналам связи (а их ширина у каждого пользователя абсолютно разная), необходимо придерживаться практики минимализма в размере и «весе» элементов. Например, не стоит создавать градиент там, где легко можно обойтись цветовой заливкой объекта средствами самого браузера.

А что бы Вы посоветовали дизайнеру, планирующему начать работать с web?

Комментарии 29 комментариев

перейти к форме для комментирования

Разница в этих дизайнах особенно тогда заметна, когда начинаешь верстать. В зависимости от характеристик предоставленного для вёрстки материала объём работ может значительно колебаться. Даже иногда, когда на вёрстку приходит картинка без всяких намёков, что её автор понимал, что с ней дальше произойдёт, бывает гораздо проще сразу сойтись с клиентом на условии, что на сайте это будет выглядеть не совсем так

ОтветитьОтветить

Задачи верстки дизайна от полиграфиста вечная проблема. Совсем недавно один клиент заказал у своих же «дизайнеров интерьера» макет дизайна. Я просто поражен не в соответствии стандартов. Разрешение макета 1700px + 100 dpi (вместо 72). Мне пришлось перерисовать самому весь макет, так как они не представляют о стандартах и цветах.

ОтветитьОтветить

Ну почему же... Однопиксельные линии и тонкие градиенты и в вебе неплохо смотрятся. Только нужны они не всегда :)

ОтветитьОтветить

Самый лучший веб-дизайнер тот, кто сначала научился верстать — хотя бы в первом приближении. Тогда он уже будет знать, что можно делать, а что нельзя. К сожалению, «ан масс» ситуация такова, что «вебдезигнеры» и в том, и в другом разбираются одинаково плохо. Впрочем, полиграфия тут не виновата.

ОтветитьОтветить

Полиграфический и веб дизайны — это абсолютно разные вещи и переход от веб к полиграфии и наоборот происходит очень непросто. Иногда просто нарисовать заново в нужной сфере.

ОтветитьОтветить

Хороший обзор. Хочу заняться web-дизайном, прочитал много полезного.

ОтветитьОтветить

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

ОтветитьОтветить

Спасибо за интересную статью. Очень познавательно для начинающих дизайнеров.

ОтветитьОтветить

@ Княгиня:

Мне кажется, что каждый специалист должен досконально разбираться в своем вопросе. Зачем мне, как верстальщику, знать как там и чего у дизайнеров. Есть определенные стандарты дизайна, которых надо придерживаться вот и все. Сетки, например... А если дизайнер рисует так, что это невозможно сверстать — он просто халтурщик и ему надо оторвать руки )))

ОтветитьОтветить

@ Виктор:

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

ОтветитьОтветить

Виктор, согласен, В своей теме нужно быть как рыба в воде.

ОтветитьОтветить

Разница конечно на лицо... девочка работает дизайнером в полиграфии, сказывается на творчество. более шаблонное какое то — сама говорит, в общем если ты творец — ни в коем случае нельзя работать

ОтветитьОтветить

Однако, не раз видела макеты сайтов в виде «новогодней открытки» великих дизайнеров, после чего верстальщики просто плевались переводя все это в HTML. Вот на самом деле, приятнее ведь видеть структурированный сайт с привычным видом тех же кнопок, нежели кучу времени потратить на их поиск.

После таких дизайнеров и их макетов решаешь делать все сам, верстать и рисовать. Рисуешь и уже знаешь, что заверстаешь. Знакомые архитекторы/дизайнеры/художники вообще не видят дизайна как такового даже в самых продвинутых сайтах, это говорит о том, что юзабилити в веб им совершенно не знакомо.

И все-таки, веб-дизайнер должен понимать суть верстки и только тогда приниматься за прорисовку макета!

ОтветитьОтветить

Что касается «Позиционирование макетов», то здесь в первую очередь надо обратить внимание на «корпоративный стандарт», который ревностно сохраняется в каждой фирме производителе. Прежде чем предлагать свои материалы фирме, надо ознакомиться с их стандартами. Как правило «болванки» публикуются на сайтах полиграфических издательств.

ОтветитьОтветить

Спасибо, давно искал основные ньюансы полиграфического дизайна. Статья будет крайне полезна людям не определившимся с выбором дизайнерского направления. +1

ОтветитьОтветить

Дизайн для веб и дизайн для бумаги это не только разные техники, но и существенно разные типы визуального мышления. Особенно, это относится ко всякого рода плакатам, афишам, билбордам и пр. Нарисовать афишу так, чтобы она смотрелась одинаково хорошо, как с 20 метров, так и одного метра не так просто как кажется. А всё, что касается технических нюансов, то их можно практически освоить за неделю.

ОтветитьОтветить

А я раньше пару раз сталкивалась с ситуацией, когда закачик прочит картинку с сайта растянуть на А1 или на баннер 3 на 5 метров.

Приходилось долго объяснять что результат будет не очень :)

ОтветитьОтветить

@Tramp: а мне кажется переход не так уж и сложен. У нас в России таки умельцы, что на все руки мастера... у нас в конторе 1 человек может быть и копирайтером, и верстальщиком, и сеошником)

ОтветитьОтветить

Эмм...полиграфический дизайн и фотошоп? Сталкивался с тем что типографии требуют макеты в векторе, а не в растре. Так что переход с web-дизайна на полиграфику связан ещё с обучением для качественного выполнения заказов в Illustrator или CorelDraw

ОтветитьОтветить

Очень доходчивая статья. Ответ напрашивается: дизайнеру, начинающему работать с web, можно порекомендовать забыть о большей части того, что он знал ранее о полиграфическом дизайне.

А вообще полиграфия, ИМХО, вчерашний день: процесс умирания газет и журналов растянется на долгие годы, но он необратим. Лично я уже сейчас полностью отказался от печатной продукции в пользу Интернета.

ОтветитьОтветить

А я бы посоветовал «дизайнеру» сначала почитать умные книги, потом умные книги о веб-дизайне, а потом начинать практиковаться из анализа чужих сайтов, придумывать себе какие-то задачи и научиться их решать. И главное не забывать, что в первую очередь логика, а потом уже эстетика.

ОтветитьОтветить

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

ОтветитьОтветить

я сам прошел обраьный процесс от веб до полиграфии, это абсолютно разные стихии и однозначно могу сказать что адаптация будет происходить долго и болезненно. Нчиная от подбора цвета до построения композиции. Способ восприятия человеком веб и полиграфического дизайна очень отличаются.

К тому же инструментрий абсолютно разный.

ОтветитьОтветить

Читая статью, даже не знаю то ли плакать, то ли смеяться. Хотя все же склоняюсь ко второму)

В статье мягко говоря очень много неточностей.

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

Тогда может у вас было бы более верное представление о данном вопросе.

Чего стоят только ваши пассажи по поводу «однопиксельных линий», «удивительно» тонких градиентов, верстке и печати исключительно Pantone и прочего.

Не мешало бы так же уяснить разницу между понятиями «внутренний отступ от внешнего края» и «выпуском под обрез (вылетом) », что не одно и тоже.

Разница между ними такая же как между свойствами padding и margin и они также закладываются отдельно от собственно размера, только для другой цели.

ОтветитьОтветить

@Евгений: честно говоря, я был бы готов оценить Вашу точку зрения, но никакой сравнительной конкретики в комментарии я, к сожалению, не увидел.

Основной задачей было показать как раз те моменты, которые отличают веб от полиграфии (именно в таком порядке), поэтому естественно, что в статье нет подробностей о ««внутреннем отступе от внешнего края»» и «выпуске под обрез (вылетом) »" :)

ОтветитьОтветить

@Yaroslav.CH:

Нужна конкретика? Да пожалуйста)

Размер файлов

Полиграфический дизайнер, работая над макетом задумывается на размером файлов. Не так сильно как в web-дизайне, но все же.

«Одноразмерный» дизайн

А как же понятие «фиксированная верстка»?

Цветовая палитра

Полиграфия Цвета подбираются как путем ручного смешения в палитре Color, так и выборкой образцов из библиотек Pantone, не забыв предварительно установить правильный цветовой профиль. Ну и естественно работа ведется в CMYK, а RGB (вот это действительно большая разница между полиграфией и web-ом). Чтобы не слишком много писать обращу внимание что цвета бывают «составные» и «плашечные» со всеми вытекающими.

Web-design Цвета подбираются как прямым смешением в той же палитре Color (или при помощи сервисов типа Kuler), так и при помощи выборки образцов из таблицы «Рекомендованные (Стандартные) цвета веб».

Техника исполнения макета

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

Печать предъявляет вполне определенные требования к толщине линий в зависимости от технологии и качества печати, а так же используемых цветов (плашечные, составные). Поэтому печать этих тонких линий является еще более тонким вопросом, чем сами эти линии и ни о каких «однопиксельных линиях» в большинстве случаев речи быть не может.

А вот в web-е можно спокойно написать border: 1px solid 008000 и никто не умрет)

Позиционирование макетов

В случае косячного билборда, который вы видели вылет совершенно не причем. Пренебрежение вылетом в связке с неточной резкой проявляется в виде белой незапечатанной полоске по краю. А в вашем случае это некорректный размер + слишком маленький отступ от внешнего края (в web он как я говорил напоминает атрибут padding). Здесь вы просто свалили в кучу два совершенно разных понятия.

Что касается Web-дизайна приходилось хоть раз видеть как при некорректной блочной верстке один блок (элемент) наползает на другой или и того хуже — вся верстка превращается в кашу. Есть такая беда, правда)

Кстати между блочной версткой и полиграфической, сделанной в InDesign есть определенное сходство. В web-е «блоки» в InDesign «фреймы (frame) »

ОтветитьОтветить

@Евгений:

Нужна конкретика? Да пожалуйста)

Спасибо :) При наличии конкретики, разговор всегда получается более продуктивным :) И сразу получается, что вопросы и комментарии есть не ко всей статье, а только к некоторым пунктам :)

Полиграфический дизайнер, работая над макетом задумывается на размером файлов.

Я имел ввиду, что полиграфическому дизайнеру специально об этом задумываться особого смысла нет. Условно, если макет будет 100 Мбайт или 200 Мбайт, это особого ни на что не повлияет. В случае веба — 1 мбайт или 2 мбайта уже имеют существенное значение. В особенности, если мы говорим о дизайне под мобильные устройства.

А как же понятие «фиксированная верстка»?

Чаще всего понятие «фиксированная верстка» в веб-дизайне подразумевает фиксирование только по ширине, высота же обычно остается динамической — я говорю о большинстве макетов, оставляя за рамками меньшинство макетов из серии «портфолио», «галерея» и пр.

В полиграфии любой дизайн является фиксированным. Ну разве что в последнее время часть рекламных агентств стала экспериментировать с выходом объектов за границы макета и некоей объемностью изображения. Но даже в этом случае ШХВ все равно остается фиксированной.

Цветовая палитра

Ну, если рассматривать ситуацию с позиции Вашего расширенного комментария, то я действительно описал ситуацию с цветами не так емко.

Техника исполнения макета

Да, что касается «однопиксельных линий» и «вылета» — это я и правда погорячился, признаю — спасибо за корректировки :)

Что касается Web-дизайна приходилось хоть раз видеть как при некорректной блочной верстке один блок (элемент) наползает на другой или и того хуже — вся верстка превращается в кашу. Есть такая беда, правда)

Согласен — бывает, но я не стал в статье вдаваться в возможные ошибки как со стороны полиграфического, так и со стороны веб-дизайнера.

Кстати между блочной версткой и полиграфической, сделанной в InDesign есть определенное сходство. В web-е «блоки» в InDesign «фреймы (frame) »

Если говорить о журнальной/книжной верстке — то да, согласен.

В сущности, задачей этого материала является подчеркивание того факта, что без должной подготовки полиграфический дизайнер не может сходу и сразу стать веб-дизайнером — именно об этом я и говорил во вступлении к статье.

ОтветитьОтветить

Сам дизайном не занимаюсь, когда пробовал понял, что нужно знать хотя бы основы. Когда попросил знакомого полиграфиста сделать дизайн для сайта, он мне объяснил, что это совсем другое в отличии от того чем он занимается и отказался, хотя я предлагал оплатить его услуги

ОтветитьОтветить

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

ОтветитьОтветить

А Вы оставили комментарий? Ваше мнение очень важно!

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