Тенденции веб-дизайна 2015 года

Уже по традиции в начале осени Блоготей публикует статью о тенденциях веб-дизайна на грядущий год. Источником сведений становится дайджест «предсказаний», опубликованных на тематических ресурсах (англоязычных) — я прочитываю много-много-много таких постов и делаю для вас резюме. Ну и конечно, никуда не деться от собственного мнения. Некоторые мысли позволю себе высказать, не претендуя на экспертность…

В прошлом году я писала подобную статью и получила хорошие отзывы. Хотя, интересующиеся не преминули потыкать меня носом в «ужасный дизайн» Блоготея)))

Я, кстати, не претендую на «гуристость» в этой сфере (вообще ни в какой ). Но вспоминаю, как один известный веб-дизайнер (я, конечно, забыла имя) сделал на личном блоге размер шрифта 60 px и писал специальное обращение к читателям, мол, да, я знаю, как это выглядит, да, я специально так сделал…

В общем, это такая присказка. А сказка про будущий 2015 год впереди. И вспомнила я статью о 2014 годе не случайно. Дело в том, что ситуация напоминает игру «Найди 10 отличий». Честно говоря, и 3 отличия найти проблематично.

Ну, в общем-то, не мудрено — тенденции не скачут, как блохи, а развиваются поступательно. Хотя хочется, все-таки надеяться, что будущее сулит нам что-то новенькое…

Дизайн: адаптивный

Куда ж без него?! Отзывчивость (rensponsive — буквально «отзывчивый») подразумевает, в общем-то, удобство взаимодействия с сайтом при помощи тач-скрина. Чтобы разнообразить свои вангования, иностранные авторы придумывают всякие конструкции, типа, «исключительно адаптивный» или «мобильный,мобильный, мобильный!»

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

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

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

Типографика рулит

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

Рассуждать о типографике в отношении личных блогов — довольно странно. Хорошо, если у блога есть свое лицо, интересный логотип, но нужны ли нам эксклюзивные шрифты? — большой вопрос.

Однако, если вы делаете сайт компании, бренда, который должен представлять ее лицо, выгодно подавать товар или услуги — обязательно продумайте вопрос привлекательной и запоминающейся типографики!

Изображения огромные и еще больше

Продолжается роман с огромными картинками. Даже такими огромными, которые не лезут в экран и часть остается просто за кадром (ну, конечно, это такой специальный ход). Это красиво.

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

А некоторые предлагают вообще фоновое видео! Кстати, это красиво…

Плоский дизайн

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

Основная причина, по которой все так полюбили этот вид оформления сайтов — массированное использование мобильных устройств. И тут всякие тени, градиенты, которые создают объем и реалистичность, могут подвести — отображаться некорректно. И в пример все приводят новый плоский дизайн Windows, который одинаково смотрится на любых устройствах:

Вам нравится эта картинка? — Мне — нет. И вообще я считаю, что недаром CSS развивается в сторону имитации объема. Столько эффектов красивейших уже есть и появится еще больше. Уверена, что в двухмерности мы все-таки не задержимся!

В процессе изучения темы я нашла милейший сайт-историю. Обязательно посмотрите его. Краткое содержание — борьба реалистичного и плоского дизайна. Кульминация — битва этих двух персонажей (вы сами выбираете, за кого сражаться). Кстати, я билась за реализм и надавала тому плоскому типу… А в финале золотые слова, что, мол, дизайн может быть любым — главное: рассказать красивую историю.

Согласна на все 100%!

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

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

Но теперь Интернет стал настолько значительнее печатных изданий, что выработал собственные правила. Пространство заполняют блоки, за каждым из которых скрывается нечто: текст (так ненавидимый всеми ), галерея, форма заказа и так далее.

«Призрачные» кнопки

Это вообще апогей плоскости. Кнопка не только не выделяется объемом — она почти не видна на фоне сайта. Но в этом «почти» и есть особая прелесть. Ведь, в принципе, пользователь — не слепой и, если ему нужна кнопка, он ее найдет))) Тем более, если при наведении, она меняет цвет или еще как-то сигнализирует о своем существовании…

Этот пример, вообще, показывает многое из того, что мы уже обсудили и только готовимся обсудить:

1. Призрачные кнопки и формы (слева — форма для ввода номера школы; справа кнопка поиска);
2. Типографика — присутствует;
3. Все плоское — ни одной выпуклости;
4. За полупрозрачным однотонным фоном проглядывает не просто огромная картинка — целый гигантский видеоролик;
5. Движение осуществляется скроллингом;

Можете посмотреть сам сайт здесь.

Юзабилити

Больше скроллить — меньше кликать

Вот это тренд — так тренд! Не заметить его невозможно: все, кто только может, делают одностраничные сайты, по которым нужно ползать вверх-вниз или влево-вправо… Меня лично такое устройство не впечатляет. Возможно потому, что я чаще просматриваю сайты на стационарном компьютере.

Считается, что пользователь «залипнет» на таком сайте, не потратит времени на загрузку новых страниц. Продвигать одностраничник эффективнее. Скорее всего, это так.

Персонализация взаимодействия

Это называется красивым термином UX-дизайн. То есть, «юзер экспириенс дизайн» — ориентированный на опыт пользователя. Вообще, все эти определения слишком расплывчаты. Получается, что любой хороший сайт будет UX, а любой плохой — анти-UX)))

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

Инфографика

Это еще одно напоминание о том, как Интернет победил и, буквально, уничтожил культуру чтения. Раньше никого не фрустрировало то, что на сайте находятся тексты. Теперь это почти неприлично. Как будто создатели сайтов сомневаются, умеют ли пользователи читать вообще. В любом случае, читать уже мало кто любит.

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

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

Заключение

Глядя на это плавное течение реки веб-дизайна из 2014 в 2015 год я испытываю некое беспокойство. Так все гладко, предсказуемо, пресно, плоско, что аж тошно. Я очень надеюсь, что эту гладь сломает что-то революционное, неожиданное, совершенно новое. Уже явно настало время.

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