Если сегодня посмотреть многие свои работы за давностью почти в десяток лет, то частенько можно начать удивляться – неужели это было кому-то интересно. Стили дизайна развиваются семимильными шагами и каждого из нас это ускорение поглощает и не дает возможности избежать этого. Кто из нас не удалял слои в Photoshop, потому что был недоволен общей работой? Аналогично хочется взяться за старые проекты и заменить одно на другое, тем самым преобразив и осовременив имеющееся.
Тем не менее, некоторые тенденции развиваются несколько медленнее, чем другие. А некоторые были «раздуты» общественностью так сильно, что не сразу осознается: скрывается ли удобство использования за красотой и новаторством ? Сегодня мы совершим своеобразную прогулку в прошлое и посмотрим на некоторые тенденции, которые тогда были ну очень крутые, а сейчас они не устарели и используются еще, но уже не воспринимаются как «ноу-хау» и даже способны раздражать посетителей.
Что есть наш анализ веб-дизайна
Для дизайнеров разговор о том, что в их проекте что-то устарело или выглядит неимоверно «раздутым» трендом, воспринимается иногда как оскорбление их чувств. Единственный способ не оскорбляться – стараться использовать не только все новое и самое последнее, но… в разумных пределах, задумываться над тем: «А оно вообще нужно? Как сделать удобнее?». Хотя возможно, некоторые вещи могут привести читателей в огорчение.
Ключом к нашему анализу также станет понимание того, что любая тенденция не является по своей сути хорошей или плохой. Они представляют собой способ наблюдения за вкусами миллионов в течение нескольких лет, за развитием брендов.
Таким образом, тенденции способны давать фантастические уроки истории того, как развивались стили веб-дизайна. Мы часто говорим о том, что было модно в одежде, киноиндустрии, сравниваем и анализируем. Аналогично происходит и в веб-дизайне. Практически полезный момент заключается в том, что такой анализ позволяет избежать ошибочного и ненужного. Вы способны одеть на первое свидание галстук и футболку? А как долго подбираете галстук и рубашку? У всех всё по-разному, но стандарты остаются без изменений.
Карусель
Традиционное понятие карусели – вращающаяся платформа, которая приводится в движение автоматически или усилиями посетителей. В веб-дизайне карусель также бывает автоматической или пользователи могут кликать по боковым стрелкам и сменять этим информационные слайды. Используется она на домашней странице, где больше места для нее и больше пространства для фокуса пользователей. Но тут уже возникает и требование украсить и насытить слайды, чтобы их действительно было интересно смотреть.
Что же происходит с каруселью? Карусель популярна и факт остается фактом: автоматическая смена слайдов имеет свое преимущество. Но зачастую изучение слайда заканчивается до того, как он сменится или наоборот. Если сайт особенно посещаем, то почти ежедневное наблюдение за одними и теми же слайдами приводит в уныние. К сожалению, невозможно выбрать одно общее время смены слайдов для всех людей. Все имеют разный интерес и разное время на чтение и рассмотрение.
Карусель не устарела, как таковая, но её использование имеет условности, важные для того, чтобы пользователи не раздражались.
Альтернатива карусели
С преобладанием мобильных систем и адаптивных сайтов модель «нажал-прокрутил-взаимодействовал» становится ненадежной. Поэтому карусель все больше заменяется обычной навигацией по сайту или сеткой с информационными блоками. Сетки чуть более удобны, позволяя пользователю на экране сразу видеть много информации из текста и изображений. И наш мозг к этому более привычен, ибо в социальных медиапроектах мы видим тоже самое.
Фантастическим примером комплексной сетки является проект Mashable, а также интересны и JDsports, HM, где карусель используется еще, но не как единственный источник информации, существуют и альтернативные способы подачи информации.
Web 2.0
Объемность и блеск, характеризующие стиль Web 2.0, почти ушли из мира веб-дизайна. Хотя еще можно встретить тот или иной проект, где в верхнем углу будет находиться объёмная кнопочка небольшого размера приглушенного цвета. Но крайности в свечении и фантазийной пластичности в текстуре увидеть уже нереально. Сейчас в тренде все более плоское, тонкое, спокойное. Посему, при очень большом желании использовать хотя бы один элемент объемным, в стиле web 2.0, нужно быть неимоверно аккуратным. В противном случае, дизайн будет выглядеть устаревшим автоматически.
Альтернатива в простоте
Хорошая новость в том, что «привлекательную» кнопку веб-дизайнеры создают обычными средствами современного стиля. Всего и нужно использовать градиент или падение тени под небольшим градусом. Такой эффект не становится показным. Посмотрите на анимацию кнопки «Get starter» проекта Shopify. Все выдержано по-современному, но выглядит ничуть не скучнее web 2.0.
Весьма эффектно представлен дизайн сайта Kinex Media, где иконки деятельности компании буквально преобразовываются на глазах, а сами они обладают объемом, созданным с помощью градиента. Невероятно красиво все в целом.
Оригинальны и The Whiterun, Van der waal, Ignite Online, The Right Crowd. Каждый из них уникален, самобытен и, несмотря на, казалось бы, что-то устаревшее, таковыми не выгладят и не являются. Все слишком точно и ювелирно.
Скроллджекинг (scrolljacking)
Занятная анимация прокрутки информации, но также это и одна из немногих вещей, способная ввести пользователей в раздражение или удручение. Главное не ошибиться при работе над активацией анимации и продумывании интересного сюжета. Оговоримся: это не устаревшая вещь, но очень сложная, так как в случае с каруселью, скорость прокрутки колесиком мышки не всегда соответствует времени появления новой информации.
Анимация Apple mac Pro интересна и насыщенна, но медленная. Успеваешь прокрутить раз пять колёсико, а информация еще не сменилась. Аналогично выглядят и проекты Hannahpurmort, Tombow и Engzell, способные немного озадачить посетителей, хотя и существует своеобразная загрузка полоски прокрутки. Также немного сложно воспринимать и прокручиваемую анимацию на Three Cents, хотя она невероятна красива, информативна.
Вопреки всему этому, scrolljacking весьма эффектно обработан на Tbilisi Gardens, Omega Watches, Carv. Последний пример тем более насыщен дополнительными мини-карусельками, которые показывают время загрузки следующего видеослайда и не только.
Альтернатива в отказе
Если создавать анимацию смены контента все же сложно или неприемлемо – попросту оставьте на странице обычный скроллинг и информативность изображений. С разными эффектами прокрутками веб-дизайнеры часто добиваются куда большей информативности и удобства для пользователей.
Погружение c 3D Experience
Эффект погружения – возможность манипуляции человеческими чувствами и психическим состоянием пользователя. Речь идет, в первую очередь, о возможности впечатлить посетителей сообразным сюрреалистическим образом. С одной стороны, со многим они знакомы на физическом уровне и имеют возможность виртуально, но взаимодействовать со знакомым вновь. С другой – завораживающая атмосфера поглощает наши мысли, музыка влияет на восприятие и воспоминания, анимация переносит в далёкое детство и так далее.
Стиль погружения в веб-дизайне часто используется мастерами, чтобы представить дорогие предметы роскоши (одежда или автомобили), красоту и масштабность киносъёмок или что-то из сферы развлечений.
Так о чем речь. Проект Batman Arkham Knight c Batmobile предлагает эффект погружения с возможностью прокрутки и изучения сайта вдоль и поперек. Но сама карусель заблокирована на автоматическом уровне, а если не заметить её, то прокручивая колесико мышки, её пропускаешь. Соотвественно, посетитель пропускает и «добротный кусок» контента. Мелкий текст, множество не до конца понятных кнопочек и очень маленьких стрелочек. Добавим также неясность того, что изучать автомобиль Бэтмана предстоит вручную, кликами, а не с помощью колесика мышки.
Нет, сайт хорош в целом, ради брендинга, технологий видеографики, эффекта погружения и пр. Но с точки зрения пользовательского опыта – недоработан.
Аналогично не совсем удобно выглядит и Dreamliner, когда, выбирая часть самолёта для изучения, нужно еще кликать и кликать, дабы дождаться 100% загрузки, как минимум.
3D Experience – это красиво, но опыт реализации таких высококачественных эффектов в веб-дизайне без постоянного и кропотливого тестирования может превратиться в рецепт катастрофы. Очень многие люди полагают, что если сайт не выглядит как «среднестатистический», то это уже не сайт и у конкурентов аналог лучше. Вот и приходится веб-мастерам объединять разные элементы в самых невероятных вариантах.
Альтернатива в сочетании
Эффект 3D-погружения иногда меняют на предоставление возможности пользователям активировать информацию ЛКМ вкупе с расширенной навигацией. Что-то похожее на примере о часах выше, Omega Watches. Или, например, Havaianas, который, казалось бы, выглядит весьма скромно, но общая атмосферность дает эффект аналогичный трехмерному погружению.
Курсивный текст
Занятная тенденция, которая до сих пор еще живет и часто проявляет себя. Целые текстовые блоки на том или ином сайте создается курсивным шрифтом, причем еще и каллиграфическим типом. И это вопреки тому, что многим людям очень тяжело читать такой текст до конца. Все же в обыденной жизни мы редко сталкивается с курсивным щрифтом и не очень привыкли к нему.
Более того, каллиграфия с течением лет меняется и некоторые элементы, завитки, написание в целом претерпевают изменения. Достаточно вспомнить и сравнить, как учили писать нас в школе каллиграфически и как писали наши… бабушки. Разница в написании и виде букв очень огромна. И большая беда в том, что многие веб-мастера используют шрифты с начертанием еще 90х годов. Простой пример Clinica Dentalsosa
Альтернатива в обновлении
В попытке поразить пользователей замысловатостью и «заковыристостью», куда проще использовать такие элементы выборочно и только для единичного акцента. В интернете есть десятки современных каллиграфических шрифтов, созданных независимыми художниками. Они прекрасно читаются и выглядят фантастически красиво. Например, Brayden Family, Bodega Script, Dope Script и другие.
Проект Three Cents отлично демонстрирует сочетание курсивного и обычного шрифтов, которые еще и читаются, и используются не для блоков текста, а для заголовков и надписей.
Интересны также Alpina Web, Olivier Bernstein, Lyntonweb, Nextinymarketing и Fonds-maisonbernard, где как раз и использовался курсивный шрифт для текстовых блоков, но он разборчив.
Выводы
Просто оттого, что мы можем закодировать и сконструировать практически все, что видим и представляем в воображении, это не значит, что мы все это должны делать. Впрочем, это может быть очень интересным для того, чтобы попробовать, хоть разок. Ибо, не попробовав, не будет и развития стилей, не появятся с течением времени и новые тенденции. Важно только разумно использовать и творить, тестировать. Обсуждать то, что получается, с тем, что ожидается получить. И только после всего приступать к реализации.
Все примеры выше – небольшая иллюстрация отдельных мыслей о том, что нынешние тенденции не столько устарели, сколько могут при неумелом использовании пагубно повлиять на ваш проект и испортить все впечатление от него.
До тех пор пока четко не представлены цель и пути реализации наших мыслей есть большая вероятность, что просто желание создать ту же интерактивность, например, приведет к провалу. Совет мастеров всегда один: терпение и незлоупотребление трюками, если работа идет над проектом с инновационным уклоном. Лучше сделать что-то минимальное, но изящное, уточненное, эстетически атмосферное.