Слюсарчук і революції в цісарстві веб-дизайну

Лекція відомого українського web-дизайнера Олега Слюсарчука про еволюцію web-дизайну, еру розумних сайтів, responsive революцію, майбутнє ЗМІ в планшетах прочитана на кафедрі нових медіа ЛНУ ім. Івана Франка.

Журналістика і медіа є одними із рушійних сил пошуку нових контентних рішень, нових платформ для того, аби якось працювало наше світосприйняття, наші системи обміну інформацією. Без сумніву, інтернетсьогодні є центром концетрації процесів комунікації. Відтак, відповіді на запитання, умовно, як починався сучасний сам інтернет варто шукати у історії Web.

Спочатку був документ

Отже, поняття Web-сайт, напевно одне із перших явищ, яким можна характеризувати виникнення Інтернет, з’явилось на початку 1990-х років. Ще наприкінці 80-их першу сторінку Web створив Тім Беренс Лі. Вона виглядала як набір кількох документів, які були пов’язані між собою посиланнями – те, що ми сьогодні називаємо лінками.

У 1991 році вийшла перша версія мови html (hypertextmarkuplanguage, мова розмітки гіпертексту). Вонадала можливість формувати Web-сторінки і сприймати їх броузерами. Винахід Html без перебільшення вважаюті початком розвиткувсім нам відомого WWW (WorldWideWeb – багатомовне сховище інформації в електронному вигляді). Перебуваючи у постійому розвитку, у 1994 році виходить варіант html 2.0, що дав можливість додавати малюнки, пробувати якось працювати з формами відправки данних.

В середині 1990-х Web-дизайн почав розвиватися в напрямку табличної верстки, зокрема, у 1997 році з’явилась html 3.2. Весь сайт розробляли на основі таблиць: створений дизайнером малюночок акуратно різали на частинки, складали в таблички і таким чином будували інтерфейс сайту.

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

У цей же час з’являються системи, які дозволяють безкоштовно створювати сайти. У нас найпопулярнішими були narod.ru, на Заході –geocities, котрий невдовзі викупила Yahoo!.

У 1995 році компанія Macromedia випустила власний продукт під назвою Flash (сьогодні власником його є Adobe). В основі цієї технології лежить векторний морфінг – це плавне перетікання одного об’єкта в інший. Інтеграція в сайти Flash-об'єктів дозволила дизайнерам використовувати складні мультиплікаційні сцени, вишукані анімовані картинки. Так з’явились Flash-ігри, рекламні банери та мультимедійні перезентації.

Кінець 90-х років– зоряний час Flash-технологій. Тоді веб-дизайн мав не прикладне, а швидше промоційне значення, естетичне. Більшість компаній відкривали сайти не так для того, аби залучити клієнтів чи надати якісь сервіси, як показати, що вони існують в інтернеті.

Відтак, у 1997 році вперше розробники запропонували технологію CSS(англ. CascadingStyleSheets) – спеціальна мова, яку використувують для відображення сторінок, написаних мовами розмітки даних (наприклад, Html), яка значно розширила можливості вебу. В 1998 році – php3 (англ. PHP: HypertextPreprocessor ) – скриптова мова програмування загального призначеня стає найпопулярнішою серед девелоперів, а у 1999 році своє місце займають існуючі зараз стандарти – html4.0

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

Бомбове десятиліття

Бомбовими для розвитку Web–дизайну стали 2000. Це пов’язано з розвитком технології CSS (каскадні або блочні стилі верстки) та блочній побудові стуруктури сайту, що прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки – це розділення змісту сторінки (даних) та їх візуальної презентації. Це значно спростило життя девелоперам (розробникам, програмістам) і, умовно, ще більше розширило інтернет-простір для яскравої уяви веб-дизайнерів.

Технологія java-script (створення сценаріїв для формування поведінки певних об’єктів на сайті, базується на принципах прототипного програмування) зробила сайти багатозадачними. До виникнення цієї мовисайти не могли бути максимально підлаштованими до потреб юзерів (користувачів): було чітко визначене меню, ми на нього клікали і потрапляли винятково у визначені рамки певного пункту заданого меню. Java-script дозволив робити розсувні меню, слайдери, які пролистувалися, сайти немов почали реагувати на нашу поведінку, відповідати адекватно, співпрацювати з користувачем, вони ніби ожили. До того ж стали красивими.

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

В 2005 році технологія Flash навчилась працювати з відео. Тепер, щоб переглянути відео в інтернеті не обовязково ставити необхідну програму у себе на ПК, достатньо «вмонтувати» відео-Flash-player просто у тіло сайту, без завантаження, прямо з глобальної павутини.

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

Кінець 2000 – це період web 2.0. Це - соціальні мережі, RSS (XML-формат, що використовується для публікації та постачання інформації, що часто змінюється. Документ в стандарті RSS (який також інколи називають «стрічкою», «веб-стрічкою» або «каналом») складається з повного або часткового тексту і метаданих (дата і авторство), велика активність користувачів всесвітньою павутиною, інтернет виходить на перше місце серед засобів комунікації.

Одним із найцікавіших результатів Web-революції є її вплив на свідомість людини. Умовно, з початку 90-их до кіняця 2000-х відбувся своєрдіний перехід користувачів відстану «Інтернет – розвага» до «Інтернет – мій робочий простір». Сьогоднівсе частіше створюють додаткові веб-сервіси,які дозволяють виконувати найнеобхіднішу, спеціалізовану роботу у мережі. Умовно, робочий стіл вашого комп’ютера переноситься у глобальну павутину: тут ви переглядаєте відео, слухаєте музику, креслите , малюєте і пишите, тут же все зберігаєте, і т.д. Зникає потреба програмувати десктопні речі, щоб мати якісь сервіси на своєму особистому ПК. Як приклад, GoogleDocs.

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

Відповідно, веб-дизайнпереорієнтовується: ми не тільки продаємо товари, не лише просуваємо якийсь свій брендз допомогою інтернету, а намагаємось надавати послуги в інтернеті, і, водночас, заробляти на цьому. Так, розвиваються переважно cloud-платформи (хочеш більший ящик на дропбокс – доплати; хочеш збільшити об’єм дисквого простору на поштовій скринці – купи собі; хочеш якісного легального відео та музики – заплати і качай).

Перша справжня мобільна революція

Початком мобільної революції без перебільшення можна вважати презентацію Стівом Джобсом IPhone у 2007 році. Тоді це, умовно кажучи, була інтеграція телефону з модним тоді mp3-плеєромiPod. Маркетингова революція, яка зрештою сприяла блискавичному розвитковімобільних мультимедій відбулась в той момент, коли програмне забезпечення для системи iPhoneOSдозволено було виробляти стороннім розробникам. Потім відкрився магазин додатків для iPhoneAppStore, де кожен охочий міг завантажити собі якусь аплікацію, відповідно, розробники почали створювати і продавати власні аплікації та контент.

Програмне забезпечення для мобільних телефонів, тобто, аплікаціії, склали конкуренцію існуючим веб-сервісам. Наприклад, Instagram – це аплікація ”заточена під мобайл”, це ціла соціальна мережа, побудована на обміні фотографіями з мобільних телефонів. Або Forsquare – соцмережа, базована на «чекінах» (геомітках) користувачів у тому чи іншому місці на карті.

Сьогодні смартфони, що виросли зі штанців iPhone є незамінними девайсами мільйонів користувачів.

Понад те, Джобсова система зав’язалась в таку «біржову» гру «купи-продай», що, гадаю, якби iPhone не придумав Стів, то його мав би придумати хтось інший. Бо, наприклад, модель надприбуткового сьогодні AppStore – це бізнес, який не зникне вже мабуть ніколи.

В 2010 році Apple випускає перший планшетний ПК – IРаd. Операційна системаiPhoneOSстає кросплатформенною (програмне забезпечення, що працює більше ніж на одній апаратній платформі), відтоді називається IOS та працює вже дляiPаd, iPhone, а також для iPodTouch. В 2012 році Apple випускає iPad-mini, і вступає в конкуренцію на ринкусемидюймових дисплеїв.

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

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

Скевоморфізм – невиліковна хвороба Apple

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

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

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

Відповідно, аби сьогодні зробити добротну аплікацію для iOS, нам потрібно додавати зображення для звичайного iPhone, додавати вдвічі збільшене для Retina-дисплей, аз появоюiPhone5 збільшилась діагональ дисплеїв,відповідно, виникла необхідність робити ще й третій варіант.

Мінливості ринку

Не все у світі має бути iPhone. Так подумали якось у Google і в 2009 запустили перший реліз Android для мобільних пристроїв. Спочатку перехрестились старожили, які, умовно кажучи, «на тлі айфонів» втратили левові частки ринку. Адже на Androidвсі додатки були написані на вже добре пізнаній мові Java, відповідно, потреба мати окрему програмну оболонку, типу iOS, зникла.

Водночас, не шукаючи кращого від кращого Googleпропонує власний «AppStore», так з’являється спочатку AndroidMarket, а ще пізніше, за прикладом AppStore і iTunes, вони об’єднують контент разом з аплікаціями і називають це GooglePlay. З апдейтом (оновленням) дизайну вони також виявились швидшими за Apple. ТакAndroid 4.1 і 4.2 запрацювали в цілком новому інтерфейсі.

У оновленої операційки контроли (функціональні клавіші) перестали бути обов’язково фізичними для мобільних телефонів. Android переніс їх так, що вони, які і в IPhone, можуть працювати також на дотик до екрану. Він позбувся скевоморфізму, став схожим на flat (сучасний напрямок в дизайні, що означає повернненя до плоскості). Ввважається, що термін flat-дизайн вперше вжив Ален Грінштейн (AllenGrinshtein, Layervault), який заявив, що йому більше не цікава боротьба за красиві тіні і градієнти. Саме такий дизайн зараз в тренді, його вибирають GoogleіMicrosoft. Appleтакож на підході, судячи із заяви головного дизайнера компанії Джонатана Айва. Колись давно у розробників не було іншого виходу, окрім як робити плоский дизайн. Однак сьогодні, коли доступними є величезна кількість технологій, простота знову у моді.

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

Станом на сьогодні Androidстав найбільш поширеною операційною системою для мобільних телефонів та планшетних ПК. Умовно: якщо Windows вважати синонімом операційної системи для ПК, то Android став синонімом операційки для мобільнихтелефонів.

До речі про Windows. Microsoft у цей час теж не сидів склавши руки: спочатку вони запустили WindowsPhone 7, згодом і WindowsPhone 8. Інтерфейс цієї ОС побудований на так званих інтерактивних плитках та горизонтальній навігації.Полігоном для випробовувань Microsoft обрав колись головного гравця на ринку мобільних телефонів – Nokia, замінивши архаїчний Symbian.

До слова, останній, Windows 8 особисто у мене викликає когнітивний дисонанс. Спроба поєднати два інтерфейси (звичний та для мобільних пристроїв) на одному десктопі персонального комп’ютера вигляадає утопічною. Гадаю, Microsoft тут помилився: як мобільна система WindowsPhone 8 має право на життя, як система для планшетів теж, проте користуватись нею для десктопів – це дискомфорт.

Мобільні перемагають

Відсоток людей, які дивляться мобільний інтернет постійно зростає. За прогнозами, до 2015 року мобільний трафік пересічеться і пережене трафік, який ми віддаємо з десктопів і з ноутбуків. Відтак, перед Web постає величезне запитання: як йому пристосуватись до нових умов?

Логічних рішень є кілька. Перше – це мобільні версії сайтів, друге – окремі мобільні аплікації. Останнє оптимальне, але трудомістке і затратне.

В цьому місці виникає потреба у створенні сайтів-трансформерів, а звідси – поняття адаптивний дизайн. Web із адаптивним дизайном – це єдиний сайт, на одному домені, який підлаштовується під вимоги девайсу, з якого ви на нього дивитесь (смартфон, планшет чи десктоп). Наприклад, сайт компанії Eleks.

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

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

Серед українських медій піонером адаптивного дизаййну є Forbеs.ua, в Росії це спробували зробити РИА-НОВОСТИ. Першим серед світових ЗМІ сайт трансформер своїм користувачам запропонував BostonGlobe. ВВС пробували це зробити лише на мобайл-девайсах.

А що з динозаврами?

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

Багато з них намагаються робити все маленькими, квантовими стрибками. До прикладу USAToday за останній час кардинально поміняли сприйняття дизайну. Вони хоч і не зробили повний Responsive, але вже дозволили адаптувати сайт під мобільні пристрої.

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

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