Веб-дизайн — 10 трендов на 2015 год

Обозреватель TNW Эмбер Тернер составила краткий прогноз ключевых трендов веб-дизайна на этот год. Мы решили опубликовать их в рамках нашей новой рубрики «Дизайн».

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

1. Длинные страницы с «бесконечным» скроллингом

Screen Shot 2015-01-08 at 11.51.59

Наблюдательные пользователи наверняка заметили, что большинство современных сайтов построены на «длинном скроллинге». А причина проста: растет популярность мобильных устройств для потребления контента (планшеты и смартфоны в 2014-м потеснили не только ПК, но и ноутбуки). И на этих устройствах переходить по куче ссылок не слишком удобно. Зато удобно скроллить. Зачем кликать, если можно скроллить?

Первыми этот тренд заметили в Apple: посмотрите на по сути одностраничный сайт, который там запустили для iPhone 6. Нечто похожее мы увидим и в этом году.

2. Сторителлинг и взаимодействие с контентом

Screen Shot 2015-01-08 at 11.53.07

Крутой контент и отличная история — то, что будет определять успешность любого сайта в 2015-м. И конечно же, умение рассказать эту историю средствами сайта. На помощь спешит инфографика, верстка и различные интерактивные «фишки».

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

Пример реализации — сайт Space Needle. Вместо банальных кликов — взаимодействие на самых разных уровнях, история, которая «ведет» за собой пользователя.

3. Крупные заголовки и фон

Screen Shot 2015-01-08 at 11.53.44

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

Типографика и фон становятся ключевыми, а далее идет просто текст, без изысков. Пример реализации — The New Wave Company.

4. Простота и исключение всего ненужного

Screen Shot 2015-01-08 at 11.54.23

Минимализм вошел в нашу жизнь в 2014-м, и чистка сайтов от всего лишнего успешно продолжится в 2015-м.

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

5. Фиксированная ширина и выравнивание по центру

Screen Shot 2015-01-08 at 11.55.05

Безразмерная ширина уступает фиксированной: впервые это наметилось после длительного перерыва в минувшем году, и в 2015-м возврат к истокам продолжится. Такой подход к дизайну и верстке помогает сосредоточить внимание пользователя на центральной части экрана. Пример реализации — сайт Michele Mazzucco.

6. Профессиональные крупные качественные фото под конкретный проект

Screen Shot 2015-01-08 at 11.57.18

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

Кастомизация, персонализация, уникальность фотоконтента и профессиональная съемка иллюстраций под конкретный сайт станут трендом в 2015 году. Как это работает, можно увидеть на примере Grain and Mortar.

7. Вcплывающие боковые меню как в приложениях

Screen Shot 2015-01-08 at 11.58.19

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

Примеры реализации такого подхода — сайты 24ways и Rawnet.

8. Скрыть меню с главной страницы

Screen Shot 2015-01-08 at 11.58.52

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

9. Крупная типографика. А теперь — еще крупнее

Screen Shot 2015-01-08 at 11.59.22

Казалось, в 2014 году шрифты выросли уже до максимума, но нет — они всё растут и растут. Крупная типографика никуда не денется и в 2015-м. Пример того, как работает визуальное структурирование страницы за счет шрифтов, можно увидеть на сайте Tiny Giant.

10. Скорость и производительность работы сайтов

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

Читайте также:

Як донести свою ідею різним типам співробітників. Частина 2

Как установить тему для WordPress

Называть людей «пользователями» неэтично и неактуально

4 факти про логотип Twitter, які ви не знали