Лого vc.ru

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

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.

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

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

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

но заметка не про вас, а про факт - на ЦП страшные элементы интерфейса)

0

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

0

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

0

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

0

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

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

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

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

0

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

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

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

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

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

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

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

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

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

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

0

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

0

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

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

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

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

0

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

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

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

0

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

0

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

0

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

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

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

0

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

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


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

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

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

0

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

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

Да кому нужны эти бургеры?

0

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

Сейчас обсуждают
Антон Адамов

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

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Yus Teryukalov

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

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

Суммы инвестиций и заработков тоже удивляют. Кому нужны любительские фото в таких количествах?

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

но драйв этот сомнительный, в идеале, ты сам должен выбирать продукты с одной стороны, а с другой, это для тех кто не совсем готовить умеет, т.к. речь о конкретном рецепте, а если у меня в холодильнике половина продуктов для блюда есть? Сразу вспоминается Никита Лихачёв))) Хотя вот пишу это и сам понимаю, что лишний раз мотивировать людей готовить дома для себя и семьи всё таки благое дело)))

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Показать еще