# data[].attributes.headline
Історія веб-дизайну: від камяного віку до епохи сучасних технологій

# data[].attributes.subject
Історія веб-дизайну: від камяного віку до епохи сучасних технологій

# data[].attributes.body
Суворі 90-е

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

Перші сайти, перші провайдери, перші веб-дизайнери. Монітори з роздільною здатністю 640х480, підтримують лише 16 кольорів (!). Чорний текст, сині посилання, червоні або рожеві заголовки. Краса!

# data[].attributes.headline
Це зараз за допомогою 

# data[].attributes.body
Це зараз за допомогою сучасних інструментів і технологій навіть школяр за один урок інформатики може абсолютно безкоштовно створити власний сайт. При цьому, дизайн, якість і функціональність цього сайту будуть на порядок вище, ніж у тих перших «ластівок» сайтобудування, коли веб-дизайн створювався з допомогою символів табуляції.

В кінці 1993-го в мережі відбувся довгоочікуваний «прорив» — з’явився перший графічний браузер Mosaic, який поклав початок поліпшення візуальної передачі інформації. З тих пір історія веб-дизайну почала розвиватися шаленими темпами. Всього за кілька років кількість сайтів в інтернеті зросла з кількох сотень до десятків тисяч.

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

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

# data[].attributes.headline
В HTML і веб-дизайні с

# data[].attributes.body
В HTML і веб-дизайні стали активно використовуватися таблиці, за допомогою яких структурувалася вся інформація на веб-сторінці. У той час «розрізанням макетів» займалися не веб-дизайнери, розробники.

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

# data[].attributes.headline
Карамельні 2000-е

# data[].attributes.subject
Карамельні 2000-е

# data[].attributes.body
Ще один якісний прорив історія розвитку web-дизайну зробила в 2000-е роки, коли технологія CSS (Cascading Style Sheets) дозволила відокремити вміст веб-сторінок від їх оформлення. 2004-2006 роки вважаються початком ери WEB-2.0.

# data[].attributes.headline
Спочатку технології не

# data[].attributes.body
Спочатку технології не особливо встигали за модою (згадаймо ті ж закруглені куточки, верстка яких робилася за допомогою зображень), при цьому, мода, в деякому розумінні, «подхлестывала» технології, що знайшло своє відображення в поліпшенні функціональності і юзабіліті сайтів. Тоді ж майстра веб-дизайну почали використовувати у своїх творіннях:

плавні градієнти і м’які кольори;

об’єкти округленої форми;

дзеркальність, глянцевость, «карамель» у кнопках, картинках і іконках;

«спеціальні пропозиції» та бейджі на головній сторінці;

патерни на фон.

# data[].attributes.headline
Хай живе мобільний контент

# data[].attributes.subject
Хай живе мобільний контент

# data[].attributes.body
До 2007-го року перегляд веба на мобільних телефонах був випробуванням не для слабкодухих. Поява iPhone і масове поширення соціальних мереж дало поштовх розвитку мобільних додатків і веб-сайтів.

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

Використання сіток зі стовпцями при розробці макету сайту стало першим кроком до поліпшення ситуації. Веб-дизайнери почали використовувати сітку в 960 пікселів, розділену на 12 стовпців.

# data[].attributes.headline
Наступним кроком стала

# data[].attributes.body
Наступним кроком стала стандартизація елементів сайту: кнопок, меню, форм, навігації, а також створення візуальної бібліотеки з певним кодом, яка дала можливість швидко використовувати кожен елемент. Переможцями стали фреймворки Foundation і Bootstrap, які почали стирати грань між веб-дизайном і програмним кодом.

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

# data[].attributes.headline
Скевоморфизм і адаптивний веб-дизайн

# data[].attributes.subject
Скевоморфизм і адаптивний веб-дизайн

# data[].attributes.body
У 2010-му році веб-дизайнери продовжують використовувати CSS і HTML, проте, все частіше починають застосовувати нову концепцію під назвою «адаптивний веб-дизайн», яка передбачає відображення однакового вмісту за допомогою різних форм макетів. При цьому, розуміння «адаптивності» у клієнтів та постачальників зазвичай істотно відрізняється.

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

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

# data[].attributes.headline
Характерними рисами ск

# data[].attributes.body
Характерними рисами скевоморфизма можна назвати «шкіряний» фон додатки-календаря у iOS або тривимірну іконку «сміттєвого кошика».

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

# data[].attributes.headline
Від складного до простого

# data[].attributes.subject
Від складного до простого

# data[].attributes.body
До загального щастя веб-дизайнерів, в 2012 році маятник моди хитнувся в іншу сторону. Скевоморфизм став лайливим словом, візуальні елементи були максимально спрощені, пріоритет був відданий вмісту. Так з’явився термін «плоский дизайн».

Глянцеві тривимірні кнопки були замінені плоскими векторними іконками і веб-шрифтів (прямо як на світанку веб-дизайну в 1990-е), підтверджуючи вислів «Все нове — це добре забуте старе». У тренді яскраві кольори, цікава типографіка, великі фонові зображення і навіть фонове відео.

# data[].attributes.body
Сьогодні існує кілька нових ідей, які, в принципі, підтримують рух у напрямку «плоского» дизайну (Flat Design), так як він дозволяє ефективно використовувати простір і зосередити увагу користувача на найбільш важливих елементах сайту.

Прекрасно поєднується з Flat 2.0 такий напрямок, як Google Material Design (матеріальний дизайн), з його візуальними підказками у вигляді цікавої гри рухів, світла і тіней.

Зараз у моді також тривалий скролінг, вінтажний стиль з пикселизированными картинками і галактическими фонами, візуальні елементи з великою роздільною здатністю.