Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Агентство продающего дизайна
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
28
Битрикс24

Битрикс24

www.bitrix24.ru

20
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

16
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

9
Reader

Reader

Интернет-журнал о современных технологиях.

7
ADN Digital Studio

ADN Digital Studio

adn.agency

7
Frutra

Frutra

design.frutra.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

8 отличий между печатным и веб-дизайном

7 276 2 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Печатный дизайн и веб-дизайн − две стороны одной монеты. Но давайте все же рассмотрим их ключевые различия.

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

1. Способ воздействия: как люди видят дизайн.

b_5562ed0eb521b.jpg

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

2. Ощущения: как дизайн взаимодействует с чувствами.

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

b_5562ed7715eab.jpg

Вы, наверняка, тоже замечали: многие библиофилы любят ощущения от книги, которая лежит у них в руках - вес, запах, текстуру или даже шелест... Это те качества, которые не могут быть реализованы в электронной форме. Электронные книги, напротив, имеют свои преимущества, которые не могут быть перенесены в печатный формат. Детские книги пестрят анимированными иллюстрациями, а электронные версии научной литературы включают в себя ссылки на внешние источники. И снова: каждый из подходов имеет свои плюсы.

3. Форма содержимого: статика и динамика.

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

b_5562eeaf1a97b.jpg

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

4. Юзабилити: соответствие потребностям пользователя.

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

b_5562ef62a5a15.jpg

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

5. Макет: как привести в порядок содержание.

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

b_5562f00d0641a.jpg

Однако, и веб имеет свои ограничения в виде перестроения макета в зависимости от размера устройства.

6. Разрешение: DPI и PPI.

Очень важно понимать различия между этими двумя базовыми понятиями. Ведь именно разрешение определяет качество фотографий и других изображений в окончательной версии дизайна.b_5562f4dcbcde3.jpg

Наверняка вы слышали аббревиатуры DPI (количество точек на дюйм) и PPI (количество пикселей на дюйм). Часто люди ошибочно считают их − синонимами, что в корне не верно.

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

b_5562f5fce9d2b.jpg

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

7. Цвет: RGB и CMYK.

Изображение на бумаге всегда отличается от того, что мы видим на мониторе. И связано это с тем, что цвета на бумаге и на экране появляются из разных цветовых пространств. Пространство CMYK используется для передачи цвета в печати, RGB − для веба. Если вы используете оба пространства для одного проекта, то самый простой способ привести их к однообразию − использовать для перехода из одного пространства в другое систему соответствия PANTONE. С ее помощью эквивалентные цвета веб-дизайна могут быть подобраны для печати на бумаге или другой поверхности. PANTONE помогает работать в одной команде клиентам, дизайнерам и печатникам, и быть уверенным в том, что окончательный продукт будет выглядеть именно так, как это задумывалось.

b_5562f94e3a520.jpg

Цветовое пространство CMYK − основано на 4 основных цветах, используемых в принтерах: Cyan (голубой), Magenta (пурпурный), Yellow (желтый) и Key (Ключевой цвет, или просто черный). Кодировка у этого пространства очень простая и эквивалентна наличию одного из четырех цветов в процентах, 70/10/0/0 − значит, что в полученном цвете будет 70% голубого и 10% пурпурного, а значения желтого и черного равны 0%.

Цветовое пространство RGB − основано на трех цветах, которые вы видите, глядя на любой монитор: красный, зеленый, синий. Получить один и тот же цвет на разных мониторах − достаточно сложно, ведь существует множество разных экранов с различными характеристиками. В идеале каждый монитор должен быть откалиброван (для этого и на Mac, и на Windows есть системные утилиты). Кодировка цветов в RGB происходит при помощи трех наборов цифр, значение каждого из которых может варьироваться от 0 до 255. Эти значения определяют количество красного, зеленого и синего для того, чтобы цвет интерпретировался мозгом правильно, как хочет того дизайнер. Чтобы получить тот же цвет, который мы брали из пространства CMYK, необходимо выбрать следующие параметры: 85/172/238, где значение синего − 238, доминирующее.

b_5562f83a541e3.jpg

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

8. Контроль: изменения в проекте.

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

В печатном же продукте все иначе: дизайнер имеет полный контроль над проектом до момента печати. Пользователь не может влиять на дизайн, поэтому в печатникам нужно принимать взвешенные решения о конечном виде продукта - ведь после принтера изменения уже не внесешь. В то же время веб-дизайнер имеет больше текущего контроля над проектом и может вносить правки или даже переделать дизайн в процессе его использования.

b_5562fab988720.jpg

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

Если вашей компании нужна разработка дизайна печатной продукции − закажите ее на сайте shubalab.com, и мы решим этот вопрос. Всех читателей наших статей на Спарк.ру ждет скидка 15% на дизайн печатной продукции. Чтобы ее получить, используйте слова «Печатные материалы Спарк» в комментариях к заказу. Ждём от вас отзывов и писем!
+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
SelenIT
> Стандартом для веб-дизайна, является величина в 72 пикселя на дюйм
Речь о предустановленном разрешении графики для веба в Фотошопе? Просто в стандарте CSS пиксель (как единица измерения) определен как 1/96 дюйма, а на новых экранах а-ля Retina один CSS-пиксель может передаваться несколькими физическими пикселями экрана, так что сейчас PPI становится по смыслу всё ближе к DPI.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Спасибо за замечание! Обязательно в это на заметку, однако если вы обратите свое внимание на статью http://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/, то увидите, что использование 72 ppi для изображений веба — все еще актуально.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать