Лого vc.ru

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

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.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

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

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

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

0

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

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

0

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

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

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

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

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

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

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

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

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

0

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

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

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

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

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

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

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

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

0

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

0

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

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

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

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

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

0

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

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

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

0

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

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

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

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

> Минимализм продолжит развитие в 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.

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

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

0

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

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

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

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

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

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

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

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

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

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

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

0

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

0

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

Сейчас обсуждают
Anton Smelov

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

«Подделки принесли нам 1,5 миллиона рублей за два месяца»
0
Олег Дергилёв

А разве не должны были придти к вам, граждане в погонах,за торговлю контрафактом?

«Подделки принесли нам 1,5 миллиона рублей за два месяца»
0
Аналитика на Диване

Я зарегистрировался, там что-то про ненастроенный ASP.Net и ссылки на сайт майкрософта.

Xor — бот для поиска вакансий и сотрудников в ИТ
0
Pavel Zamyatin

Я ни хрена в этом не понимаю. Пока Маск так или иначе выполнял то, что обещал. Посмотрим.

Элон Маск анонсировал систему межпланетных перелётов и представил план колонизации Марса
0
Дмитрий Атеев
Силовик

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

Элон Маск анонсировал систему межпланетных перелётов и представил план колонизации Марса
0
Показать еще