10 речей, які дизайнери друку повинні знати про дизайн екрану

Автор: Laura McKinney

Дата Створення: 9 Квітень 2021

Дата Оновлення: 16 Травень 2024

Зміст

01. Простір необмежений
02. Ви можете використовувати мультимедіа
03. Співпраця є ключовою
04. Один розмір підходить не всім
05. Ваші конструкції не встановлені в камені
06. Користувальницький досвід - це все
07. «Склад» не має значення
08. Макети плавні, не фіксовані
09. Знання основ дуже допомагає
10. Веб-типографіка є скупою
Подальше читання
журнал .net
Журбальний журнал
Список окремо
Подобається це? Не забудьте перевірити:

Перехід від дизайну для друку до дизайну для екрану, а особливо для Інтернету, може бути неприємним процесом. Відчувається, що все повинно бути прямолінійно і просто; у вас є навички дизайну, тож їх слід просто перекласти як-подібне ... так?

На жаль, хоча фундаментальні аспекти гарного дизайну дуже застосовуються - розмір, колір, розташування, пробіли, типографські найкращі практики тощо - існує безліч унікальних характеристик, які роблять перехід від друку до екрану складним завданням.

Тут ми зводимо основні відмінності між дизайном для друку та дизайном екрану на семи загальних принципах. Огляньте їх, і незабаром ви на шляху до піксельної досконалості ...

01. Простір необмежений

Коли ви розробляєте для друку, ви обмежені обсягом сторінки, який ви можете використовувати. Це, як правило, означає, що вам потрібно повідомляти всі свої ключові повідомлення в одному розповсюдженні, що призводить до посилення маркетингу, який не завжди є тонким та вишуканим.

В Інтернеті ви можете використовувати носій, щоб дратувати свої маркетингові повідомлення на практично необмеженому просторі, що дозволяє вам вдосконалити свій підхід. Що найважливіше, не слід автоматично вважати, що одна і та ж копія буде працювати на екрані однаково добре, як у друкованому вигляді; тривалість уваги в Інтернеті коротша, але ви можете поширити свою копію, щоб стати більш вишуканою та тонкою. Ви також можете скористатися перевагами аналітики, щоб побачити шлях, який проходить ваш читач, що дозволяє адаптувати та вдосконалити свою копію.

02. Ви можете використовувати мультимедіа

Однією з найбільших відмінностей між дизайном для друку та Інтернетом є те, що при друку ви обмежуєтесь словами та малюнками, тоді як в Інтернеті ви маєте можливість використовувати різноманітні засоби масової інформації, щоб допомогти розповісти історію, залучити читача та вимагати їхньої уваги. Розумне використання відео, аудіо та взаємодії з користувачами може допомогти вам налагодити стосунки з вашим відвідувачем (читачем), змушуючи їх проводити більше часу на вашому веб-сайті, витрачати більше грошей у вашому інтернет-магазині або рекомендувати ваш вміст більшій кількості людей.

Це не означає, що ви повинні автоматично взувати всі засоби масової інформації, на які можна покласти руки, на сторінку; будь-який вміст повинен додавати цінності користувацькому досвіду, пропонуючи їм досвід або вміст, який вони не можуть отримати в іншому місці. Якщо ви досягнете правильного балансу, ви не тільки вийдете за рамки того, що могли б досягти в друкованому вигляді, але і розвинете лояльних відвідувачів.

03. Співпраця є ключовою

Хоча дизайнери друку, як правило, досить самотня група людей, в Інтернеті набагато більше співпраці - і з поважної причини: важко мати усі навички, необхідні для створення повного веб-досвіду. Можливо, ви вмієте розробляти захоплюючі макети та писати щільні копії, але без можливості кодування PHP та JavaScript ваш веб-сайт буде статичним та неінтелектуальним, або, можливо, ви можете кодувати HTML з найкращими з них, але ви не так гаряче при розробці елементів керування інтерфейсом користувача.

Найбільш успішні веб-сайти поєднують в собі ряд різних технологій, що вимагають різних навичок. Не бійтеся просити допомоги у експертів. Це може бути вартою інвестицією і є частиною того, що робить Інтернет такою жвавою спільнотою.

04. Один розмір підходить не всім

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

Не припускайте, що оскільки ви бачите візуалізацію 300 пікселів як один дюйм на своєму MacBook на сітківці ока, усі інші це побачать. Найпоширеніший підхід - припустити, що 72 пікселі займають дюйм, але це цілком номінально - на екрані все гнучко.

05. Ваші конструкції не встановлені в камені

Щоб розширити попередній пункт, однією з найбільших проблем є відмова від думки, що ваш дизайн встановлений у камені та фіксований зовні. В Інтернеті різні браузери надаватимуть ваш вміст дещо інакше. Налаштування тексту можуть бути замінені відвідувачами, і залежно від розміру екрана та вікна, що використовується, ваш сайт може відображатися абсолютно по-різному (насправді, зараз прийнято найкращу практику, що він повинен відображатися відповідно до розміру екрана / вікна).

Не витрачайте час на те, щоб знайти ідеальне для пікселів збіг між браузерами - ви ніколи цього не досягнете, і одна з сильних сторін дизайну полягає в тому, що це рідина середовища.

06. Користувальницький досвід - це все

На відміну від друку, Інтернет є інтерактивним носієм інформації, який може надавати користувачеві миттєвий зворотний зв'язок. Таким чином, дизайн веб-сайту набагато більше нагадує створення взаємодії з користувачем, ніж дизайн брошури. Вам потрібно продумати, як читач може переміщатися по вашому вмісту, переходячи від сторінки до сторінки.

Майте на увазі, що веб-сайт часто виконує роль посла бренду, тому йому потрібно передати всі цінності бізнесу, який він представляє. Зосередьтеся на зручності використання, роблячи інтерактивні області (такі як навігаційні панелі посилань, галереї зображень та відео) простими для пошуку та використання.

07. «Склад» не має значення

У друкованому виданні вас завжди вчать розробляти так, щоб найважливіший вміст знаходився «вгорі» - частина газети, яка відображається, коли папір складається в стопку.

В Інтернеті все ще є складка; область за межами безпосередньо видимої частини екрану, яку потрібно прокрутити для перегляду; але, на жаль, як веб-дизайнер, ви не можете знати, де знаходиться ця складка на будь-якому екрані браузера.

Проблема полягає в тому, що на пристроях існує так багато різних роздільних здатностей екрану, і користувачі можуть змінювати розмір вікон свого браузера, так що те, що ви бачите як згин на вашому комп’ютері, майже напевно суттєво відрізнятиметься від того, що бачать усі інші.

Замість того, щоб турбуватися про те, де знаходиться складка, заспокойтесь тим, що користувачі Інтернету знають, як прокручувати, і цілком сподобаються концепції. Зробіть, як Fiasco Design, і замість цього зосередьтеся на розробці переконливого, привабливого та захоплюючого вмісту, який спонукає ваших відвідувачів захотіти прокрутити, щоб переглянути більше!

08. Макети плавні, не фіксовані

Однією з найскладніших речей, яку можуть навчитися дизайнери поліграфічних матеріалів, є те, що веб-сторінки можуть бути гнучкими у своєму макеті. Замість того, щоб прописувати області вмісту фіксованого розміру, в Інтернеті окремі текстові поля, зображення та стовпці можна розмірювати відповідно до ширини вікна браузера (області перегляду). Ця різниця означає, що вам потрібно відмовитись від думки, що ви можете повністю контролювати, як буде виглядати ваш дизайн, але це також має свої переваги.

09. Знання основ дуже допомагає

Навіть якщо у вас є хтось інший, хто повинен написати код, розуміння того, як працюють будівельні блоки Інтернету, допомагає подолати багато розчарувань, пов’язаних із розробкою веб-сайту.

Витративши час на вивчення HTML (основного будівельного блоку Інтернету) та CSS (метод, за допомогою якого ми застосовуємо естетичні атрибути до вмісту), допоможе вам зрозуміти як обмеження, так і можливості середовища. Наша стаття Навчання веб-дизайну: найкращі інтернет-ресурси повинні допомогти вам знайти відповідний навчальний ресурс, щоб розпочати.

10. Веб-типографіка є скупою

Донедавна Інтернет обмежувався дуже невеликим вибором «безпечних для веб» шрифтів, що призвело до великої гомогенізації веб-типографії. На щастя, зростає кількість веб-шрифтів, доступних за допомогою таких служб, як Google Web Fonts і TypeKit.

Ці та подібні сервіси мають революційний вплив на типографіку, яку ви побачите в Інтернеті, але є ще деякі проблеми, про які слід знати. Ступінь контролю над вашим типом набагато обмеженіший на екрані, ніж у друкованому. Наприклад, ви все ще можете встановити лідерство, але ніякого контролю над кернінгом немає, і якщо ви хочете використовувати декоративні гліфи, вам потрібно буде забруднити код, щоб вручну замінити форми літер або спеціалізовані підмножинні шрифти.

Подальше читання

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

журнал .net

Журнал .net, назва сестри CreativeBloq, охоплює повний спектр варіантів дизайну та розробки веб-сайтів. Окрім фантастичних підручників, журнал пропонує широкий спектр галузевих коментарів та аналізів, новин та функцій.

Журбальний журнал

Журнал Smashing Magazine містить безліч статей та навчальних посібників з веб-дизайну та розробки, починаючи від основних будівельних блоків і переходячи аж до вдосконаленого кодування JavaScript.

Список окремо

Цей Інтернет-журнал вже давно вважається головним у визначенні найкращих практик та їх прийнятті при розробці екрану. Широкий спектр статей, включаючи великі архіви, охоплює все - від використання шрифтів до підказок та підказок щодо макетування.

Слова: Сем Хемптон-Сміт