10 трендов веб-дизайна 2015 года Статьи редакции

Основатель студии January Creative Эмбер Тернер подготовила для издания The Next Web список из 10 элементов веб-дизайна, которые получат широкое распространение в 2015 году.

1. Лонгриды

Страницы с «длинным» вертикальным скролом по-прежнему останутся популярными в 2015 году. По мнению Тернер, скрол удобнее поиска разделов в меню и требует меньше действий при потреблении контента.

В 2015 году «длинными» станут не только домашние страницы, но и разделы «О компании», каталог продукции и другое. Пример — обновленный сайт Apple.

2. Сторителлинг и интерактивность

В 2015 году интерфейсы сайтов сосредоточатся на контенте. Сервисы все чаще будут использовать подачу информации через рассказ с интерактивными элементами.

Например, сайт Space Needle — компания рассказывала о своей деятельности с помощью лонгрида с различными интерактивными элементами.

3. Отказ от больших изображений в шапке сайта

Большая фотография с крупным текстом на ней — этот тренд в оформлении шапки сайта популярен уже несколько лет. Однако в 2015 году, по мнению автора The Next Web, его сменит более минималистичное решение. Дизайнеры просто уберут картинку и оставят только текст.

Пример — сайт The New Wave Company.

4. Упрощение

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

5. Фиксированная ширина сайтов

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

Тенденция по созданию сайтов на всю ширину экрана возвращается, но в обновленном формате, пишет Тернер.

Например, сайт Michele Mazzucco зафиксировал максимальную ширину страницы в 1350 пикселей. Однако при просмотре на более широком экране контент ресурса растягивается, но имеет визуальные отступы по краям.

6. Профессиональные фотографии

Другой тренд — фотографии для сайта, сделанные профессиональными фотографами.

Такие снимки, сделанные специально для конкретного сервиса, придают сайту уникальность, считает автор The Next Web.

Пример — grainandmortar.com.

7. Меню как в приложениях

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

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

Примеры — 24ways, Rawnet.

8. Спрятанное меню

Еще одно развитие минимализма — прятать основное меню за иконкой «гамбургер».

Пример — Brian Hoff Design.

9. Гигантские шрифты

В 2015 году шрифты в интернете станут еще больше, считает издание.

Пример — Tiny Giant.

10. Скорость

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

0
48 комментариев
Написать комментарий...
Стас Непрокин

Для сведения, это мнение дамы, которая делает вот такие сайты: http://januarycreative.com/portfolio/specialized-software-systems-website/

Ответить
Развернуть ветку
Alexander Romanov

Ахаха

Ответить
Развернуть ветку
Egor Kuznetsov

Теперь все понятно)

Ответить
Развернуть ветку
Иван Метелёв

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

Ответить
Развернуть ветку
m0NKey bR4in

Это откуда-то в переводе-пересказе вылезло, в оригинале я, например, такого не заметил

Ответить
Развернуть ветку
Павел Князев

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

Ответить
Развернуть ветку
Иљя Коробов

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

Ответить
Развернуть ветку
Vladimir Matusevic

При чем тут прокрутка? Речь про максимальную ширину.

Ответить
Развернуть ветку
Иљя Коробов

Если у тебя монитор 800х600, или браузер открыт с таким окном, а сайт сделан на ширину 1024, у тебя будет горизонтальная прокрутка.

Не тупите сэр.

Ответить
Развернуть ветку
Vladimir Matusevic

Еще раз - это про максимальную(<1024) ширину, а не конкретно заданную! И это довольно удобно, в некоторых случаях, когда на большо мониторе не надо водить мышкой от края до края.

Ответить
Развернуть ветку
Alexander Romanov

Итак, делаем ставки. Кто больше всего угадает с тем, что нельзя угадать? (Кроме как мобильности, минимизации и ко-ко-ко)

Те, что предсказывает русское Бюро Пирогова (креативная типографика, атмосферный бекграунд, нестандартная геометрия и тд): http://siliconrus.com/2014/12/pirogov-trends/

Или же вероятнее отказ от больших изображений в шапке, гигантские шрифты и другие штучки от этого автора?

Ответить
Развернуть ветку
Alexander Romanov

Может, ещё тренды разработки определим? Приложения под часы, всё больше андроида! Ну и другие очевидные штуки

Ответить
Развернуть ветку
m0NKey bR4in

Отечественный веб-дизайн/разработка года на два отстают от западных, не?

Ответить
Развернуть ветку
Alexander Romanov

Не так сильно) Флетик стал популярен в 2013-2014, сразу в россиюшке тоже стали делать. Лонгшедоу часто встречал и сейчас мода на холлоу айконс наблюдается.

Ну окей, можно применить тренды Пирогова на российский веб в конце года

Ответить
Развернуть ветку
m0NKey bR4in

Но вот в RWD, например, у нас до сих пор хуже умеют, по моим ощущениям.

Ответить
Развернуть ветку
Evgeny Rodionov
Минимализм продолжит развитие в 2015 году — дизайнеры откажутся от лишних элементов в интерфейсах, избавятся от сеток, большого количества фотографий, слоёв.
Designers have practically eliminated many design decisions that most current websites have (i.e. background colors, lots of images, sophisticated layouts, etc.). Instead, the team opted for a clean and simple site design, and it stands out among the crowd of design-heavy, image-heavy, and color-heavy sites.

Представил, как дизайнеры отказались от сеток и слоёв.

Ответить
Развернуть ветку
Filipp Lyakh

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

Ответить
Развернуть ветку
Алексей Тарасов

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

Ответить
Развернуть ветку
Evgeny Rodionov

Не "один" и "другой", это один и тот же человек.

Ответить
Развернуть ветку
Alexander Belov

В дополнение хочу сказать, что получат распространение компоненты Polymer. http://polymer-project.org

Ответить
Развернуть ветку
Иван Метелёв

Я бы не был на Вашем месте столь уверен. Там, насколько я помню, всю дорогу были проблемы с Firefox. У Mozilla сейчас вообще своё видение веб-компонентов https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

Ответить
Развернуть ветку
Nikolay Talanov

С огнелисом вообще много всяких разных проблем. И если на него постоянно оглядываться, получится какой-то собрат ослика. Webgl в нем работает как говно (обещают в начале года пофиксить), mousemove и прочие реалтайм штуки в жсе безбожно тормозят и многое многое другое. Хотя как юзер я когда то считал это браузер лучшим :(

Ответить
Развернуть ветку
Иван Метелёв

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

Ответить
Развернуть ветку
Zl Zloidooraque Drq

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

Ответить
Развернуть ветку
Иван Метелёв

В Ваших словах есть много правды. Но тут какое дело — никто не будет делать такие сайты, которые плохо рисуются в браузере с долей на рынке выше 5%. Вы можете мне возразить, что на IE с такой долей плевали, но тут немного другая ситуация. Фокс люди ставят сознательно, это доля рынка с активным потребителем. Лол.

Ответить
Развернуть ветку
Nikolay Talanov

За последние 2 месяца пилил для фана около 3х демо-лэйаутов (могу дать ссылки если надо) где все крутится вокруг mousemove. В вебките и даже ие все работает если не отлично, то как минимум хорошо. В фф же обработчик mousemove адово тормозит, причем как с дебаунсингом, так и без него. Я поначалу думал что у меня руки кривые, но потом я встретил вот этот сайт http://www.giacomorelli.com/ (победитель site of day на awwwards, что конечно не делает код святым, но все же) и вот он адово тормозит в фф, а в других браузерах все работает как надо. При этом сами операции, которые выполняются во время mousemove работают отлично (трансформации и прочее).

Ответить
Развернуть ветку
Иван Метелёв

Я форкнул Ваш же Pen, чтобы было проще http://codepen.io/anon/pen/wBoqva

Ответить
Развернуть ветку
Nikolay Talanov

Я сейчас себя чувствую полным идиотом, я изначально делал демо с использованием трансформов, только я по ошибке вместо translate3D юзал translateX + translateY. Я сейчас вряд ли найду свой приватный форк, там мешанина, но мне вот сейчас себе голову рукой хочется проткнуть :)
Большое спасибо за помощь. Я еще как идиот весь вечер сидел и не мог понять, почему у меня анимация на jQ работает лучше трансформаций...

Ответить
Развернуть ветку
Nikolay Talanov

Делал демо 1 января
@
Пытался фиксить 3 ночью в состоянии овоща

Чувствую себя пеньком сейчас, такие детские фейлы, хотя прочитал миллион статей про перформанс анимаций и прочее. В общем вот с translate3D, без transition и без debouncing.
Так что еще раз спасибо за наставление на путь истинный (хотя демо все равно чуть чуть да подтормаживает в фф у меня :D)

Ответить
Развернуть ветку
Nikolay Talanov

Даже ссылку не могу прикрепить как человек.
http://codepen.io/suez/pen/yyVOeR

Ответить
Развернуть ветку
Иван Метелёв

Там анимация на mousemove неудачно сделана, а само событие не при чем. Попробуйте

$cont.css({transform: "translate3D(" + finalX + "px, " + finalY + "px, 0)"})
$bg.css({transform: "translate3D(" + finalBgX + "px, " + finalBgY + "px, 0)"})

Это основная причина. Там есть еще пара узких мест.

Ответить
Развернуть ветку
Alexander Belov

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

Ответить
Развернуть ветку
Alexander Belov

потому что*

Ответить
Развернуть ветку
Ilya Lesov

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

Ответить
Развернуть ветку
Vladimir Khamenkov

Эмбер Тернер - а вообще кто это? =) Это из серии, по мнению моей бабушки, web design в 2015 году ....

Ответить
Развернуть ветку
Юрий Ковалёв

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

Вангую, года через три сайты снова будут тяжелыми.

Ответить
Развернуть ветку
m0NKey bR4in

Сейчас больше не весом как таковым занимаются, а числом соединений, порядком и местом включения внешних ресурсов, "асинхронизацией" вызовов в js и всяким таким

Ответить
Развернуть ветку
Юрий Ковалёв

Спасибо, кэп.

Я имел в виду видео на фоне, тяжелые картинки, и т.д.

Ответить
Развернуть ветку
Yudovskiy Sergey

Гиблое дело в январе обозначать тренды всего года, хотя замечание про профессиональные фото очень интересно.

Ну и опечатка "Щрифты". Подправьте.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Богдан Боровик

Тренды из области - я открыл свои любимые сайты и решил, что должно быть так везде... ну не будет же :)

Ответить
Развернуть ветку
Иљя Коробов

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

Ответить
Развернуть ветку
Alexander Shibaev

У меня где-то на ноуте есть электронный буклет от какой-то студии про тренды на 2013-2014 года. В общем почти все пункты там есть. Ничего нового, имхо. Типографика, бэкграунды-картинки, сторителлинг, минимализм. А тренд с быстрой загрузкой сайта он всегда существовал у нормальных разработчиков.

Ответить
Развернуть ветку
Mikhail

Если подытожить, то основной упор на динамику и минимализм. Что касается веб компонентов, это конечно очень здорово, но позволить такую роскошь(жестоко забить на кросбраузерность) в 2015 году, смогут единицы. Хотя сознание большинства уже начало перестраиваться на модульный подход.

Ответить
Развернуть ветку
Владимир Перепелкин
Ответить
Развернуть ветку
Sergiy Lemeshkin

Каждый год с интересом отслеживаю тренды дизайнов для очередных b2b статапов или рекламных страниц.

Все эти надписи на весь экран, гамбургеры, фоточки с клёвыми ребятами, втулить в категорию МБТ интернет магазина. Сразу продажи вырастут и магазин, как самый модный, разорвет рынок.

Ответить
Развернуть ветку
Роман Гаркуша

SVG забыли.

Ответить
Развернуть ветку
Egor Kuznetsov

Во-первых, интересно, опираясь на какие сведения разрабатывался список трендов на предстоящий год.

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Andrew Stoleshnikov

Очередная подборка Капитана.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 48 комментариев
null