Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Найкращий дизайн блогу - яким він повинен бути для нас

  1. Чому вирішив змінити тему
  2. Яким повинен бути дизайн блогу
  3. Меню
  4. шапка блогу
  5. Головна сторінка блогу
  6. Структура шаблону записів
  7. система коментарів

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

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

Чому вирішив змінити тему

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

  • Безпека сайту . Стара тема не мала нових оновлень. Тому в ній могли бути серйозні діри в захисті. Також не було технічної підтримки. Все доводилося робити самому.
  • Несумісність з новими версіями плагінів і CMS. Вже були перші дзвіночки.
  • Поганий код і адаптація під різні дозволи екрану.

Поганий код і адаптація під різні дозволи екрану

Загалом, вирішив для свого блогу взяти хорошу адаптивну тему з тих. підтримкою в разі чого. Платні варіанти я відразу відкинув з наступних причин:

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

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

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

З усіх дефолтних тим WP, мені найбільше подобається Twenty Thirteen. Решта не дуже.

Решта не дуже

Twenty Thirteen

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

Безкоштовна тема Basic

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

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

Яким повинен бути дизайн блогу

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

А ось, як зараз.

Меню

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

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

Як по-вашому, де краще?

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

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

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

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

Однак в такому випадку з'явиться додаткова спливаюча область. А чим більше таких спливаючих гармошок, тим гірше для юзабіліті блогу . Тому меню з рубриками вирішив залишити таким, яким воно було при старому дизайні блога.

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

Іконки при старому дизайні

Можна було ще зробити випадають сторінки в меню.

Можна було ще зробити випадають сторінки в меню

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

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

Можна було відразу в відкриту запхати їх в меню, але тоді вийшло б негарно.

Можна було відразу в відкриту запхати їх в меню, але тоді вийшло б негарно

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

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

Мені на жаль, довелося робити друге верхнє меню, так як сторінки і рубрики разом не вміщаються.

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

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

шапка блогу

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

Для початку, коли продумуєте веб-дизайн, то якщо у вас блог , Я рекомендую відразу в назві написати чий він. Наприклад, «Блог Сергія Стеклова». Так ви вже даєте чітко зрозуміти користувачеві, хто автор проекту.

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

Також не забуваємо і про слоган. Він повинен звучати красиво і відображати загальний напрямок самого ресурсу.

Ще дуже добре буде якщо ви розмістите в шапці свій логотип. Це дуже корисно для брендингу. Такий елемент підвищить впізнаваність і буде виділяти вас із загальної маси. Рекомендую завжди розташовувати його лівіше від назви проекту і слогана.

На жаль, у мене поки немає логотипу. Все ніяк руки не дійдуть.

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

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

А оскільки місця не так багато, то мені потрібно було кудись впихнути такий важливий елемент, як пошук по блогу. У підсумку, довелося його акуратно вбудувати в шапку.

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

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

Ще можна впровадити невелике горизонтальне меню. Однак рекомендую робити тільки в тому випадку, якщо під шапкою відсутня область меню.

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

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

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

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

Занадто велика шапка буде зменшувати видиму область контенту. Але ж люди приходять саме за ним, а не за красивим дизайном блогу.

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

Головна сторінка блогу

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

Мені траплялися блоги, де головна була в вигляді журнального сайту

Тема в стилі онлайн журналу

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

Загальна структура головною блогу

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

І назвіть таку сторінку «Блог» щоб було зрозуміло.

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

До або після стрічки постів можна додавати невелику опис. Також сюди на час можна прикріпити якусь важливу новину, зробити невелику презентацію автора або додати слайдер.

Я так у себе додав слайдер з підбіркою хороших матеріалів.

Слайдер на головній

З приводу анонсів.

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

Мініатюри маємо або по центру анонса (з картинкою середніх або великих розмірів), або ліворуч (із зображенням малих розмірів).

Текст анонсу повинен бути невеликим (3 - максимум 4 пропозиції). Деякі люблять пхати багато тексту. В такому випадку анонси стають дуже об'ємними і по ним важко орієнтуватися.

Ще в анонсі має бути присутня метаінформація про піст. Це дата публікації (обов'язково потрібно виводити) і рубрика.

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

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

Для додаткової уваги можна ще вивести іконки. Вони у мене були в старій темі. У новій поки ще не виводив.

У новій поки ще не виводив

Анонс в старій темі

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

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

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

Так, в кожному анонсі по 3 однакові посилання. Але як сео оптимізації сайту, це ще не смертельно. Тому я рекомендую ці посилання залишати.

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

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

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

Структура шаблону записів

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

Я особисто так вже давно не вважаю. За моїми стандартам структура повинна бути такою:

Структура сторінки записів

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

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

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

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

система коментарів

Ну і останній важливий момент для дизайну блогу - це система коментарів.

Отже, що змінилося у мене? По-перше, це оформлення коментарів. Раніше вони виділялися межами і відступами.

Коментарі при старому дизайні блога

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

Коментарі при новому дизайні блога

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

І по-друге, я поставив новий візуальний редактор коментарів.

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

Новий редактор для коментарів

Раніше у мене був текстовий редактор.

Старий текстовий редактор для коментарів

Але я вирішив поміняти на новий. Мені він видався більш зручним для користувача. Для виведення використовую плагін Ark Commenteditor від Олександра Каратаєва. Спасибі йому за це корисне розширення.

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

З інших змін хочу відзначити, що я повністю прибрав висновок смайликів. У мене раніше виводилися красиві колобки.

У мене раніше виводилися красиві колобки

Але з новим редактором CkEditor вони не хотіли працювати. А в редакторі TinyMCE не виводиться функція вставки прикладів коду. Вона працює тільки в CkEditor. Тому мені довелося відмовитися від смайлів.

Скажу, що в плагіні є можливість вбудованого виведення колобків. Але я відмовився від такого способу, та як у вихідному коді виводяться довгі шляхи до смайликів.

Але я відмовився від такого способу, та як у вихідному коді виводяться довгі шляхи до смайликів

Смайли в плагіні Ark Commenteditor При підписці на коментарі , Такі шляхи в електронних листах будуть присутні. Я вже не раз стикався з цим. Скажіть, виглядають такі листи дуже негарно. Тому поки вирішив відмовитися від вбудованого виведення смайликів в редакторі.

В іншому, все залишилося як і раніше. Але наостанок ще хочу дати вам кілька порад:

  • Завжди робіть деревовидні коментарі. Так краще видно, хто кому відповідає.
  • У датою ніколи не видаляйте якір на коментар. Іноді користувачеві потрібно перейти відразу на повідомлення.
  • Граватаркі розміщуйте зліва і робіть розміром 58 - 62 px.
  • Зробіть посторінкову навігацію коментарів і розбивайте сторінки по 12 - 15 батьківських повідомлень.
  • Дайте можливість користувачам вставляти фото або приклади коду в своїх повідомленнях.

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

Ну і останнє, що я хотів запитати: «Як вам новий дизайн на моєму блозі? »Нормально чи не дуже?

[Socialpost]

Як по-вашому, де краще?
Отже, що змінилося у мене?
»Нормально чи не дуже?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: