Уроки веб-дизайну з нуля. Основи хорошого дизайну

27

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

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

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

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

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

Що таке веб-дизайн?

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

Якщо Ви від народження не володієте художнім смаком, не варто переживати. Головне — знати основи веб-дизайну, а смак з’явиться з досвідом.

Колір

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

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

Принципи колірного кола

Пари кольорів, розташовані один напроти одного, є контрастними. Наприклад, синій з жовтим, пурпурний зелений, блакитний з червоним;

контрастні кольори є взаємовиключними. Тобто, якщо ви збільшите рівень блакитного кольору, це автоматично зменшить рівень червоного. І навпаки;

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

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

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

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

Форма.

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

Лінія може виконувати дві функції: з’єднання і поділ інших об’єктів. Приклад з’єднання:

Приклад поділу:

Прямокутник. У ньому важливо підібрати пропорції. Напевно ви чули про «золотий перетин» — поділ відрізка на частини таким чином, щоб відношення меншої до більшої частини було таким же, як відношення більшої до всієї довжині відрізка. Нижче представлений приклад, в якому точка C ділить відрізок AB так, що AC:AB= CB:AC.

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

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

Коло. Як і трикутник, ця фігура гарна в логотипах, іконках та інших невеликих об’єктах. У великих об’єктах і проксі-дизайні коло застосовується рідко.

Типографіка.

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

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

Крім цього, в оформленні сайту не рекомендується використовувати більше трьох шрифтів:

базовий — для основних матеріалів сайту. Використовуйте читабельні, прості шрифти з зручним міжрядковим інтервалом (приблизно в 1,5 рази більше висоти символів);

акцидентный — для заголовків. Цей шрифт можна виділити не тільки розміром, а й кольором;

додатковий — для навігації, важливої інформації, логотипу меню, цитат і т. д.

На цьому поки все. Наступний урок з веб-дизайну буде стосуватися основ роботи з Photoshop.

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

Не полінуйтеся переглянути портфоліо різних талановитих дизайнерів або сайти відомих компаній і звернути особливу увагу на перераховані вище елементи. Це допоможе Вам розвинути гарний смак і, можливо, виробити свій власний стиль.

Підписуйтесь на наші оновлення і отримуйте уроки веб-дизайну першими. До нових зустрічей!