Сайты и инсайды #4

Рубрика для дизайнеров и разработчиков. Публикую сайты, которые вдохновляют заниматься Digital. Еще пишу о полезных сервисах, книгах и инсайдах в веб-дизайне, UI / UX и разработке.

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

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

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

Сайты

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

Второй — промо-сайт компактного автомобиля для поездок в мега-городах Китая. С точки зрения дизайна он более сложный — используются нестандартные формы, анимированные иллюстрации и декоративные элементы. При этом элементы повторяются от страницы к странице — сложность кроется в построении композиции и изначальной проработке дизайн-концепции. Из фронтенда зацепило появление заголовков и фотографий. Юзабилити не понравилось: кнопка меню не зафиксирована и нет кнопки «Наверх». Из-за этого приходится листать страницу наверх, чтобы добраться до навигации.

Третий — сайт Укркабля. Здесь используются анимации появления блоков как во втором примере. Еще нравится нестандартная сетка, по которой расположились фото и текст. Очень минималистично, но при этом симпатично.

UX-дизайнеру: как проводить юзабилити-аудит сайта

К тебе пришел заказчик с просьбой переделать сайт. Чтобы переделка помогла заказчику, нужно понять задачу сайта. Для этого определяется бизнес-задача сайта, а также целевая аудитория (полезные ресурсы по анализу ЦА оставил в инсайдах # 3 и инсайдах # 2).

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

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

Frontend-разработчику: как через 3d-анимации сделать блоки на сайте интерактивными

Еще весной, когда анализировал рынок веб-разработки СПб, познакомился со студией Cuberto. Посмотрите, как на их сайте на странице проектов анимирована кнопка «Подробнее» и буква по середине экрана. Они реагируют на положение мыши на экране — кнопка «примагничивается» к курсору в определённой области, а буква наклоняется вслед за мышью.

Затем я увидел нечто подобное у студии Pink-man. Обратите внимание как на главной странице при наведении мыши на блоки проектов они наклоняются вслед за курсором.

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

Если jQuiery использовать не хочется, нашел независимый вариант. Он основан на движке anime.js (по сравнению с jQuiery он «воздушный»). По сути, плагин позволяет сделать то же, что и tilt.js. Документацию и примеры можно посмотреть здесь.

Я использовал второй вариант и добавил tilt-эффект карточкам в блоге, блоку «рекомендации» на странице отдельной статьи и карточкам с последними записями блога в панели управления. Это оживило страницы и не сказалось на скорости загрузки. Эффект работает и на touch-устройствах, но не полностью.

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