Оффтоп Philipp Kontsarenko
98 730

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

Отказ от «гамбургера», стандартизация, насыщенные цвета

В закладки

Генеральный директор агентства Empirical Proof Крис Лейк собрал в одном материале тренды в веб-дизайне 2016 года.

Гомогенизация

По словам Криса Лейка, на смену тренду «дрибблизации» дизайна приходит стандартизация. Все сайты в 2016 году всё больше будут похожи друг на друга.

Паттерны вместо страниц

Современные дизайн-команды уже перешли на новый принцип работы — сначала разрабатываются UI-компоненты, а затем на их основе страницы сайта или сервиса. В 2016 году на этот принцип работы перейдет большая часть команд по всему миру.

Анимация

По словам Лейка, CSS, HTML5 и jQuery уже позволяют создавать полноценные анимационные эффекты — не хуже, чем во Flash. Пока не все дизайнеры научились использовать анимацию в интерфейсах — так, чтобы она не мешала пользовательскому опыту.

Однако в 2016 году появится больше удачных примеров в использовании анимационных эффектов.

Насыщенные цвета и палитры

Насыщенные цвета и неоновые палитры станут трендом 2016 года. Пример — сайт Bloomberg.

Другой пример — редизайн логотипа Medium, представленный командой сервиса в 2015 году. Дизайнеры использовали ярко-зеленую палитру.

Еще один пример — Spotify.

Размытие изображения

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

Загрузка структуры страницы

Facebook использует еще один прием при загрузке сайта — отображение структуры страницы еще до появления контента. Пока страница загружается, посетители знакомятся с оформлением ресурса, вместо того, чтобы разглядывать белый экран или какой-нибудь индикатор на AJAX.

Этот приём получит более широкое распространение в 2016 году.

Scrolljacking

Scrolljacking — прием, когда контент изменяется по мере движения скрола мыши. Например, такая механика используется на сайте Apple:

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

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

Пассивно-агрессивные всплывающие окна

Несмотря на недовольство дизайнеров и специалистов по UX, всплывающие окна вновь заполнили интернет — формы подписки на email-рассылку, предложения подписаться на социальные сети компании, скидки и прочее.

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

Отказ от гамбургера

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

Например, Youtube уже перешел от «гамбургера» на горизонтального меню с «табами».

Тяжелые страницы станут тяжелее

В 2010 году средний размер одной страницы составлял 702 КБ, в 2015 году — 2219 KB. Рост более чем в три раза. И, похоже, что никто не задумывается об ограничении этого роста. Например, главная страница The Daily Mail весит 8,8 MB.

Это, как пишет Лейк, плохо сказывается на мобильных пользователях — скорость мобильного интернета не всегда позволяет просматривать такие «тяжелые» сайты.

#Интерфейсы

{ "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": 38, "likes": 107, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 12822, "is_wide": true }
{ "id": 12822, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/12822\/get","add":"\/comments\/12822\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/12822"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

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

Популярные

По порядку

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

Вам самим не стыдно писать про дизайн, интерфейсы и тренды, когда у самих такая каша на сайте?

Ответить
6

Дизайнер сайта не занимается переводом статей для сайта.

Ответить

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

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

0

Это вы со смартфона?

Ответить
0

Это он кусками набросал

Ответить
0

Такой вопрос актуален, если бы vc.ru был студией дизайна, а не информационным ресурсом.

Ответить
23

Ненавижу Scrolljacking!

Ответить
12

хуяк-хуяк и в продакшен - лучший тренд 2016

Ответить
8

1. Гомогенизация — строго зависит от того, кто делает сайт. Если удобнее делать по "стандарту" (магазины, блоги, новостные порталы), то конечно будет похоже. Если больше углубляться в специфику задач сайта, то дизайн станет значительно более индивидуальным.
2. Паттерны — кул только для тех, кому надо делать слишком много сложных приколов. Большие порталы и т.д..
3. Анимация — ну суперочевидно. В 2016 году помимо анимации в тренде будет еще кислород.
4. Насыщенные цвета и палитры — с 2012 идет. Со временем все только смелее, но очевидно же.
5. Размытие изображения — зависит от вкуса. Технология доступна уже очень давно, видел на малом количестве сайтов.
6. Загрузка структуры страницы — ...
7. Scrolljacking — древняя и раздражающая технология.
8. Пассивно-агрессивные всплывающие окна — было всегда.
9. Отказ от гамбургера — самый улетный тренд. У меня в магазине есть три категории товаров: мышата, котята, щенята. Что будет проще сделать для мобильной версии: спрятать их всех в одном меню или показать все три категории сразу? Гугл просто собрал в три ссылки все самое нужное, чтобы уменьшить кол-во времени до достижения решения задач пользователя. Если у приложения или адаптивной версии сайта существует проблема, что ссылки так красиво разделить нельзя, то выходом будет являться только меню-три-полоски. Это очень тупо и грубо сразу так решать, что это будет трендом. Размер таких ссылок невероятно конский.
10. Тяжелые страницы станут еще тяжелее — если немного напрячься, то можно сделать немного полегче.

Подборка: пук-пук. Больше похоже на то, что тот, кто писал, рандомно собрал фишки с сайтов и назвал это "тренды 2016". Половину "трендов" можно перекидывать на 2012, 13, 14, 15.

Ответить
4

Не половину, а все! Абсолютно все. Ничего нового нету.

Ответить
0

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

Ответить
7

По-моему, первым "гамбургер" появился в YouTube, и первым же оттуда ушел. Браво, Google!

Ответить
2

Задают тренд)

Ответить
0

Да не, просто любую херню пробуют. Рандомно. На другое мозгов не хватает.

Ответить
4

В общем, теперь все сайты будут одинаковыми, медленно грузиться и мелькать анимацией с попугайскими цветами, да?

Ответить
0

Нет

Ответить
3

Зачем уходить от 'гамбургера' не пойму. Удобно, стандартизировано и места на экране больше

Ответить
0

Нубы не врубаются в него.

Ответить
0

Наиболее полно ответ раскрыт здесь:
https://developer.apple.com/videos/play/wwdc2014-211/

Ответить
2

1. "Загрузка структуры страницы" . Просто, зачем??? Помните как раньше было, когда интернет у большинства был в 2кб/с? Нажал на ссылку, ждёшь загрузку страницы.Пока ждёшь, видишь не картинки, а текст, и ты рад этому, ведь пришел на сайт ради этого текста. Пока страница загрузится, ты уже всё прочитаешь и найдёшь всё то, что тебе нужно. За информацией ты пришел - ты её и получил, а сейчас как? Вот пример из жизни. Выехал за город и внезапно, как это обычно бывает, понадобилось узнать информацию в интернете. На территории, где я находился, как вы догадываетесь, ни 3G, ни 4G не было, и мне пришлось довольствоваться 2G плохого качества ... Захожу на сайт и жду. Через секунд 30-40 я увидел угадайте что? Ёб@нную структуру сайта!!! Это как раз тот момент, когда у меня бомбануло. Я стоял и ждал, когда же загрузится текст... Но ведь мы, люди, заходим на сайт не ради дизайна, а ради той информации, а мне пихают эту глупую структуру сайта... Она, возможно, понадобиться мне позже, чтобы разобраться что к чему, но не сейчас же...

2. "Отказ от гамбургера". Как это вообще можно записать в тренды? Они убрали его, потому что избавились от множества пунктов. Вспомните старую версию youtube. "Главная", "Подписки", "Загрузить видео", "Плейлист", "Понравившиеся", "История", "Посмотреть позже". 7! 7, Карл!... Давай! Сделай это! Помести 7 пунктов меню в ширину!

3. Как постскриптум. Сайт у вас действительно так себе. При ЦП было лучше. Сейчас новости читать вообще неудобно. Мне кажется, что вы процентов 20 читателей потеряли, когда дизайн изменили.

Ответить
1

Принципиально не читаю сайты в которых идет долгая загрузка страниц.
Считаю, если владельцам пофиг мое (читай наше, юзера) время, - значит все что там будет подано - имеет такое же следствие - наплевательское. Вот такой простенький "анализатор".

Ответить

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

1

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

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

Ибо... Насильно мил не будешь. Здравый смысл еще никто не отменял.

Ответить

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

1

Один я прочитал слово "дрибблизации" как "дебилизации"?

Ответить
1

Не, я тоже сначала так прочитал.

Ответить
1

А как же material-design?)
В целом, сейчас идет тренд на "шапки" размером в полный экран, на которых тайтлы страницы и хлебные крошки)
Радует конечно, куда движется дизайн сайтов. По мне становится все удобней и приятней к глазу.
А по поводу мобильных юзеров - интернет-технологии не стоят на месте, и с 8.8 мб для LTE - легко. Так что это дело времени.

Ответить
1

А где 10 трендов логотипов в 2016?

Ответить
2

Эту статью напишет Логомашина.

Ответить
1

А есть ещё вот такая кнопка, видимо переметнувшая сюда из TJ без каких-либо изменений.

Ответить
0

Может, это потому, что TJ и ЦП - проекты одной компании?

Ответить
0

Ну хз, цвет-то можно поменять

Ответить
0

Да ну?! Я то в курсе. Но это выглядит дико, когда все твоё приложение одного цвета, а тут бац, жёлтенькое пятно!

Ответить
0

да и отступы можно сделать меньше и одинаковые

Ответить
1

Гуд подборка

Ответить
1

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

Ответить
1

А что же про flat? С каждым годом дизайн будет становиться все более и более плоским пока не исчезнет совсем с появление виртуальной реальности:)?

Ответить
1

Html, css и jquery, jquery!!! КАРЛ. Автор статьи считает jquery технологией.

P.S. Настало время говнеца на ЦП. Помимо того что решили объявить треды 2016 года, в 6 января 2016, так еще и все пункты абстрактные и устаревшие лет на 5, да и все ситуативные абсолютно.

Ответить
0

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

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

Ответить
0

Мне кажется, все зависит от конкретной задачи, которую решает сайт, как инструмент.

Ответить
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-уведомления