Оформлення сайту

4

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

Що входить в поняття «оформлення сайту» в нашому розумінні:

  • Підбір кольорової гами для сайту;
  • Формування розташування тексту, малюнків та відео матеріалів на сторінках;
  • Розташування інформаційних блоків (реклами, коментарів, схожих статей і т. д.)
  • Підбір шрифту (стилю і розміру);
  • Оформлення елементів дизайну таким чином, щоб було зручно відвідувачу.
  • Чому ще важливо ПРАВИЛЬНО оформити сайт?

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

    Пример оригинального оформления сайта

    У всьому винні, поведінкові фактори. Постійні читачі вже знають, що це таке, так як ми писали про це цілу статтю, але на цей раз давайте зупинимося на тих моментах, які стосуються оформлення та дизайну сайту.

    Якщо на сайті

  • Правильно подана інформація;
  • Виділені головні елементи статті;
  • Є додаткові тематичні посилання;
  • Кольори не «виїдають» очей;
  • Явно виражені основні переваги сайту.
  • То:

  • Людина довше пробуде на сторінці;
  • Продивиться додаткові сторінки;
  • Зареєструється;
  • Залишить коментар;
  • Додасть сайт в закладки або соціальні мережі;
  • Повернеться на сайт ще раз.
  • Отже:

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

    Як оформити сайт правильно?

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

    Кольорова гамма сайту

    Створюючи дизайн сайту, або допрацьовує його елементи, ви просто зобов’язані пам’ятати про простому правилі: «На сайті повинно бути не більше 5-ти колірних відтінків». Вибирати ці відтінки теж треба вміти, так як далеко не всі кольори поєднуються. Допомогти з цим можуть спеціалізовані сайти. Мені, наприклад, дуже по душі www.colourlovers.com – тут можна з легостью підібрати потрібну колірну гаму з точними номерами кольорів, а головне — подивитися як вони поєднуються. Після чого, намагайтеся у всіх елементах використовувати тільки ці кольори і відтінки.

    Цветовая гамма сайта

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

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

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

    Якщо сайт невеликий (наприклад, «Сайт-Візитка»), де немає особливо сторінок, а значить і посилань, то на головній повинен бути написаний структурований текст з тематичними картинками для наочності.

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

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

    Оформлення внутрішньої сторінки сайту

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

  • На самому видному місці (у центрі сторінки) повинен знаходитися той контент, за яким прийшов чоловік (стаття, відео ролик, фотографії та опис товару тощо).
  • На другому місці за важливістю повинна знаходитися реклама (щоб по ній кликали), або ж кнопка або форма для оформлення замовлення. Це потрібно зробити для того, щоб клієнт просто так не пішов від вас. Можливо, це кілька настирливо, однак якщо знати міру (дозувати рекламу і не робити форму/кнопку великий), то все буде відмінно. Такі елементи поміщають зазвичай після статті або з правого або лівого боку, як можна вище.
  • На третьому місці за важливістю буде знаходитися навігація по сайту: меню, схожі товари/статті і інші цікаві та корисні посилання. Цими посиланнями ми забиваємо інше пусте місце, але знову ж таки, не перебарщиваем, щоб сайт «дихав».
  • Особливу увагу слід приділити коментарями і відгуками про товар/статті. Сьогодні сучасна людина вже навчений, що крім матеріалу поданого автором, слід ще читати відгуки/коментарі інших людей, це корисно і часто навіть цікавіше ніж основний матеріал. Тому продумайте дизайн коментарів таким чином, щоб він був лаконічним, красивим і легко читаним.

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

    Особливо важливо навчитися оформляти статті блогерам і власникам інформаційних сайтів, де головне на сайті – це тексти, якість і читабельність яких є головним.

    Оформление внутренней страницы сайта

    Оформлення «шапки» сайту і «підвалу»

    Пам’ятаєте приказку: «Зустрічають по одягу, а проводжають по розуму!». Причому одягом у нас виступає саме «шапка» сайту або кажучи російською мовою – верхня його частина. Шапка повинна задавати тематику сайту. Від того наскільки вона професійно намальована, і буде залежати думка про професіоналізм авторів. Якщо у вас немає навичок, то рекомендуємо шапку зробити якомога менше, залишивши на тому місці лише логотип і меню, такий мінімалізм не створить непотрібного враження і гостю доведеться оцінювати проект по його наповненню.

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

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

    Оформление «шапки» сайта

    Оформлення бічної колонки (сайд-бару) сайту

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

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

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

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

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

    Оформление сайта без боковой колонки

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