Оффтоп Philipp Kontsarenko
99 827

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.

#Интерфейсы

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 48, "likes": 108, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 6289, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 6289, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/6289\/get","add":"\/comments\/6289\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/6289"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

48 комментариев 48 комм.

Популярные

По порядку

Написать комментарий...
15

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

Ответить
1

Ахаха

Ответить
1

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

Ответить
9

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

Ответить
2

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

Ответить
5

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

Ответить
1

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

Ответить
0

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

Ответить
2

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

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

Ответить
0

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

Ответить
3

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

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

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
4

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

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

Ответить
4

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

Ответить
3

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

Ответить
2

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

Ответить
2

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

Ответить
2

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

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
3

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

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

Ответить
2

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

Ответить
1

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

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

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

Ответить
0

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

Ответить
0

потому что*

Ответить
3

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

Ответить
3

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

Ответить
1

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

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

Ответить
2

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

Ответить
1

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

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

Ответить
2

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

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

Ответить

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

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

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

2

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

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
1

SVG забыли.

Ответить
0

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

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

Ответить

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

0

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

Ответить

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

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

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления