Від автора: становлення веб-дизайну, як і Інтернету, у нашій країні припало на 90-ті роки минулого століття. До цього в комп’ютерних технологіях панував, можна сказати, кам’яний вік, коли про візуальному контенті сайти і мріяти не могли: вони цілком і повністю складалися з тексту. Вперше текст «зустрівся» з зображенням у далекому 1993-му році, і з тих пір почала свій відлік історія веб-дизайну, короткого екскурсу в яку і присвячена моя сьогоднішня стаття.
Суворі 90-е
Незважаючи на те що в епоху становлення веб-дизайну перші веб-сторінки представляли собою просто текст з посиланнями, а про різноманітність шрифтів і спецефектів можна було тільки мріяти, ті наївні, дрімучі часи згадуються веб-розробниками з деякою доброї тугою.
Перші сайти, перші провайдери, перші веб-дизайнери. Монітори з роздільною здатністю 640х480, підтримують лише 16 кольорів (!). Чорний текст, сині посилання, червоні або рожеві заголовки. Краса!
Це зараз за допомогою сучасних інструментів і технологій навіть школяр за один урок інформатики може абсолютно безкоштовно створити власний сайт. При цьому, дизайн, якість і функціональність цього сайту будуть на порядок вище, ніж у тих перших «ластівок» сайтобудування, коли веб-дизайн створювався з допомогою символів табуляції.
В кінці 1993-го в мережі відбувся довгоочікуваний «прорив» — з’явився перший графічний браузер Mosaic, який поклав початок поліпшення візуальної передачі інформації. З тих пір історія веб-дизайну почала розвиватися шаленими темпами. Всього за кілька років кількість сайтів в інтернеті зросла з кількох сотень до десятків тисяч.
У 1996-му році в оформленні веб-сторінок з’явилися анімовані GIF-зображення, яскраві фони і занадто яскраві заголовки. Судячи з усього, те покоління веб-дизайнерів таким чином висловлював свою радість з приводу того, що вони нарешті можуть піти від сірості та буденності.
В HTML і веб-дизайні стали активно використовуватися таблиці, за допомогою яких структурувалася вся інформація на веб-сторінці. У той час «розрізанням макетів» займалися не веб-дизайнери, розробники.
Правда, зберегти працездатність тендітних табличних структур було надзвичайно складно, а можливість використання гарної графіки (особливо з застосуванням Flash-технологій) стримувалася низькими дозволи моніторів і швидкостями передачі інформації. Ось так розробники зрозуміли, що перестали любити зовнішні інтерфейси. Але це вже зовсім інша історія 
Карамельні 2000-е
Ще один якісний прорив історія розвитку web-дизайну зробила в 2000-е роки, коли технологія CSS (Cascading Style Sheets) дозволила відокремити вміст веб-сторінок від їх оформлення. 2004-2006 роки вважаються початком ери WEB-2.0.
Спочатку технології не особливо встигали за модою (згадаймо ті ж закруглені куточки, верстка яких робилася за допомогою зображень), при цьому, мода, в деякому розумінні, «подхлестывала» технології, що знайшло своє відображення в поліпшенні функціональності і юзабіліті сайтів. Тоді ж майстра веб-дизайну почали використовувати у своїх творіннях:
плавні градієнти і м’які кольори;
об’єкти округленої форми;
дзеркальність, глянцевость, «карамель» у кнопках, картинках і іконках;
«спеціальні пропозиції» та бейджі на головній сторінці;
патерни на фон.
Хай живе мобільний контент
До 2007-го року перегляд веба на мобільних телефонах був випробуванням не для слабкодухих. Поява iPhone і масове поширення соціальних мереж дало поштовх розвитку мобільних додатків і веб-сайтів.
Історія web-дизайну ознаменувалася новими проблемами. Чи варто намагатися відобразити повноцінну версію сайта на крихітному екрані мобільного телефону, або від деяких елементів макета краще відмовитися? Куди вставляти рекламу? Як завантажити на телефон весь контент сайту з цієї ганебної швидкістю мобільного інтернету?
Використання сіток зі стовпцями при розробці макету сайту стало першим кроком до поліпшення ситуації. Веб-дизайнери почали використовувати сітку в 960 пікселів, розділену на 12 стовпців.
Наступним кроком стала стандартизація елементів сайту: кнопок, меню, форм, навігації, а також створення візуальної бібліотеки з певним кодом, яка дала можливість швидко використовувати кожен елемент. Переможцями стали фреймворки Foundation і Bootstrap, які почали стирати грань між веб-дизайном і програмним кодом.
Є у цього підходу і недоліки, куди ж без них. Нові дизайни сайтів все частіше виглядають однаково. А веб-дизайнери досі не можуть змінити готові шаблони сайтів без розуміння того, як працює програмний код.
Скевоморфизм і адаптивний веб-дизайн
У 2010-му році веб-дизайнери продовжують використовувати CSS і HTML, проте, все частіше починають застосовувати нову концепцію під назвою «адаптивний веб-дизайн», яка передбачає відображення однакового вмісту за допомогою різних форм макетів. При цьому, розуміння «адаптивності» у клієнтів та постачальників зазвичай істотно відрізняється.
Клієнт думає: «Ага, адаптивний веб-дизайн… Значить, сайт буде добре працювати на телефоні». Розробник ж, в першу чергу, думає про кількість начерків макета, смислового навантаження елементів, швидкості завантаження контенту, візуальних способів подання інформації, пріоритеті десктопної або мобільної версії і т. д.
У 2011-му році у веб-дизайнерів нарешті починає з’являтися художній смак, і на зміну «карамельної» моді приходить натуралістичний дизайн, або скевоморфизм.
Характерними рисами скевоморфизма можна назвати «шкіряний» фон додатки-календаря у iOS або тривимірну іконку «сміттєвого кошика».
Взагалі, цей візуальний стиль передбачав використання тривимірних «тиснених букв», стрічок, «занавесочек», елементів, які виглядають як шкіра, тканина та інші матеріали з вираженою фізичною текстурою і реалістичними швами.
Від складного до простого
До загального щастя веб-дизайнерів, в 2012 році маятник моди хитнувся в іншу сторону. Скевоморфизм став лайливим словом, візуальні елементи були максимально спрощені, пріоритет був відданий вмісту. Так з’явився термін «плоский дизайн».
Глянцеві тривимірні кнопки були замінені плоскими векторними іконками і веб-шрифтів (прямо як на світанку веб-дизайну в 1990-е), підтверджуючи вислів «Все нове — це добре забуте старе». У тренді яскраві кольори, цікава типографіка, великі фонові зображення і навіть фонове відео.
Наш час
Сьогодні існує кілька нових ідей, які, в принципі, підтримують рух у напрямку «плоского» дизайну (Flat Design), так як він дозволяє ефективно використовувати простір і зосередити увагу користувача на найбільш важливих елементах сайту.
Прекрасно поєднується з Flat 2.0 такий напрямок, як Google Material Design (матеріальний дизайн), з його візуальними підказками у вигляді цікавої гри рухів, світла і тіней.
Зараз у моді також тривалий скролінг, вінтажний стиль з пикселизированными картинками і галактическими фонами, візуальні елементи з великою роздільною здатністю.
Сподіваюся, я зміг донести до вас основні події з історії виникнення web-дизайну, які доводять тісний взаємозв’язок змін у мисленні людей і тенденціях веб-дизайну. Звичайно, були і промахи, і удачі, однак, погодьтеся, більшість нововведень пішли підростаючому дизайну тільки на користь.
Якщо вам сподобалася стаття, підписуйтесь на оновлення нашого блогу і діліться ними з друзями. Всім гарного настрою і до нових зустрічей!
