Що повинен знати і вміти кожен веб-дизайнер, щоб не вдарити в бруд обличчям

32

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

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

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

До речі, в інтернеті ви знайдете чимало корисних відеокурсів, які можуть бути як платними, так і безкоштовними. Пропоную вашій увазі кілька важливих термінів, які повинен знати кожен веб-дизайнер, щоб не вдарити в бруд обличчям. Читаємо і запам’ятовуємо:

1. Векторна графіка.

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

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

2. Растрова графіка.

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

3. CMYK.

CMYK — абревіатура, яка розшифровується як Cyan, Magenta, Yellow, Key Color. Ця колірна схема традиційно використовується для друку. Чорнило всіх принтерів складаються саме з цих квітів, а при їх комбінації ми отримуємо ті відтінки, які бачимо на роздрукованому зображенні.

4. RGB.

Як і CMYK, RGB являє собою кольорову схему і, як ви, напевно, здогадалися, теж є абревіатурою, що розшифровується як Red, Green, Blue. Але, якщо сфери впливу схеми кольорів CMYK обмежуються однією лише печаткою, то схему RGB використовують всі сучасні комп’ютерні монітори. Тому RGB — це головна колірна схема в роботі веб-дизайнерів.

5. Адаптивний дизайн.

Як ми з’ясували, в обов’язку веб-дизайнера входить не тільки оформлення. Юзабіліті веб-дизайні також відіграє вагому роль. До речі, одна з наших статей («Юзабіліті в веб-дизайні, або як оцінити свій сайт з погляду користувача») розкриває тему юзабіліті більш докладно.

Комп’ютер давно перестав бути єдиним способом використання інтернету. Сьогодні ми можемо скористатися смартфоном або планшетом. Тому й дизайн сайту повинен підходити під використовуються мобільні пристрої.
До цього питання варто підходити зі значним ступенем відповідальності, адже, якщо ваш дизайн стане адаптивним, то шанси на високу відвідуваність зростуть приблизно на 50%.

6. Плоский дизайн.

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

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

7. Скевоморфизм.

Можна сказати, що скевоморфизм — це антонім поняття «плоский дизайн». Суть скевоморфизма полягає в доданні об’єктів реалістичного, об’ємного вигляду. Простіше кажучи, об’єкти не повинні відрізнятися від тих, якими ми їх бачимо в реальному житті.

Класичним прикладом служить старий інтерфейс Apple, де іконки виглядали досить реалістично. Такі об’єкти, як годинник, календар, калькулятор, компас і т. д., мали такий самий вигляд, як і в реальності.

8. Метро-інтерфейс.

Цей стиль був розроблений компанією Microsoft. Джерелом натхнення для його розробки послужили знаки дорожнього руху. Концепція метро-інтерфейсу полягає в тому, що дизайн розглядається, насамперед, як робочий простір, а не як об’єкт милування і захоплення. Тому дизайн повинен бути таким же простим і зрозумілим, як знаки на дорогах.

9. Плитка.

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

10. Верхня половина смуги.

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

11. Довга прокрутка.

Останнім часом «довга прокрутка» все частіше використовується web-дизайнерами при розробці дизайну сайтів. Принцип роботи дизайну цього типу досить простий: довгі сторінки вимагають постійного прокручування.

12. Сайт-візитка.

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

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

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

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