Актуальные тенденции веб-дизайна и их применение в блоге | Дизайн блога 2015

1 997

Всем привет! С тех пор как я начала активно смотреть русскоязычные блоги, я отчётливо поняла, что большая часть блогов сделаны очень некрасиво, несовременно и неудобно. Даже если не говорить о каких-то поехавших кнопках, кислотных шрифтах на кислотном фоне и неудачных картинках… Стоит только один раз взглянуть на блог, чтобы понять, что автор совершенно не парится по поводу современных технологий, модных тенденциях в веб-дизайне и юзабилити.

Для меня до сих пор остаётся загадкой, почему ТАК МНОГО блогов сделаны по самому стандартному древнейшему шаблону с абсолютно надоевшими всем пользователям интернета элементами? Почему о красивом внешнем виде сайта задумываются только компании нацеленные на продажи продукта и более-менее крупные бренды???

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

В этой статье много gif изображений для наглядности. Поэтому очень прошу подождать загрузки и не нервничать))) Поехали!

1. Ширина страницы сайта равна ширине экрана браузера

Я неспроста поставила эту тенденцию на первое место. Мне кажется, именно это — главная проблема дизайна большинства блогов. Уже много лет веб-дизайнеры создают сайты, где блоки располагаются по всей ширине экрана. В то время как столь распространённый стандартный доисторический шаблон подразумевает наличие узкой рабочей области и пустующих полосок экрана по бокам. Это неэффективно и некрасиво.

Для примера давайте сравним сайт «Вконтакте» и «Фейсбук». «Вконтакте» создан девять лет назад, и с тех пор его дизайн не изменился! Фейсбук в свою очередь не то, что поддерживает сайт в современном виде, а скорее даже задаёт какие-то тенденции. Посмотрите на фото и обратите внимание на совершенно бесполезные белые блоки по бокам в «Вконтакте» и грамотно использованное пространство в «Фейсбуке».

ВК

 

ФБ

Я не буду приводить в пример никакие блоги, т.к. это некорректно, но я думаю, что вы и сами часто встречали сайты, сделанные именно в таком ключе — где 50% экрана не используется…

Применение в блоге

Этот тренд можно применить только одним способом — полностью поменять дизайн. Если вы готовы к изменениям, дерзайте! По-моему блог должен постоянно немного видоизменяться для того, чтобы поддерживать интерес читателей. Новый дизайн вашего блога поможет вам выделиться из серой массы одинаковых блогов, показать свою оригинальность и эстетический вкус. Я уверена, что читатель видит разницу между красивым современным блогом, куда автор вкладывает свою любовь и время, и очередным стандартным блогом, автор которого не удосужился пролистать хотя бы первую страницу бесплатных тем.

2. Адаптивная вёрстка

Адаптивная (резиновая) вёрстка сайта позволяет ему выглядеть красиво и удобно на любых устройствах: больших мониторах, планшетах, мобильных телефонах. Этот тренд также появился несколько лет назад и всё прочнее занимает позиции. Как вы знаете, раньше для этих же целей делали несколько версий сайта. Например, обычную и мобильную — и это были два разных сайта, с разными доменными именами. Например, vk.com и m.vk.com. При адаптивной вёрстке нет необходимости делать два сайта, надо просто продумать как будут перестраиваться блоки при изменении ширины экрана. В качестве примера, вы можете посмотреть на вёрстку нашего сайта. Для этого надо просто в ручную сужать и расширять окно браузера — элементы будут перестраиваться на ваших глазах.

adaptivka

 

Адаптивная вёрстка — это исключительно важно на сегодняшний день! Всё больше людей пользуется именно мобильными телефонами для выхода в интернет, а есть даже мнение, что в будущем именно мобильный интернет будет доминировать. На картинке вы можете видеть статистику использования различных устройств при просмотре нашего сайта за последние семь месяцев. Данные взяты из «Яндекс Метрики».

тип устройства

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

Применение в блоге

Большинство шаблонов вордпресса — адаптивны. Если ваш блог уже сделан на таком шаблоне, проверьте его на всех устройствах, чтобы убедиться, что всё выглядит красиво. Мы, например, убрали слайдер с фото для мобильных версий, т.к. большое фото на маленьком экране — это не очень удобно.

Если же ваш блог не адаптивен, вы можете обратиться к верстальщику-фрилансеру, например, на сайте freelance.ru. Сделать адаптивку — это вопрос нескольких дней.

3. Большие фоновые изображения, слайдер, видео

Большие фотографии на фоне — это уже не удивительно, а вот фоновое видео — это можно сказать писк моды. Большие фотографии смотрятся стильно и мощно и в то же время позволяют привлечь внимание читателя к основной теме или новостям вашего блога. Особенно актуален этот тренд, если вы часто делаете фоторепортажи или ваш блог вообще посвящён фото. Пример такого оформления можно посмотреть у нас на главной странице. Видео — это также прекрасное решение для блога. Этот приём используют крупнейшие международные сайты, например, airbnb, и это выглядит действительно круто и необычно!

video-na-fone

 

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

Применение в блоге

Для того, чтобы использовать этот тренд в блоге также необходимо полностью или частично менять дизайн. Но здесь я советую несколько раз подумать, т.к. в 2015-м году в веб-дизайне появился новый тренд — минимализм — о котором я расскажу чуть позже. Тем не менее, если вы хотите поставить в блог большое фото, оно должно быть очень хорошего качества, тоже самое касается видео. Встроить видео в сайт не очень сложно, и любой веб-разработчик справится с этим легко. Главное, чтобы такой дизайн не утяжелял ваш блог, т.к. скорость загрузки страницы — это критически важный показатель!

4. Оригинальные и большие шрифты

Сегодня топографика достигла невероятного развития. На сайтах всё больше внимания уделяется оформлению заголовков и текстовых блоков. Главные составляющие этой тенденции — это красивые и необычные шрифты, а также большие, огромные заголовки. Найти интересный шрифт, подходящий вам по стилю, сегодня не составляет труда. Поэтому каждый уважающий себя сайт старается выделиться и найти шрифт, который ещё не используется на других сайтах. Есть мнение, что в моде сейчас тонкие шрифты — толстое написание осталось в прошлом.

Шрифты

Применение в блоге

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

5. Минимализм

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

Второй аспект минимализма — это плоский дизайн. То есть никакого градиента и объемных элементов. Простые цвета, отсутствие многослойности, выпуклости и наложения элементов друг на друга. Иностранные сайты уже вовсю используют простой серый дизайн с двумя-тремя важным кнопками и всё! В России пока по-прежнему любят навернуть на сайт всего да побольше.

минимализм

Применение в блоге

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

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

6.  Интересные эффекты или «микровзаимодействие»

Вот это вот очень крутая штука, применимая ко всем без исключения блогам! Итак, что же такое «микровзаимодействие»? Это общение пользователя с вашим сайтом. Не с вами лично, как с автором, а именно с сайтом. Т.е. читатель делает какие-то действия на сайте, а элементы сайта ему отвечают. Например, движение значков при наведении, изменение цвета картинки-анонса статьи (пример опять же — у нас на главной), эффекты при переходе между страницами и так далее. Таких микровзаимодействий можно придумать очень много!

mikrovzaimodeistvie

 

Применение в блоге

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

7. Parallax scrolling

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

Сейчас параллакс можно встретить и в другом виде. Например, не при прокрутке страницы, а при движении мышью.

paralax

 

Применение в блоге

На мой взгляд в блоге параллакс будет смотреться хорошо на главной странице и, например, на странице об авторах. При этом он должен быть логично вписан в дизайн, поэтому просто так ни с того, ни с сего делать такой эффект не стоит. Тем более, если вы переживаете о скорости загрузки страницы. Даже у нас на сайте маленький блок с параллаксом частенько очень долго загружается!

8. Длинные страницы

Сегодня модно делать сайты-одностраничники, они же лэндинги (англ. landing page — посадочная страница). Изначально такие сайты появились для того, чтобы продвигать какой-то отдельный товар или услугу, чтобы потом с этого красивого лэндинга люди уже приходили на основной сайт компании. Но сейчас лэндинги заполонили интернет и стали использоваться в разных проектах. Тенденция этого года говорит о том, что разветвлённые многостраничные сайты уже не востребованы. Пользователь не хочет переходить на разные страницы и в разные разделы, нажимая на ссылки. Ему удобнее просто крутить вниз до бесконечности.

Применение в блоге

Я с трудом представляю блог сделанный в форме лэндинга. Хотя наверняка, такие блоги уже существуют! Но мне кажется логичным и удобным использовать лэндинг для отдельных проектов, когда нужно продать посетителю какую-то идею. Ваш вебинар, онлайн курс или что-то ещё. Недавно мы сделали лэндинг для конкурса, который сейчас запущен в блоге. Кстати, это был мой первый опыт веб-дизайна.

9. Блочный дизайн

Блочный дизайн крайне популярен и считается самым модным дизайнерским решением последних лет. Почему? Потому что при таком дизайне на одной странице можно разместить очень много информации, при этом она будет оформлена красиво. Страница при блочном дизайне выглядит воздушно, а не громоздко, и глаза у посетителя просто «разбегаются» — хочется посмотреть сразу всё. Поэтому такой дизайн хорошо сказывается на поведенческом факторе. Пример — сайт платформы для блогеров Helloblogger.

блочный дизайн

Применение в блоге

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

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

10. Боковое или выпадающее меню

Ещё один интересный тренд, стремящийся также к минимализму — это отсутствие сроки с меню. При таком дизайне все пункты меню прячутся за одним значком. При нажатии на значок меню выпадает. В этом году данный тренд ещё усугубился, и теперь считается, что и выпадающее меню — это уже не модно. А модно делать для меню отдельный блок (как правило, сбоку). И тогда при нажатии на специальную кнопочку меню не просто выпадает, а появляется дополнительный блок со списком разделов. Дизайнеры любят этот приём исключительно из-за стремления уйти от обыденности и пресловутости, т.к. на мой взгляд в плане юзабили делать такое меню не очень правильно — пользователю необходимо совершать дополнительное действие даже чтобы просто увидеть меню сайта!

bokovoe-menu

 

Применение в блоге

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

11. Загрузчик сайта

И наконец, ещё одна классная дизайнерская фишка, которая прекрасно влияет на поведенческий фактор сайта. Загрузчик сайта или другими словами «прелоадер» — это анимированный значок, который крутится (вертится, прыгает и т.п.) на странице сайта, пока страница загружается. Хорош прелоадер тем, что пользователь меньше нервничает в ожидании загрузки страницы, а следовательно вероятность того, что он не дождётся и уйдёт — снижается. Также если ваш прелоадер действительно крут и оригинален, читатель может специально начать переходить по страницам, чтобы на него посмотреть. И кроме того, прелоадер скрывает этап неполной загрузки страницы, при которой отображены ещё не все блоки, и страница выглядит не очень привлекательно. По сути, прелоадер — это тоже элемент микровзаимодействий, но я решила вынести его отдельно.

preloader

Применение в блоге

Да, да, да и ещё раз да! Нет ни одной причины по которой не стоит установить на свой блог загрузчик. Главное — подобрать интересный и подходящий вам по стилю прелоадер.

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

P.S. Кстати, все подписчики блога получают скидки и бонусы от наших партнёров.

Блог о путешествиях Niklenburg

Об авторе

Я люблю дождь и запах мокрого асфальта. Солнечные лучи, проливающиеся на землю сквозь зелёный лес. Осень и оранжевое отражение деревьев в озере. Серое небо и узкие улочки старого города. Горячий чай в маленькой, неприметной забегаловке недалеко от главной площади. Железную дорогу и спящий за ней бесконечный горный хребет. Шумный проспект, с торопящимися троллейбусами. Ночные дома и калейдоскоп светящихся домашним уютом окон. Людей, которые знают мои слабости и любят меня за них. Непрошенные воспоминания. Дурманящие масштабом планы. Глубокие разговоры с особенным человеком. Любить... Читать дальше …

Предыдущий пост

Следующий пост

Комментарии приветствуются! Указывайте оригинальные имена/ники при комментировании.

Комментарии (35)
  1. Адаптивную верстку действительно нужно делать всем (кстати, в Вашем блоге она реализована очень хорошо ;) ). Все остальное — дело вкуса. Мне, например, по душе минимализм. Еще нравится микровзаимодействие. Конечно, блог нужно держать в форме и следить за эргономикой и визуальной привлекательностью, но самое главное в блоге это контент, вот что на самом деле заставит человека остаться и вернуться еще. Если статьи неинтересные, то дизайнерские уловки не помогут. Если контент качественный, то его можно читать и в узком блоке с обычным шрифтом.

    Ответить
    1. Арсений, согласна по поводу контента! В подтверждение твоим словам могу сказать, что я часто встречаю очень некрасивые (мягко говоря) блоги с огромной аудиторией, кучей комментариев и так далее. Я не могу такие блоги читать, мой перфекционизм не позволяет наслаждаться чтением текста на убогой странице. Но это уже дело вкуса) Поэтому я и решила написать такой пост. Возможно кто-то вообще не задумывался, что внешний вид блога — тоже имеет значение. Не такое большое, как контент, безусловно, но всё таки…

      Ответить
  2. Я тоже не задерживаюсь на некрасивых (с моей точки зрения), наляпистых блогах, даже не хочется читать контент, обращаю внимание на шрифт, а также на ошибки в языке и другие ошибки. И еще мне не нравится долго разбираться в «наворотах» сайта, если мне непонятно, как добраться до интересующей меня информации, я просто ухожу и ищу похожую информацию на других источниках.

    Ответить
    1. Ольга, да, это как раз и есть «поведенческий фактор». Блог должен быть сделан просто, понятно и удобно. В противном случае, это неуважение к читателю. Сегодня поведение пользователя на сайте значит даже больше, чем SEO, т.к. поисковые системы отслеживают, что делает посетитель на сайте и принимают решение о том, насколько сайт интересен, а значит как высоко выводить его в поиске.

      Ответить
  3. Статья отличная! Сделаю фоновое видео у себя.
    Буду признателен за критику юзабилити моего сайта.

    Со своей стороны сообщаю, что на niklenburg.com мне не по нраву:
    — потраченное время на выяснение «чьих будет» поиск по сайту;
    — отсутствие кнопки «домой» внизу страниц;
    — не бросающийся в глаза блок с ТОПом комментаторов;
    — отсутствие перехода в RSS-feedburner — даже подписка на e-mail рассылку у Вас с его помощью организована, а RSS нет!???

    Ответить
    1. eun, спасибо за критику!!! Первый пункт не поняла вообще — вы не нашли форму поиска? По поводу последнего: у нас есть RSS — кнопочка вверху, там где кнопки всех соцсетей.

      Ответить
  4. Форму поиска нашел, но глядя на нее не понял от какого она сервиса и только после потраченного времени (тестового поиска) стало ясно, что поиск не от яндекса, гугла и т.п. Думается, не помешает в кнопке или рядом указать, например, «авторский скрипт» или что-то похожее, что повысит юзабилити …
    Касательно кнопки rss — тоже ясно видна и оригинально расположена рядом с социальными кнопками, но кликнув по ней попадаешь не в комфортную среду feed burner, а на страницу с кодом файла xml, что не каждому по душе и в этом минус вашего юзабилити.
    Трафика!

    Ответить
    1. А зачем вам нужна информация о том, каким именно образом осуществляется поиск? Расскажите, пожалуйста, про RSS. Я никогда в жизни им не пользовалась и не понимаю, что именно вы хотите увидеть, нажав на кнопку RSS? Скиньте что-нибудь для примера?

      Ответить
      1. Информация о том, каким именно образом осуществляется поиск, нужна для экономии времени. Например у меня нет доверия к яндексу/гуглу и в их формах поиска на сайтах информацию не ищу. У вас же — кот в мешке.
        Про RSS отличным образом рассказывает мой сайт — приглядитесь! В т.ч. и к тому, что можно увидеть кликнув на многочисленные rss-кнопки feedburner на его лавной странице.
        Думается, использование rss позволит взлететь вашему трафику!

        Ответить
        1. Поняла! Ещё раз спасибо за фидбэк! ;)

          Ответить
          1. Пожалуйста и надеюсь на ответный.
            Кстати переход на страницу с кодом XML лучше было оставить, т.к. она будет полезна для тех, кто захочет подписаться на ваши rss в браузере FireFox — вот там как раз и всплывает окошко подписки …

            Ответить
            1. Это получается надо иметь две кнопки RSS?

              Ответить
              1. Да, две. Одной из которых должна быть более приятная многим аббревиатура RSS.

                Ответить
              2. я бы поспорил насчёт двух кнопок rss. На фидбёрнер есть и ладно. Оттуда уже любым ридером можно подписаться.

                И вообще rss для гиков. Мне кажется не технически подкованный люди его не используют.

                Ответить
                1. Плюсом двух кнопок является экономия времени, если конечно указать под кнопками какая из них является XML. Это позволит сразу подписаться кликнув по нужной кнопке, например в браузере FireFox, без захода в фидбёрнер.

                  Ответить
                2. Никита, ты и eun — единственные два человека, которых я встречала, которые пользуются RSS)) Я и слово то такое узнала только после того, как блог запустили…) Мне кажется, это какая-то доисторическая хрень, которая удобна людям, которые пришли в интернет, когда он только появился. И сколько бы не читала статей, я так и не понимаю, что это такое и зачем оно нужно…

                  Ответить
                  1. На самом деле rss пользуются все, т.к. все читают новости — просто многие, как и вы, не подозревают об этом.

                    Ответить
                    1. Хм… Я не читаю новости. Только в фейсбуке. Или там тоже RSS?

                      Ответить
                    2. И на фейсбуке rss — везде!
                      Это наиболее короткий, быстрый и, соответственно, самый эффективный способ доведения информации, позволяющий экономить время.

                      Ответить
  5. И еще — у вас счётчика посетителей нет. Почему не ставите?

    Ответить
    1. Потому что пока нечем хвастаться.

      Ответить
    2. Счётчик-то есть, просто не открыт наружу;)
      Да и зачем его открывать всем, если ты не гос.портал)

      Ответить
      1. Миллионы сайтов не являющиеся гос. порталами показывают счетчики …

        Ответить
        1. Это выбор каждого владельца сайта. Большие и умные блогеры советуют не открывать счётчик, если посещаемость меньше 1000 уников в день. Мне близка эта позиция, поэтому наш счётчик пока закрыт. Сайт не монетизирован, зачем мне демонстрировать посещаемость? Это нужно в первую очередь рекламодателям и партнёрам, у нас их пока нет.

          Ответить
          1. Теперь понятно — безусловно выбор за хозяином!
            Желаю скорейшего открытия счетчика!

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

            Ответить
            1. Нет, я соблюдаю время только для соцсетей. А ты?

              Ответить
  6. Напрасно — тем, кто заинтригован блогом интересно всё о нём, включая статистику. Поэтому, для повышения юзабилити, обязательно установите счётчик.

    Ответить
  7. Спасибо за замечательную статью! Действительно, веб-дизайн очень изменился. Но вот странное дело: последнее время смотрела довольно много разных современных тем — и очень быстро глаза стали уставать. Такое ощущение, что идет одновременно и укрупнение элементов, и желание при этом вместить на страницу как можно больше информации. Плюс создать вау-эффект — все при нажатии меняет форму, цвет. На первый взгляд — прям супер-супер. А потом — устаешь.
    И по поводу счетчика. Лично я убрала — лирушный счетчик у меня постоянно с кем-то конфликтует: то с каким-то нужным плагином, а сейчас — с последней версией ВП.

    Ответить
    1. Да, Мария, согласна. От некоторых сайтов быстро устаёшь. А ещё в последнее время стали всё чаще встречаться сайты с очень оригинальным дизайном, эффектами, но по сути о компании или услуге нифига не понятно. Это как рекламный ролик, который выигрывает «Каннских львов», потому что он красивый, оригинальный и вообще искусство. Но продать продукт обычному зрителю он не в состоянии. А продаёт как раз ничем не примечательный ролик со стандартным сценарием.

      Ответить
  8. Мы уверены, что FLAT UI будет только расти и развиваться, чтобы стать лучшей среди тенденций веб-дизайна в этом году.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>