W3C та JavaScript — 2000-го року.

Світова асоціація з підтримки стандартизації веб-дизайну W3C офіційно рекомендує використовувати на сторінках мову JavaScript й розміщує в себе на сайті специфікації. Крім того, були ще спроби у впровадженні програмування на стороні клієнта, але жодна не заслуговувала уваги так сильно, як JS.

Вже через рік гарним тоном в оформленні графічних інтерфейсів на сайтах був не Flash, а JavaScript. Flash займав своє місце, а от прості елементи, яким потрібна була динаміка (типу випадаючих меню), реалізовувався за допомогою JavaScript. І вже в 2002 році 99% всіх браузерів підтримувало JavaScript. Не дивлячись на те, що JavaScript, PHP та CSS є технічною складовою сайтобудівництва, вони заслуговують на увагу тим, що стали основою для кардинально іншого бачення веб-дизайну, який згодом назвуть WEB 2.0, наче перекресливши ті здобутки й принципи які були до того часу [12].

Упровадження технології WEB 2.0 — 2005 рік.

Термін взято з публікації засновника найуспішнішої компанії з комп’ютерної літератури — O’REILLY — Тіма О’Рейлі під заголовком «Tim O’Reilly — What Is Web 2.0». У статті Тім розповідає про основні технологічні й естетичні відмінності попереднього покоління Інтернет-дизайну й теперішнього (Додаток В, рисунок 1.1.1). Згідно його думки, основними принципами в дизайні стали:

- простота;

- центральне вирівнювання;

- невелика кількість колонок;

- окрема шапка;

- максимально проста навігація;

- чіткі логотипи;

- крупний текст;

- яскраві кольори;

- 3D Ефекти;

- градієнти;

- оригінальні іконки.

Якщо можна було б описати дизайн в стилі Web 2.0 одним словом, то це буде слово «Простота». Сьогодні прості, сміливі та елегантні рішення в дизайні, дозволяють сказати більше, використовуючи менше слів:

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

- вони використовують не багато слів, але говорять більше, і ретельно підбирають зображення для досягнення бажаного ефекту;

- вони відкидають ідею про те, що дизайнер не можете передбачити, чого відвідувачі хочуть від вашого сайту [11].

Поява планшетів та смартфонів — 2009 рік.

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

Занепад Flash, розробка HTML5 — 2009 рік.

Flash, нажаль, стає сповненим помилок, із-за нього підвисають браузери. Йому потрібні постійні оновлення безпеки. З флеша незручно копіювати інформацію і під пошукові системи він зовсім не оптимізований. В еру інформаційних технологій це не допустимо. Flash офіційно не підтримується основними мобільними платформами — Android, MacOS, а це означає, що кінець ери Flash-технологій вже близький, на місце йому приходить новий стандарт Інтернет-розмітки — HTML 5 (Додаток В, рисунок 1.1.2).

Підтримка HTML5 браузерами — 2011 рік.

Офіційно релізу HTML5 ще не відбулося, але наробки вже використовуються й підтримуються найновішими версіями браузерів Internet Explorer, Firefox, Opera, Chrome. В тестовий режим відображення відео переходять багато порталів, в тому числі YouTube.

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

Зараз інструментів при достатньо, але виникла інша проблема — дизайн має бути зручним для різних пристроїв, різного розміру та засобів керування. Відповідно, веб-дизайнер має працювати в команді з технологами й можливо частково мислити, як технолог [15].

Світле майбутнє — 2014 рік.

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

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

1.2 Основні тенденції у сучасному веб-дизайні

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

Представляємо вашій увазі основні зміни, новітні елементи, інструменти і нові підходи, що завоювали особливе місце в веб-дизайні на стиці 2011 та 2012 років.

Використання CSS3 + HTML 5 — сама несподівана і поширена серед веб дизайнерів тенденція останніх місяців. Відмовившись від Flash, на користь надійної та перевіреної часом мови програмування HTML5, що забезпечує велику гнучкість в роботі та цілісність взаємодії даних / зображень / відео / аудіо, з’явилася величезна можливість прискорити процес створення ескізів сайтів.

Не дивлячись на те, що не всі ще браузери освоїлися з CSS3, а HTML5 зараз працює з Firefox 3.5 та пізнішими його версіями, Chrome, Safari, Opera і Internet Explorer 8. Однак, за допомогою CSS3 легко створюються сучасні витончено-компактні анімовані об’єкти.

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

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

За допомогою CSS3, веб дизайнери вже не конструюють окремо-спрощені сайти, а просто ставлять налаштування під мобільні параметри в структурі веб-ресурсу. Оскільки, в наш час частіше купують смартфони та планшети, ніж персональні комп’ютери, веб-сайти повинні якісно і повністю відображати всю інформацію на мініатюрному дисплеї, як і на великих моніторах [11].

Використання ефекту Parallax і зміщеної прокрутки Parallax Scrolling — допоможе посилити відчуття об’ємності та глибини, створюючи просторовий дизайн ескізів сайтів. Це одна з перспективних веб-тенденцій дизайну 2012 року, створювана за допомогою різних CSS-вивертів, модулів jQuery, засобами HTML5, javascript і Flash технологій.

Типографіка — використання власних ексклюзивних шрифтів в структурі сайтів, завдяки сучасним інструментам — WhatTheFont, CSS Typeset і Typeteste, розширюють можливості та втілюють креативні ідеї сучасних гуру веб-дизайну.

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

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

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

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

З кожним роком у веб-дизайні змінюються тенденції: щось приходить нове, щось застаріває і зникає.

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

Тенденції веб-дизайну 2014 року продовжують основний напрямок у розвитку веб-дизайну в 2013 році — прагнення до простоти і мінімалізму. Так, як і раніше актуальним є «плоский» дизайн сайтів, створення адаптивного дизайну для використання сайтів як у браузерах на ПК, так і в браузерах мобільних пристроїв, застосування великих шрифтів, відмова від великої кількості flash-елементів на сторінках. Крім того, збереглася популярність використання великих зображень у якості фону сайтів, фіксації навігаційного меню при вертикальній прокрутці тощо.

Ще з тих трендів 2013 року, які перейшли у 2014 рік, можна згадати застосування паралакс-ефекту, активне використання відеороликів у контенті сайтів, нестандартний підхід до навігації. А з «найсвіжіших» тенденцій 2014 року варто виділити великоформатні відео в якості фонів сайтів, застосування простих колірних схем в оформленні сторінок, а також анімації, яка активується при скролінгу. Всі ці тренди отримали в 2014 році розвиток, і багато як зарубіжних, так і вітчизняних сайтів уже взяли їх собі на озброєння [10].

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

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

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

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

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

Впливові фактори на дизайн сайтів. Перш за все на дизайн сайтів має великий вплив апаратне забезпечення Всесвітньої Мережі. У ті, що давно минули, коли до 90% користувачів Інтернет використовували комутований доступ, а швидкість серфінгу визначалася швидкісними можливостями модему, а також якістю АТС, виробилися якісь принципи створення web-сторінок, якими використовувалися при розробці дизайну сайтів тих років. Одним з основних показників, що визначають структуру і зовнішній вигляд web-сайтів, була швидкість завантаження сторінки. І це зрозуміло, тому що реальна швидкість передачі даних в той час становила в середньому на виході 2-5 кб/с. Звідси з'явилися обмеження на обсяг розміщується на сторінці інформації, використання графіки, flash-анімації та ін.

В даний час за даними деяких незалежних досліджень (зокрема, що проводяться агентством ROMIR Monitoring) у великих містах Росії та України кількість користувачів, що використовують широкосмугові канали доступу в Інтернет або стали клієнтами локальних мереж доходить до 60-80%. З огляду на той факт, що перехід клієнтів на високошвидкісний ADSL-доступ в Дніпропетровську, Києві, Харкові, Запоріжжі та інших містах України в останні роки став масовим явищем, можна спрогнозувати що найближчим часом, число клієнтів, які використовують комутований доступ в Інтернет буде не більше 10-12% у містах і не більше 30% в середньому по Україні [16].

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

Можна ще згадати про деякі обмеження, які стрімко йдуть у минуле. Наприклад, не слід оптимізувати дизайн web-сайту під застарілі монітори з роздільною здатністю екрану 640Х480 800Х600 і, або під браузер Nescape Navigator 1.0. Користувачів, які в даний час використовують монітори з такою роздільною здатністю для перегляду web-сторінок або користуються таким "доісторичним" браузером вже практично не залишилося, в усякому разі їх просто неможливо знайти серед потенційних клієнтів, наприклад, бізнес-авіації, або потенційних відвідувачів ресторанного комплексу, або у відділах постачання підприємств. А обмеження, які доводиться накладати на дизайн сторінок в такому разі, значно знижують привабливість web-сайту.

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

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

1. Flat Design

В дослівному перекладі це означає «плоский» дизайн. У 2013 році компанія Apple, законодавець мод в сфері дизайну інтерфейсів випустила нову IOS 7, яка на противагу минулим версіями стала абсолютно «плоскою». Відійшли важкі тіні і градієнти, які значно обтяжували програми та гальмували його роботу. Зараз все спрямовується на максимум продуктивності.

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

«Плоский» дизайн вносить легкість, як візуальну, так і в частині продуктивності [11].

2. Clean Design

«Clean», що в перекладі на українську можна перекласти як «чистий» дизайн. Основний фон сайту, найчастіше білий. Переважають також сірі, чорні, рідше сині кольори. Поява великого числа чисто «біло-чорних» сайтів тепер рідкість. Кольори отримувані «складним» змішанням або «брудних» відтінків, так званий «гранжевий» стають неактуальними. Найчастіше використовуються або «чисті» яскраві кольори, або кольору пастельні, тобто дають відчуття «м'якості», «чистоти».

У створенні «чистоти» на сайті все також продовжуємо використовувати стиль «мінімалізму», «чисте» простір, відсутність зайвих елементів. «Чистота» у всьому! Основний девіз.

3. Blur Design

Тобто дизайн, який використовує ефекти «розмиття». Цей тренд відчувався і в минулому році, але в новому році до нього додаються всі вищесказані напрямки. Забирається зайвий «шум», тобто «точки» на зображеннях, часто використовуються напівпрозорі освітлюючі шари, які накладаються зверху на зображення або з'являються на сайті у вигляді спливаючих вікон, знову ж таки в IOS 7 це видно наочно.

4. Adaptive design

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

Знову ж пов'язано з дедалі більшим використанням мобільних пристроїв. Адаптивний дизайн сайту — це такий тип дизайну, коли сам сайт розуміє з якого пристрою заходить користувач, і не просто «підсовує» йому іншу «мобільну» версію сайту, а як би «перебудовує» дизайн сайту залежно від ширини екрану пристрою, деякі блоки сайту при цьому можуть зміщуватися. Найбільш значущі залишаються вгорі, менш значимі блоки йдуть вниз. Для того, щоб дизайн був адаптивним, все це потрібно продумувати відразу на етапі створення загального дизайну. Тому що не кожен дизайн сайту може стати адаптивним, адже це накладає певні обмеження [15].

5. Незвичайні візуальні ефекти руху.

Зараз головним «анти-трендом», є технологія Flash, коли на сайті є якісь елементи анімації. Компанія Apple, наприклад, на своїх пристроях вже кілька років не підтримує цю технологію, і тому на MAC і Ipad в місці, де повинні були бути візуальні ефекти, можна побачити просто білі прямокутники.

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

6. Parallax Scrolling

Головним хітом у веб-дизайні стає техніка паралакс скролінгу. Коли за допомогою руху різних верств один щодо одного (коли ми рухаємо коліщатком миші) створюється відчуття об'ємного руху або тривимірного простору, або просто незвичайного руху шарів на сайті.

Спливаючі елементи на сайті

Також дуже популярним стає присутність на сайті «спливаючих елементів». Знову ж таки це правило, тільки ще більше посилює вищезгадані тенденції. Наявність таких елементів дозволяє полегшити сайт, і спочатку показувати користувачеві «повітряні» і «полегшені сторінки», зате при певних діях, поява і спливання нових елементів тільки підстьобує залученість користувача в процес, і зацікавлює його [6].