Інтерфейс сайту

52

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

1. Сітка

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

автор

Автор: Михайло Найко

Всім привіт, я — Михайло Найко — дизайнер, ілюстратор і блогер. Живу і працюю в Москві. Крім пристрасті до дизайну і веб-технологій, люблю кіно, спорт і свою дівчину) Також дивіться мій блог про веб-дизайні.
Сайт: http://naikom.ru/blog/ – «Блог про веб-дизайні»

Бренд (логотип, слоган тощо), у лівому верхньому куті

Навігація — у верхній частині сайту, а також бажано зліва

Основний зміст — центр сторінки

Оголошення — праворуч сторінки

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

Інтерфейс сайту

На цьому прикладі я намалював уявну сітку

Інтерфейс сайту

Щоб побачити сітку, достатньо подумки поділити зображення прямими лініями.

Інтерфейс сайту

І ще один приклад використання сітки в дизайні .

2. Вертикальна навігація

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

Інтерфейс сайту

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

Інтерфейс сайту

Хороший простий приклад вертикальної навігації

Інтерфейс сайту

Вертикальне меню розташовано ліворуч, під логотипом

3. Горизонтальна навігація

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

Інтерфейс сайту

Звичайне (з гарним дизайном) горизонтальне меню

Інтерфейс сайту

Автори цього меню пішли далі, і додали підкатегорії

Інтерфейс сайту

Ще один приклад гарного оформлення горизонтального меню

4. Випадаючі списки

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

Інтерфейс сайту

Елегантне випадаюче меню

Інтерфейс сайту

Модифіковане меню, додано оформлення картинками

Інтерфейс сайту

Випадаюче меню буває не тільки горизонтальні, але і вертикальним

5. Хлібні крихти

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

Інтерфейс сайту

Поточна сторінка виділяється кольором

Інтерфейс сайту

Поточна сторінка ніяк не виділяється. Автори зіграли на логіці відвідувача)

Інтерфейс сайту

Поточна сторінка ніяк не виділяється. Зате виділені кореневі сторінки

6. Список записів

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

Інтерфейс сайту

Відмінний дизайн: містить заголовок, автора, категорію, кількість коментарів і ретвітів, сам текст, картинку і кнопку «читати далі»

Інтерфейс сайту

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

Інтерфейс сайту

Кожна запис оформлена у вигляді сторінки блокнота

7. Архіви

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

Інтерфейс сайту

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

Інтерфейс сайту

Цей архів містить зручну тимчасову навігацію

Інтерфейс сайту

Відмінний приклад, де поєднується архів по датах і по записах

8. Футер з контентом

Часи простеньких футеров, схоже, йдуть, і в моду входять футеры красиві і корисні. Туди можна помістити ті ж архіви, контакти, інформацію про автора (власника) блогу, меню і ще купу різної корисної інформації. У функції футера цілком може входити залучення відвідувачів для перегляду інших сторінок сайту. Звичайно, бажано його красиво оформити. Як варіант, багато використовують 3-4 колонки, в яких міститися внутрішні посилання та інформація, а так само підписки на RSS і Email.

Інтерфейс сайту

Трехколоночный інформативний футер

Інтерфейс сайту

Приклад відмінної графічного оформлення футера сайту

Інтерфейс сайту

Футер з цікавим елегантним дизайном

9. Нумерація сторінок

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

Інтерфейс сайту

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

Інтерфейс сайту

Один з найбільш часто зустрічаються варіантів оформлення прокрутки сторінок

Інтерфейс сайту

А ось більш цікавий варіант оформлення

10. Модальні вкладки

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

Інтерфейс сайту

На цьому прикладі на кожній новій вкладці — різний тип страви ресторану

Інтерфейс сайту

Тут автор вважав за краще розмістити в одному місці свої роботи, розбивши їх по категоріях

Інтерфейс сайту

Журнал пропонує вибрати відвідувачу той контент, який йому потрібен

11. Беріть участь в системі оцінок.

Більшість сучасних сайтів/блогів спрямовані на взаємодію з користувачем. І багато хто прагнуть зробити свої сторінки все більш інтерактивними.
Розміщуйте на сайт кнопки Stumbleupon / Twitter / Vkontake і т. д. — і ви побачите, як сторінки оживуть.

Інтерфейс сайту

Один з найпопулярніших варіантів — масове додавання іконок соціальних закладок в кінці статті

Інтерфейс сайту

Приклад, у якому автори роблять акцент на соціальні мережі

Інтерфейс сайту

Тут читач може поділитися статтею з друзями, так і відкласти собі в закладки

12. Інформаційна панель

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

Інтерфейс сайту

Google Analytics — один з найбільш яскравих прикладів добре зробленої інформаційної панелі.

Інтерфейс сайту

Ще один приклад хорошого дизайну і юзабіліті при роботі з даними.

Інтерфейс сайту

Графіки використовуються і у відображенні котирувань акцій. Це — один з прикладів оформлення.

13. Проста реєстрація

Всі ми зустрічаємося з формою реєстрації на сайтах, і багато хто з нас змушені з тих чи інших причин реєструватися часто. Думаю, всі погодяться, що пропозиція ввести підтвердження e-mail або складний незрозумілий текст захисту на 3-й сторінці форми реєстрації наганяє тугу. Всі ці надмірності зовсім не спрощують життя відвідувачів. Ось чому важлива максимально проста форма реєстрації. Користувач не повинен думати, що він щось забув вписати, або вдивлятися в символи . Якщо ж вам хочеться витягнути максимум інформації з користувача , зробіть так:
Щоб зареєструватися він повинен ввести логін, пошту і пароль. А після реєстрації запропонуйте йому заповнити інші поля анкети.

Інтерфейс сайту

Відмінний приклад просто форми реєстрації, хоча і не максимально короткий

Інтерфейс сайту

На Vimeo розміщений варіант самої короткої форми реєстрації — всього три(!) поля

Інтерфейс сайту

Facebook — ще один приклад хорошого виконання форми

14. Акценти

Оживіть свою сторінку. Акцентуйте важливі слова/фрази. Грайте розміром шрифтом, кольором, оздобленням. Адже першим ділом відвідувач повинен побачити те, на що ви йому вкажіть. Правда, трохи складніше змусити його побачити частині сторінки в потрібному ПОРЯДКУ. Але і це вирішується.

Інтерфейс сайту

Важливі фрагменти тексту виділені бірюзовим кольором

Інтерфейс сайту

Головна напис сторінки максимально збільшена і написана іншим шрифтом

Інтерфейс сайту

Кожна нова рядок «затухає» щодо попередньої

15. Показ Колекцій

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

Інтерфейс сайту

Автор відобразив свою колекцію фотографій ось в такій сітці

Інтерфейс сайту

На цьому прикладі ми бачимо таке своєрідне відображення дружніх посилань

Інтерфейс сайту

Просте і стильне відображення останніх робіт дизайнера

16. Пошук

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

Інтерфейс сайту

Проста і м’яка форма пошуку по тонам

Інтерфейс сайту

Приклад незвичайного оформлення форми пошуку

Інтерфейс сайту

І ще один приклад нестандартного оформлення нашої форми

17. Форми

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

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

Інтерфейс сайту

На цій сторінці ви можете спостерігати процес поетапного заповнення форми

Інтерфейс сайту

Ще один приклад поетапного заповнення форми. Активна стадія виділяється кольором

Інтерфейс сайту

Інший варіант оформлення — активний процес відкривається в новій вкладці

18. Підписки

У той час як блоги і соціальні мережі набирають популярність, з’явилася тенденція розміщувати кілька кнопок підписки. Як правило, це мінімум RSS і Twitter. Люди намагаються зробити сторінки більш живими і комунікативним, максимально полегшуючи читачам можливість слідкувати за новинами.

Інтерфейс сайту

Разом з кнопками підписки відразу ж вказано кількість передплатників

Інтерфейс сайту

Коли я побачив цей варіант мені відразу кинувся в очі елегантний дизайн

Інтерфейс сайту

Максимально простий варіант — лише кнопки підписки, плюс посилання на соціальні мережі

19. Слайдери

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

Інтерфейс сайту

Відмінний, простий, стильний слайдер.

Інтерфейс сайту

А це — досить поширений приклад слайдера

Інтерфейс сайту

Хороший незвичайний приклад оформлення слайдера

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

Успіхів!

З повагою Найко Михайл.

киберсант-вебмастер

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.