Основи веб-дизайну. Розбір основних блоків на сайті

35

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

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

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

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

Шапка (header)

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

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

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

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

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

Після того як ми прибрали безглуздий трав’янистий фон, слід вкоротити шапку. Логотип ми поміщаємо в більш відповідну форму, щоб зберегти додаткове місце. До речі, намагайтеся уникати круглих і кривих елементів на своєму сайті. Рідко зустрічаються випадки, коли б вони гармонійно виглядали. Ми використовуємо прямокутні монітори, тому відповідного типу блоки будуть виглядати на порядок краще. Округлити рекомендую лише кути.

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

Щоб шапка не виглядала порожній, доповнимо вільне місце слоганом компанії і номерами телефонів.

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

Інформаційний блок (content)

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

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

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

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

Підвал (footer)

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

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

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

У мене все, до нових зустрічей!