Веб-дизайн для початківців. Що повинен знати кожен веб-дизайнер?

29

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

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

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

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

Принципи хорошого веб-дизайну

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

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

Steven Bradley, відомий блогер, у своїй статті «Design Principles: Dominance, Focal Points And Hierarchy» називає три основних принципи веб-дизайну:

домінація;

точки фокуса;

ієрархія.

У сьогоднішньому уроці web-дизайну для початківців розглянемо ці принципи більш детально. «Для чого це потрібно?» – запитаєте Ви. А ось для чого. Працюючи над проектами, Ви неодноразово будете стикатися з вимогою замовників збільшити розмір яких-небудь елементів, щоб виділити і підкреслити їх. Коли Ви це зробите, то виявите, що тепер подібні маніпуляції потрібно виконати і з іншими об’єктами, щоб зберегти баланс.

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

Принцип 1. Домінація

Якщо порівняти два будь об’єкта в дизайні, то тут можливі два варіанти:

вони повністю ідентичні;

один з них буде домінувати над іншим.

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

Домінацію можна створити, варіюючи наступні властивості елементів:

розмір;

колір;

форма;

текстура;

насиченість;

глибина;

вільний простір;

орієнтація;

сприйманий обсяг і вага.

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

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

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

Принцип 2. Точки фокусу

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

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

Принцип 3. Ієрархія

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

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

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

В цьому прикладі ми бачимо, що кнопка «Proceed to Checkout» виділена червоним кольором, в той час як «Narrow Your Search Results» сіра і знаходиться на одному рівні з посиланнями на продукти і фільтром. Неважко здогадатися, яка з кнопок займає першорядне місце у візуальній ієрархії цього інтерфейсу.

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

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

Ця стаття була Вам корисною? Рекомендуйте нас друзям в соціальних мережах! До нових зустрічей!