Какие модные фронтенд-фишки можете посоветовать?

Question

[medbrat13]

Я бекендер, и мне нужно разнообразить свой сайт, сделать его современным. В интернете сейчас его нет, показать нечего. Какие модные нынче библиотеки вау-эффектов есть на js, css, html? Какие есть полезные штуки, которые реально делают юзабилити приятнее? Не хочу ничего писать руками, хочу подключить, настроить и поехать. Следящие за всем новым, помогите советом.

Comments

[Yustas Alexu]

юзабилити это не про свистоперделки.

Answer 1

[Максим Морев]

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

P.S. Речь идёт не о сайтах, которые должны побеждать на Awwwards, а об обычных сайтах, которые делаются для людей, а не для конкурсов.
P.P.S. Если всё-таки очень хочется, то нужно гуглить по запросам "hover effects" и "canvas animation", остальное без конкретной дизайнерской задумки вреда несёт куда больше, чем пользы.
Юзабилити - это про то, чтобы "работает быстро и понятно (как у всех)".

Comments

[P747]

Почему? Если это своего рода Landing Page
Вот например ferrari использует анимацию чтобы показать продукт https://www.ferrari.com/en-RU/auto/812-superfast

[Максим Морев]

P747, и на сайте Ferrari можно увидеть пример омерзительной замены курсора на первом экране (как это вообще в продакшен попало?), несколько примеров самых дешёвых появлений блоков, и пару анимаций, которые смотрятся относительно прикольно, но при этом по-прежнему никому не нужны. Люди на сайт зачем приходят - посмотреть контент или восхититься плавно выезжающим блоком, который за счёт движения привлекает на себя внимание в момент чтения текста?

Answer 2

[Владимир Солнцев]

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

Мне вчера сон кстати приснился, что сайты опять начали делать черными буквами на красном фоне, с автоплеем любимых композиций владельца.

Answer 3

[Дмитрий Беляев]

0. a11y (ну и еще сюда можно заглянуть)
Притом доступность - это не только версия для слепых (вообще это не отдельная версия должна быть, а сам сайт должен поддерживать скринридер), бывает еще ограниченность движений, в том числе временная (перелом руки, ребенок на руках).

1. Семантика
По словам одного очень крутого верстальщика, divатоз очень опасная болезнь с огромным количеством побочек...

2. Адекватная работа с клавиатуры
Про клавиатуру. Вот реально бесит, но браузер это почти единственная утилита где я тянусь за мышкой... (хотя есть еще мак ось, но там эпл умный, а юзеров считают тупым быдлом, ну и адекватный трекпад это сглаживает). У меня нет особых проблем не с мышкой не с тачпадом, но клавиатура тупо позволяет мне управлять компом быстрее, а мое время дорого.
А причиной всему простой факт - интерфейсы делают макаки, которые даже сочетаний своей IDE не знают...
Что самое интересное, выполнив предыдущие пункты, Вы уже получите вполне вменяемую работу с клавиатурой, просто и абсолютно бесплатно. Но вслед за divатозом как правило развивается хз-где-фокус, ескейп-для-трусов, не-пашут-стрелки и еще куча мелких заболеваний, приводящих к неспособности купить в инете мышку не имея этой самой мышки (попробуйте, очень интересный челендж, покупать с телефона в зачет не идет). Ну и больше всего бесит, когда на сочетания ОС или браузера сайт вешает что-то свое...

3. Интуитивно понятный интерфейс
Люди не любят, когда их заставляют думать. Мозг вообще сжигает энергии больше всего остального тела, а если его еще и заставлять активно работать... И это не просто про знакомые иконки, узнаваемое их положение. Это вообще про возможность выполнять большинство действий на автомате. Почему у модалок кнопка закрытия в правом углу? Это привычно большинству, ведь на винде окна закрываются так же. Вот только никто не мешает отследить, что мы на макоси, где вообще-то привычнее, когда крестик слева...

Answer 4

[P747]

Я тоже бекендер, но если освоишь это, то будет охрененно https://threejs.org/

Answer 5

[abberati]

Какие есть штукенции, которые реально делают юзабилити приятнее?

Фронтенд-разработчик