Дизайн сайта и его юзабилити

  Автор:
  514
website-design

И так, друзья, мы продолжим. Сегодня я хочу поговорить о дизайне сайта и его юзабилити – это практичность, понятность и удобство пользования.

Каждый блог должен быть уникальным, не только контентом, но и так же своим дизайном, выгодно выделяться от своих собратьев.

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

В интернете вы не первый день, видели множество блогов и заметили, что они отличаются друг от друга, в зависимости от тематики и поставленных перед ним задач, какую целевую аудиторию охватывают. Сайт для бизнеса и молодежный развлекательный – две разные вещи.

Если говорить о CMS, достигается это как раз за счет тем оформления – шаблонов. Изначально на WordPress стоит шаблон по умолчанию. Естественно, его нужно сменить на что-то более подходящее для вас и интересное вашим читателям, в зависимости от тех услуг, которые будете оказывать.

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

Более подробно о выборе темы, я писал в одной из предыдущих статей.

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

Дизайн для сайта и его составные.

Цветовая схема.

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

Бизнес-блог предоставляет информацию об услугах и товарах, которые продвигает автор, а не рекламирует боевики.

Хочу порекомендовать вам сайт Color Scheme.ru:
http://colorscheme.ru/web-safe-colors.html,
на котором найдете названия более тысячи цветов, не только в системе RGB, но и обозначение цвета в HTML.

Не только при создании своего блога, но и одностраничных сайтов, пригодится таблица «Безопасные цвета для Web-дизайна». Они всегда неизменны при переходе от одного браузера к другому. На любом мониторе, вне зависимо от разрешения и возможностью цветопередачи.

Для разработки дизайна шапки блога, можно посмотреть подборку многочисленных сайтов и блогов – дизайнерские решения. Сайты и интерфейсы Techdesigner:
http://techdesigner.ru/blogs/category-6/.interfaces-sites

Применяйте качественные картинки и фотографии. Если не хотите потерять доверие у читателей, никогда не используйте зарубежные фотографии с «американскими» восковыми улыбающимися лицами – не совместимые с нашими реальными людьми.

Сервис для подбора текстур: http://thepatternlibrary.com/.

Дизайн шрифтов для сайта.

Характер шрифта должен соответствовать стилистике сайта. Лучше использовать пару шрифтов из одного семейства. Семейство «serif» — в обиходе, их называют шрифты с засечками: Times, Garamond, Georgia…

Шрифты семейства «san-serif» — без засечек: Arial, Verdana…

Это, так называемые, безопасные шрифты, используемые в CSS при создании web-сайтов. Обычно такие шрифты всегда есть в наличии в каждом компьютере – гарантия правильного отображения сайта в браузере пользователя.

Список безопасных шрифтов:

  1. font-family: Arial, Helvetica, sans-serif;
  2. font-family: ‘Arial Black’, Gadget, sans-serif;
  3. font-family: ‘Bookman Old Style’, serif;
  4. font-family: ‘Comic Sans MS’, cursive;
  5. font-family: Courier, monospace;
  6. font-family: ‘Courier New’, Courier, monospace;
  7. font-family: Garamond, serif;
  8. font-family: Georgia, serif;
  9. font-family: Impact, Charcoal, sans-serif;
  10. font-family: ‘Lucida Console’, Monaco, monospace;
  11. font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
  12. font-family: ‘MS Sans Serif’, Geneva, sans-serif;
  13. font-family: ‘MS Serif’, ‘New York’, sans-serif;
  14. font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  15. font-family: Symbol, sans-serif;
  16. font-family: Tahoma, Geneva, sans-serif;
  17. font-family: ‘Times New Roman’, Times, serif;
  18. font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
  19. font-family: Verdana, Geneva, sans-serif;
  20. font-family: Webdings, sans-serif;
  21. font-family: Wingdings, ‘Zapf Dingbats’, sans-serif.

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

Соответственно, шрифт должен иметь какой-то определенный цвет, чтобы он отличался от фона.

Саму картинку в шапке сайта можно поменять, предварительно создав ее в Photoshop, если позволяет шаблон. Зайдите к себе на хостинг, в «Файловый менеджер» и откройте папку: public_html/wp-content/themes/название темы /images.

Но можно и у себя на компьютере, в архиве той же темы, найти рисунок шапки шаблона. Посмотреть ее размер и название. Создав свою – дайте ей то же имя и закачайте на хостинг с заменой старой.

Таким же образом создается и меняется «Логотип» на сайте. Обращайте внимание на размеры – ширину, в большинстве случаев, можно увеличить, а вот высоту – вряд ли. Придется менять многие настройки. Размер и стиль шрифта найдете в консоли блога — «Внешний вид» — «Редактор» — «Стили (style.css)»:

  • Высота фона шапки;
  • Название и семейство шрифтов;
  • Размер шрифта;
  • Цвет шрифта;
  • Размер и стиль шрифта описания или слогана сайта.

stili-schrifta-heder

Идентичным путем меняются и стиль заголовков в постах:

  • Размер и название шрифта;
  • Основной цвет заголовков;
  • Основной цвет и цвет при наведении курсора.

stili-zagolovkov-na-stranice

Всегда помните о контрастности. Темный текст максимально хорошо воспринимается на светлом фоне. Шрифт должен быть не очень мелким, хорошо читабельным.

Сервис, где вы можете бесплатно и легко отфильтровать шрифты по характеру, экспортировать в HTML CSS и использовать у себя на сайте:
http://webfont.ru/.

Здесь все шрифты по свободной лицензии. Есть «Полигон» для предварительного визуального подбора шрифтов прямо в тексте, с добавлением картинок – посмотреть, как это будет выглядеть.

Советую так же скачать расширение для любого браузера:
https://webfont.ru/extension/.

extension-for-browsers

Это даст вам возможность определять размеры и названия шрифтов на любом сайте, а также получать CSS-код.

Юзабилити сайта.

Плохая навигация и отсутствие поиска.

Юзабилити сайта – удобное и практичное расположение элементов дизайна, чтобы посетители всегда могли найти, ту или иную, нужную им информацию. При разработке дизайна для блога, неотъемлемой его частью является карта блога, все посты должны быть разбиты по рубрикам.

Должна быть навигация и наличие качественного поиска по блогу. Не всех устраивает стандартный «Поиск» WordPress. Поэтому я рекомендую использовать «Поиск» от Google: https://cse.google.com/cse/
или Yandex: https://site.yandex.ru.

Его можно создать на этих сервисах – скопировать код и вставить в виджет на свой блог.

У блога единственная цель – дать необходимую информацию для читателя. Поэтому при выборе шаблона — темы для блога или самостоятельной разработке дизайна, необходимо учитывать не только цветовую структуру, уникальность, но и максимальную функциональность.

Основательно продумать навигацию своего блога, чтобы посетитель мог без лишних усилий найти и открыть любую статью.

Реклама и баннеры.

Дальше – это наличие различной рекламы и баннеров на блоге. Не стоит устанавливать их большое количество, а на начальном этапе ее вообще не должно быть.

Минимальное количество собственных баннеров на какие-то свои статьи, конкурсы.

Кстати, сейчас браузеры блокируют рекламу в шапке сайта — это к сведению любителей ставить рекламные баннеры именно в шапке сайта или блога.

Пытаясь разнообразить дизайн для блога, многие размещают всякие лишние элементы в сайд-барах – календари, часы, облако меток. Можно подумать, что читатель заходит на блог не статью почитать и интересное что-то узнать, а время посмотреть и поиграться с облаком меток.

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

Всплывающие окна.

Еще один важный момент – это различные всплывающие окна-подписки, которые любят ставить многие инфо-бизнесмены. Заходишь на блог и через несколько секунд всплывает окно с предложением подписаться. Часто предлагают какую-то бесплатность, которая редко бывает нужна.

Появляется желание закрыть этот блог вместе с этим окном. Многих это раздражает. Но если вы действительно хотите сделать такое всплывающее окно, тогда нужно, чтобы оно всплывало, когда человек покидает ваш блог. В таком случае ничего плохого в этом нет, читатель сам уходит, и вы предлагаете ему еще нечто новое.

Кроссбраузерность.

Это очень важная часть, особенно для тех, кто сам разрабатывает дизайн для блога или нанимает для этого человека со стороны.

Что же это такое? Кроссбраузерность – это одинаковый вид блога в различных, используемых посетителями, браузерах. Вы должны убедиться в том, что ваш блог в Google Chrome, Opera, Explorer или Mozilla Firefox выглядит одинаково. Если не так, то желательно это устранить.

Люди пользуются различными браузерами и этот момент является важнейшим в оптимизации блога. Для того, чтобы исправить такие проблемы, лучше обратиться к профессионалам – к фрилансерам, занимающимися версткой сайтов. Стоит это не дорого. Ошибки эти нужно исправлять, так как это положительно скажется на развитии вашего блога.

Следует обратить внимание и на присутствие битых ссылок, какие-то неиспользуемые картинки в библиотеке медиафайлов, большое количество счетчиков. Не следует перезагружать блог и иконками социальных сетей. Они также загромождают и замедляют работу сайта – особенно если это на главной странице.

Еще момент – большое количество нетематических, исходящих ссылок, так называемых продажных. Статья о рыбалке, а исходящая ссылка о продаже автомобиля.

Некачественный контент.

Некоторые авторы напишут несколько предложений, опубликуют «статью» и ладно. Пишут просто ничего не значащие посты – гонят вал поисковикам. Читатели теряют интерес.

Отличительная особенность блогов – это возможность обсуждать посты. Наличие комментариев делает блог живым и интересным, в нем люди общаются и т.д. Комментарии должны быть – это неотъемлемая часть дизайна любого блога.

Делаем выводы – дизайн для блога может быть практически любым и все зависит от вкусов и предпочтений того или иного автора. Главное – блог не должен оставлять равнодушным читателя.

P. S. Если есть какие-то вопросы или пожелания, пишите в комментариях.

 

 

Интересная статья? Поделитесь ею пожалуйста с другими:
Оставьте свой комментарий:

на Блоге
в Вконтакте
в Фейсбук