Зразки оформлення сайту

Не будемо вдаватися в цифри та підрахунки, так як неможливо визначити скільки вже існує в Інтернеті сайтів. Щодня тисячі, а то й сотні тисяч сайтів руйнуються і на їх місці з’являються нові. У чому ж криється причина невдач? Чому люди заходячи на сайт, відразу його покидають? Відповідь проста і лежить він прямо перед очима – це оформлення сайту.

Ефект тяжіння

Погодьтеся, у кожного є набір певних сайтів, які відвідуються день день. Упевнений, у більшості в закладках знаходяться обрані сайти з фільмами, книгами, новинами, іграми і т. д. Чому ж, знайшовши один сайт, ми не намагаємося знайти інший аналогічний, який можливо буде навіть краще? Відповідь проста! Сайти, які лежать у нас в закладках, зручні для використання – на таких сайтах як правило зручне розташування елементів, категорій і приємне, не дратує око оформлення. Це і є «ефект тяжіння», відвідавши один раз правильно оформлений сайт – залишати його вже не захочеться.

Розглянемо наочно на прикладі торгового майданчика два сайти:

Безумовно і безперечно, сайт № 1 хочеться якнайшвидше закрити, а на сайті № 2, навпаки, хочеться затриматися. Чому так відбувається? На першому сайті крім хаотично розташованого товару ще й кольорове перенасичення, чого не скажеш про другий сайті. Є така прекрасна прислів’я: «По одягу зустрічають, а по розуму проводжають», вона застосовна і до сайтів, тільки замість одежки тут оформлення, а замість розуму – навігаційна структура. Відвідувач, зайшовши на сайт, перше, що бачить – це кольорове оформлення, а вже потім звертає увагу на внутрішню навігацію і структуру сайту.

Колірне сприйняття

Головне правило при виборі колірного оформлення — не перестаратися. Часом навіть двох-трьох правильно підібраних кольорів більш ніж достатньо, яскравий тому приклад – сайт fb.ru. Багато веб-дизайнери використовують для оформлення сайту html таблицю «безпечних» кольорів.

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

Сумісність кольорів

У кожного кольору є свій «дружній» колір – це той колір, з яким він поєднується найкраще. Немає необхідності винаходити велосипед і експериментувати з підбором, всі вже давно винайдено і є у відкритому доступі. Для підбору кольорів використовуються колірні кола Иттена. Нижче на зображенні зображено колірний круг для підбору 2 поєднаних кольорів.

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

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

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

Внутрішня структура сайту

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

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

Найбільша помилка

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

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

Форма реєстрації

Ще важливим і відлякує фактором на сайті є форма реєстрації. Деякі намагаються в реєстраційному вікні зібрати мало не дані прапрабабусі.

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

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

Шаблони сайтів

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

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

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

Фінальна частина

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