Лекції по web-дизайну

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

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

Знайомство
Я займаюся веб-дизайном з 2007 року. Мій перший досвід був віддалений. Потім я змінила 3 ​​веб-студії і закінчила свою офісну кар'єру на посаді Арт-директора. В даний час я працюю як фрілансер, спілкуюся з клієнтами безпосередньо, виконую роботу починаючи з допомоги в складанні технічного завдання і закінчуючи авторським наглядом над розробкою свого дизайну.

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

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

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

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

Трошки про історію web-дизайну

Веб-дизайн з'явився на просторах колишнього СНД в 1995 році стараннями всім відомого Артемія Лебедєва. Тоді ще ніхто не знав про те що таке сайт (мало хто взагалі знав про інтернет) і йому доводилося робити сайти неіснуючим компаніям, щоб сколотити собі портфоліо і вже з ним пропонувати себе реальним клієнтам. З 1995 року по 2007 пройшло не більше 12 років - це дитячий термін для якого б то не було напрямку в науці або мистецтві (називайте веб-дизайн як хочете, він включає в себе і те й інше). Як нам було вчитися? Точно так само як і іншим образотворчим ремеслам - наслідувати. Протягом багатьох століть, художники освоювали ремесло, копіюючи попередників. Це не докір. Іноді, іншого шляху немає. Або вчишся у інших, черпаючи їх досвід, або винаходиш щось сам і стаєш законодавцем мод, але це неможливо зробити на порожньому місці. Завжди щось передує чомусь.

На сьогоднішній день web-дизайну 22 роки. Для людини це повноліття, але для напрямку - все той же дитячий вік. Однак вже за цей час в веб-дизайні змінилося кілька трендів.

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

Інтернет потрібно було приручити, зробити зрозумілим для користувача. Візьмемо, для прикладу слово "кнопка". Що це? Яка різниця між кнопкою та гіперпосиланням?

Вопрос звернений до аудиторії
Посилання - це професійний термін. Ми знаємо, що клік по посиланню кудись веде, але як пояснити це користувачеві? Як повідомити йому, що сюди треба натискати, щоб потрапити туди, куди йому потрібно?
Хто відповість?

Насправді це потрібно нам (і / або власнику сайта). Ні коли не варто забувати про те, що це нам потрібно, щоб нашими сайтами користувалися. Ми їх робимо для залучення клієнтів. Це наша турбота наділити сайт такими "заманухами", щоб "спіймати" клієнта. Це ми хочемо, щоб людям легше було замовити товар на сайті ніж сходити в магазин.

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

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





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

Вважалося правильним, якщо дизайн сайту взуття містить в собі якісь елементи взуття (наприклад туфельку в футері), сайт про шиття одягу в якихось місцях ніби то прострочений на швейній машинці (або по краях його контенту валяються швейні принади), на сайті з продажу квітів літають пелюстки і т.д. Я зараз говорю не про ті картинки, якими наповнюється каталог, а про ті, які беруть участь в самому дизайні. Кнопки потрібно було зображати так, щоб вони були схожі на кнопку в ліфті або на вимикачі в кімнаті або на настільній лампі (і їх такими і робили, чесне слово). Необхідно було створити такий псевдооб'ем, щоб було інтуїтивно зрозуміло "Натискати тут!"

Ось, наприклад, магазин антикварних подарунків "Лідерподарок" 
http://www.liderpodarok.ru/


Сам стиль сайту, як би витканий з атрибутів антикваріату, шкіри та золота.

або чохли для планшетів і смартфонів
http://brandapple.ru/



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

Щё приклади:

https://web-design.gretthen.com/web-design/favoritti.html

https://web-design.gretthen.com/web-design/vip-handmadecomua/

Це були ті елементи, які відрізняли один дизайн від іншого, робили сайти впізнаваними. У цій впізнаваності полягав елемент вірусності. Користувачі могли описати їх, сказавши комусь: "Пам'ятаєш цей сайт з чохлами, ну той шкіряний ...?" Це був перший тренд, який я застала.

Але сайт на 100% залежить від функціональності. Його зручність, як правило, продиктована технічними вимогами. Якщо сайт гарний, але довго вантажиться то це поганий сайт, користувач з нього піде яким би красивим він не був. Я пам'ятаю, як сиділа на роботі, коли всі вже пішли і 40 хвилин чекала поки завантажиться відео на лебедевской сайті Еплмун (2009). На той момент це був шедевр, який передавався із скайпу в скайп)) зі словами: "Ти це бачив ?!"
Однак, в цей час вже стало зрозуміло, що не всяка, навіть найкрасивіша картинка здатна зробити сайт популярним. Якщо вона довго вантажиться то від неї слід позбутися. Тоді стартувала нова мода на інтро сторінки. Це коли сайт відкривається красивою картинкою (як обкладинка книги), а внутрішні сторінки виконані максимально минималистично. Еплмун - це магазин молодіжного одягу. Супер-пупер 3D анімацію відео розташовувалося на першій сторінці, а самі каталожні сторінки магазину були максимально прості. Це був другий тренд.

Приклади интро сторінок

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

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

Що б обрали саме ви?

Відповідь не така очевидна як здається.
Є незручні сайти, якими все одно всі користуються і будуть користуватися і надалі тому, що вони монополісти.
Є фірми, які і так всі знають ...
Ви знаєте Мерседес? А на сайт заходили?
Для Мерседес має значення скільки буде завантажуватися їх промо сайт?
А якщо мова йде про Харківське ательє індивідуального пошиття одягу?
Її стануть замовляти з Києві ((я натякаю на примірки)? Чи потрібна їм розкрутка на інші міста?
А якщо ми уявимо, що цей салон всім відомий? Так чи важливий для них сайт?
Можуть вони собі дозволити який не будь феєричний дизайн з 3D анімацією, який буде довго грузиться, за те повністю задовольнить їх іміджеві вимоги?

У мене були такі замовники, які так і сказали: "Нас і так всі знають. Сайт нам погоди не зробить. Нам він потрібен тільки для того, щоб друкувати його на візитках. Розкручувати ми його не збираємось, тому про просування можна не турбуватися. Зробіть нам космос! " - це дослівно.

І ось, що я зробила "Леді АЛЕ" (2012).

http://lady-no.ru/



А в якості вподобаного прикладу вони вибрали ось цей сайт San Marco (2011), який розкручувати теж ні хто не планував.
https://web-design.gretthen.com/web-design/sanmarko.html



Результатом залишилися дуже задоволені.

У цей же самий час з'являється стиль веб.2.0. Цей термін більше ставився до розробки ніж до дизайну, але дизайн не міг не відреагувати. Приклад веб.2.0 - youtube.com. Це здатність контенту додаватися третіми особами (користувачами) без допомоги адмінів. Зрозуміло, контент не повинен страждати естетично від таких змін. Звідси нові вимоги: всі елементи дизайну повинні однаково добре поєднуватися один з одним в якій би послідовності вони не були розкидані. Це можна порівняти з калейдоскопом. Як не крути, все одно гарний візерунок. У цей час з'явилися епловскіе скляні кнопки. Ось їх як не розкидуй - все одно блищать))
Не можу сказати, що цей тренд щось на щось змінив. Він розвивався поряд з попереднім стилем. У замовника можна було запитати: "Ви хочете зробити так чи так?" Швидше, можна сказати, що він щось доповнив і збагатив. На ньому побудовані соціальні мережі, але не всім власникам сайтів потрібна саме соціальна мережа. Може бути потрібен корпоративний сайт або лендінг. Тому тут зміни тренда не відбулося.

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


https://mybeautytea.com/cart/




http://www.minon.com.tr/en/who-is-she/

http://www.frenchcuisse.com/

Всі попередні приклади сторінок вже не існують в інтернеті. Їх тренд змінився рівно тоді, коли я про це говорила. Важко назвати точну дату зміни. Орієнтовно, в проміжку між 2007 і 2017 роками.
Потім в моду поступово почав входити мобільний інтернет і на якийсь короткий час в нашій сфері з'явилося таке поняття як вап-сайти, мобільні версії або телефонні сайти. Це теж тренд, але він якось так стрімко промайнув, що я навіть не встигла поповнити їм своє портфоліо. Йому на зміну швидко прийшов адаптив і ось тут почалася нова ера.

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

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

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

Домовимося що на наступний урок кожен з вас підготує мені по 4 посилання інтернет магазинів 2 з яких ви вважаєте вдалими і 2 - невдалими і пояснив би чому. Зараз мене цікавить ваша думка як користувачів, цікавить критика на рівні подобається-не подобається і можливі рішення знову ж таки, як користувача. Як би ви хотіли, щоб вас обслуговували? Як вам буде зручно?