Коротка історія веб-дизайну

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

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

Темний вік веб-дизайну (1989)

6b4a39c78e50468f8475f12912c436b5

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

Таблиці — початок (1995)

e5865dbec16f4225a02418cba4742304

Поява на світ браузерів, здатних показувати зображення, було першим кроком у веб-дизайн – такий, яким ми його знаємо сьогодні. Найдоступнішим способом структурування інформації була концепція використання таблиць, які на той момент стали доступні в HTML. Тому приміщення таблиць всередині інших таблиць і змішування статичних осередків з осередками відносних розмірів почалося з книги Девіда Сигела “Creating Killer Sites”. Застосування таблиць в таких цілях здавалося не зовсім правильним, оскільки їх основним призначенням є структурування інформації. І тим не менш, цей метод створення веб-дизайну був найпоширенішим протягом тривалого часу. Була тоді й інша проблема – збереження працездатності цих тендітних структур. У той же час популярність придбало «розрізання макетів» на окремі елементи. Дизайнери малювали красиві макети, а поділом їх на частини поменше і склеюванням їх так, щоб дизайн працював як треба, займалися розробники. З іншого боку, таблиці володіли такими  особливостями, як можливість вирівнювати вміст по вертикалі, визначати його розміри в пікселях і в процентах. Головною перевагою таблиць було те, що вони відтворювали максимально близько структуру сітки. Тоді ж розробники перестали любити зовнішні інтерфейси та їх розробку.

Javascript приходить на поміч (1995)

a0f50c1e319d4d3ca7d6bd2945f188e8

Відповіддю на обмеження HTML був Javascript. Хочете вивести спливаюче вікно? Або вам потрібно налаштувати динамічну зміна розташування елементів? Відповідь одна – Javascript. Однак головна проблема полягала в тому, що Javascript лягав поверх матеріалу, з якого складається веб і, відповідно, повинен був завантажуватися окремо. Нерідко ліниві розробники використовували його для створення швидкої заплатки для коду, проте в умілих руках він здатний перетворитися на дуже потужний інструмент. У наші дні ми воліємо уникати використання Javascript, якщо той же самий елемент може бути реалізований за допомогою CCS, але навіть незважаючи на це, JavaScript сьогодні не втрачає своєї актуальності як в розробці інтерфейсів (jQuery), так і в програмуванні серверної частини (Node. js).

Золотая епоха незалежності – Flash (1996)

00f2d2a2b2c34d5bae5612c7500deacf

З’явлена в 1996 році технологія обіцяла небачену раніше свободу і ставила своєю метою зруйнувати бар’єри, які стримували розвиток веб-дизайну в той час. Дизайнер міг працювати з будь-якими формами, розмірами макетів, анімаціями, взаємодіями і використовувати будь-який шрифт і все це за допомогою одного інструмента – технології Flash. Кінцевий результат роботи упаковувався в один файл, а після цього відправлявся в браузер для відображення. Все це працювало за умови, що у користувача стояла остання версія flash plugin і було достатньо вільного часу для того, щоб почекати, поки вміст завантажитися. Виглядало це чарівно. Той час було золотою епохою яскравих сторінок вітання, ввідних анімацій і різного видуду інтерактивних ефектів. На жаль, технології явно не вистачало відкритості, дружності до пошуку, а споживання ресурсів Flash було по-справжньому великим. Коли Apple вирішили позбутися від нього у своєму першому iPhone (2007), технологія почала згасати, у всякому разі з точки зору перспектив у веб-дизайні.

CSS (1998)

3198fcf0f46a444aa95f490fa4a910ae

 

Приблизно в той же час, що і Flash, з’явився інший, кращий з технічної точки зору спосіб структурування дизайну – Cascading Style Sheets (CSS). Його базова концепція полягала в поділі функцій контейнера вмісту і функцій його подання, таким чином, що сам контент містився в HTML, а його візуальне форматування відбувалося за допомогою CSS. Перші версії технології були далекі від гнучкості, однак найбільшою проблемою була повільна швидкість адаптації браузерів до неї. Для введення повної браузерной підтримки CSS знадобилося кілька років і нерідко його використання супроводжувалося чималою кількістю багів. Одночасно з цим нерідко виходило так, що найновіші CSS-властивості підтримувалися тільки в одному браузері, в той час, як в інших цієї підтримки не було. Для розробників це стало справжнім жахом. Тут також важливо пояснити, що CSS не є мовою написання коду, швидше – мовою оголошення властивостей об’єктів і, якщо питання про те, чи треба дизайнерам вчитися писати код залишається відкритим, то відповідь на питання «Чи слід їм розуміти, як працює CSS?» абсолютно точно буде позитивним.

Підйом мобільного контенту – сітки і фреймворки (2007)

d4fb6e8277a148bf9a38d8f9ef228a76

 

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

Після декількох ітерацій перемогу здобула сітка в 960 px, а поділ на 12 стовпців стало використовуватися дизайнерами. Наступним кроком була стандартизація широко поширених елементів, таких як форми, меню навігації, кнопки, а також створення можливості їх швидкого і простого використання або, просто кажучи – створення бібліотеки візуальних елементів, яка містить в собі весь необхідний код. Переможцями тут стали Bootstrap і Foundation, що також говорить про той факт, що межа між веб-сайтом і додатком стала стиратися. Недоліком підходу стало те, що нові дизайни стали частіше виглядати однаково. Самі ж дизайнери при цьому як і раніше не могли отримати доступ до їх зміни без розуміння того, як працює код.

Адаптивний веб-дизайн (2010)

85ea6fb262ca48a5b55c41fdc5738faf

Ітан Меркот вирішив кинути виклик існуючому підходу, запропонувавши відображати однаковий вміст, використовуючи при цьому різні форми макетів для його подання, назвавши це терміном «Responsive web design» (адаптивний веб-дизайн). Формально, ми все ще продовжуємо використовувати HTML і CSS, тому мова тут йде більше про концептуальне поліпшення.

Щодо цього підходу існує чимало оману. Для дизайнера «адаптивність» означає створення безліч начерків різних макетів, а для клієнта це означає, що все буде працювати на телефоні. Розробник при цьому думає про швидкість завантаження сторінки, про те, як представити користувачеві зображення, про  навантаження елементів із сенсом, про пріоритет мобільної або десктопной версії і так далі … Головна перевага такого підходу полягає в збереженні одного і того ж контенту на різних макетах. На практиці це означає, що один і той же веб-сайт працює скрізь.

Спрощення (2010)

9b88dac227424ad6aacaa4b266d7bac4

Пророблення більшої кількості макетів вимагає більше часу. Виходячи з цього, до нашого спільного щастя, дизайнери вирішили раціоналізувати процес, позбувшись від хитромудрих ефектів тіней і повернувшись назад до витоків дизайну, віддавши пріоритет вмісту. Якісні фотоматеріали, підбір шрифтового оформлення, барвисті ілюстрації та продумані макети – такий дизайн, яким ми створюємо його сьогодні.
Спрощення візуальних елементів, або так званий «плоский дизайн» також є частиною цього процесу. Головна його перевага в тому, що матеріалами, пріоритетності інформації та вмісту в цілому приділяється набагато більше уваги. Глянцеві кнопки замінюються іконками, це дозволяє нам використовувати векторні зображення і шрифти-іконки. Веб-шрифти дозволяють отримати прекрасну типографіку. Найцікавіше тут в тому, що веб був близький до цієї ідеї з самого початку, але ж на те вона і молодість …

Світле майбутнє (2014)

5acb241a53464b38bd5cd52c5bcbc2ee (1)

Всі ці роки візуалізація дизайну і різні спроби його представлення в браузері були Святим Граалем веб-дизайну. Уявіть собі, як дизайнери з легкістю переміщують елементи на екрані, а готовий код при цьому з’являється сам! Мова йде не про зміну порядку елементів як таке, а про повну гнучкість і контроль! Уявіть собі, що розробникам не потрібно турбуватися про сумісність з браузерами і вони, замість цього можуть повністю зосередитися на вирішенні реальної проблеми!

Формально, сьогодні існує кілька нових ідей, які підтримують рух у цьому напрямку. Нові юніти CSS, такі як vh, vw (висота і ширина області перегляду) дозволяють отримати значно більшу гнучкість при позиціонуванні елементів. Вони також вирішують проблему, яка дивувала багатьох дизайнерів: чому центральне вирівнювання по вертикалі в CSS робиться з такою складністю? Ще одна крута ідея, що стала частиною CSS – Flexbox, який дозволяє створювати макети і змінювати їх за допомогою однієї властивості, замість написання купи коду. Ну і нарешті, web components – ще більш грунтовна спроба, яка являє собою пов’язаний між собою набір елементів, таких, наприклад, як галерея або форма реєстрації. Це створює можливість спростити робочий процес, так як елементи стають будівельними блоками, які можуть бути використані багато разів, в тому числі і самостійно.

 

Marta Hudz