Друкований дизайн і веб-дизайн - дві сторони однієї монети. Але давайте все ж розглянемо їх ключові відмінності.
1. Спосіб впливу: як люди бачать дизайн
Одне з найбільш значущих відмінностей - це те, як люди користуються дизайном. Одна справа тримати в руках щось фізичне: паперовий журнал або книгу - і зовсім інше - взаємодіяти з інтерактивним сайтом у віртуальному просторі. Існують симбіози, як наприклад електронні журнали, які виглядають точно так само, як і їх друковані колеги, але читаються з монітора. Але це швидше виняток, але: друкований і веб-дизайн мають чіткі межі. І то, де люди будуть бачити фінальний дизайн, істотно впливає на рішення його творця.
2. Відчуття: як дизайн взаємодіє з почуттями
Ви, напевно, теж помічали: багато бібліофіли люблять відчуття від книги, яка лежить у них в руках - вага, запах, текстуру або навіть шелест ... Це ті якості, які не можуть бути реалізовані в електронній формі. Електронні книги, навпаки, мають свої переваги, які не можуть бути перенесені в друкований формат. Дитячі книги рясніють анімованими ілюстраціями, а електронні версії наукової літератури включають в себе посилання на зовнішні джерела. І знову: кожен з підходів має свої плюси.
3. Форма вмісту: статика і динаміка
Більшість сайтів створюються для того, щоб постійно змінюватися. Наприклад новинні сайти, вони виглядають кожен день по новому: на головній сторінці кожен день будуть інші картинки і інший текст. Веб-дизайн може бути модифікований, змінений або перероблений заново в будь-який момент. Зовнішній же вид книги або журналу, одного разу пройшли через принтер, залишається незмінним (за винятком випадку, коли приймається рішення змінити дизайн і надрукувати її заново).
На відміну від дизайнерів друкованої продукції, які після відправки роботи на принтер вважають її виконаною, веб-дизайнерам потрібно розраховувати на довгострокові проекти. Безлічі інтерактивних елементів (таким як: кнопки, ефекти при наведенні мишки а так само форми і опитування) потрібно постійну увагу дизайнера. Всі ці елементи повинні працювати коректно і завжди дотримуватися однієї стилістики. Немає більш простого способу втратити аудиторію, ніж пропустити якийсь елемент дизайну, який працює не так, як користувач цього очікує. Веб-дизайн відрізняється від друкованого в першу чергу цієї інтерактивної складової, яка вимагає зусиль від користувача: кликати, вводити інформацію або завантажувати файли.
4. Юзабіліті: відповідність потребам користувача
Коли дизайн розміщувався лише на поверхні паперу, дейтсвія користувача зводилися лише до перегортання сторінок. Але у віртуальному просторі не все так банально. Відвідувач сайту може взаємодіяти з необмеженою кількістю шаблонів, в кожному з яких хоче максимально простим способом знайти те вміст, який шукає. Ось для чого з'явилися найрізноманітніші меню, які стали своєрідним пунктом навігації. Для зручності вони повинні бути в очікуваному місці, щоб користувачеві було просто їх знайти.
З ростом кількості пристроїв з доступом в Інтернет збільшилася і потреба в коректному відображенні сайтів на екранах різного розміру. Що ставить нас перед необхідністю використовувати адаптивний або Респонс дизайн. Причому веб-дизайнерам потрібно продумувати не тільки зовнішній вигляд продукту, але і те, як він дизайн буде змінюватися при зміні масштабу, час перегляду та інших взаємодіях.
У веб та друкованого дизайну багато елементів, проте кожен з них має свої вимоги до структури - розташуванню в макеті таких елементів як: текст, зображення, фігури, лінії, колір. У друкованому продукті ці вимоги диктуються технічними обмеженнями, в той час як веб-дизайнери отримують практично необмежені можливості в структуруванні інформації.
Однак, і веб має свої обмеження у вигляді перестроювання макета в залежності від розміру пристрою.
6. Дозвіл: DPI і PPI
Дуже важливо розуміти відмінності між цими двома базовими поняттями. Адже саме дозвіл визначає якість фотографій і інших зображень в остаточній версії дизайну.
Напевно ви чули абревіатури DPI (кількість точок на дюйм) і PPI (кількість пікселів на дюйм). Часто люди помилково вважають їх - синонімами, що в корені не вірно.
DPI бере початок від процесу друку і в буквальному сенсі описує щільність точок фарби на одному дюймі друкованої поверхні. У свою чергу, PPI означає кількість пікселів, розміщених на одному дюймі екрану. Чим більше пікселів на дюйм, тим більше різке і якісне зображення ми бачимо. DPI на відміну від PPI, що не має на увазі під собою зміну розміру зображення при друку, а лише впливає на якість друку зображень.
Стандартом для веб-дизайну, є величина в 72 пікселя на дюйм. Це обумовлено тим, що багато пристроїв до сьогодні мали заводський. Але вже в найближчому майбутньому це зміниться, адже вже виходять пристрої з набагато більш високою щільністю пікселів.
7. Колір: RGB і CMYK
Зображення на папері завжди відрізняється від того, що ми бачимо на моніторі. І пов'язано це з тим, що кольори на папері і на екрані з'являються з різних колірних просторів. Простір CMYK використовується для передачі кольору у пресі, RGB - для вебу. Якщо ви використовуєте обидва простору для одного проекту, то найпростіший спосіб привести їх до одноманітності - використовувати для переходу з одного простору в інше систему відповідності PANTONE. З її допомогою еквівалентні кольори веб-дизайну можуть бути підібрані для друку на папері або іншій поверхні. PANTONE допомагає працювати в одній команді клієнтам, дизайнерам і друкарям, і бути впевненим в тому, що остаточний продукт буде виглядати саме так, як це замислювалося.
Кольорова палітра CMYK - засновано на 4 основних кольорах, що використовуються в принтерах: Cyan (блакитний), Magenta (пурпурний), Yellow (жовтий) і Key (Ключовий колір, або просто чорний). Кодування у цього простору дуже проста і еквівалентна наявності одного з чотирьох кольорів у відсотках, 70/10/0/0 - значить, що в отриманому кольорі буде 70% блакитного і 10% пурпурового, а значення жовтого і чорного рівні 0%.
Кольорова палітра RGB - засновано на трьох кольорах, які ви бачите, дивлячись на будь-який монітор: червоний, зелений, синій. Отримати один і той же колір на різних моніторах - досить складно, адже існує безліч різних екранів з різними характеристиками. В ідеалі кожен монітор повинен бути відкалібрований (для цього і на Mac, і на Windows є системні утиліти). Кодування квітів в RGB відбувається за допомогою трьох наборів цифр, значення кожного з яких може варіюватися від 0 до 255. Ці значення визначають кількість червоного, зеленого і синього для того, щоб колір інтерпретувався мозком правильно, як хоче того дизайнер. Щоб отримати той же колір, який ми брали з простору CMYK, необхідно вибрати такі параметри: 85/172/238, де значення синього - 238, домінуюче.
У зв'язку з тим, що в просторі RGB розміщується більший спектр кольорів, ніж в CMYK, деякі дизайнери, думаючи, що досягають більшого колірного охоплення роблять свої макети в RGB, а перед друком переводять в CMYK, але всі ці дії не мають ніякого сенсу.
8. Контроль: зміни в проекті
У веб-дизайнерів, як правило, обмежена роль в проекті. Можна сказати, вони створюють початкову версію дизайну, а користувач уже сам перекроює її, використовуючи різні екрани, взаємодіючи з інтерфейсом або навіть міняючи шрифти і їх розміри в настройках браузера.
У друкованому ж продукті все інакше: дизайнер має повний контроль над проектом до моменту друку. Користувач не може впливати на дизайн, тому в друкарям потрібно приймати зважені рішення про кінцевий вигляді продукту - адже після принтера зміни вже не внесеш. У той же час веб-дизайнер має більше поточного контролю над проектом і може вносити правки або навіть переробити дизайн в процесі його використання.
Яким би різним не був підхід до описаних видів дизайну, вони залишаються двома сторонами однієї монети. Навряд чи якась компанія зможе обійтися без того, чи іншого дизайну. Ось чому важливо розуміти основні стовпи на яких тримається веб або друкований дизайн.