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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі