Предлагаем Вашему вниманию авторский перевод статьи Рэйчел Спранг о новых трендах в веб-дизайне сайтов. Рекомендуем перейти по ссылке каждого примера и посмотреть, насколько красивы и удобны сайты, которые их применили. Особенно завораживает сайт, созданный к фильму «Жизнь ПИ».
После освоения какой-нибудь новой дизайнерской техники вас когда-либо охватывало чувство, что на сайте есть еще что-то новое, захватывающее, что пока вам неизвестно? Поверьте, я знаю, о чем говорю.
В области дизайна постоянно возникают какие-то новые веяния, которые специалисты берут на вооружение. Некоторые из этих тенденций прочно «оседают» в дизайне, а какие-то носят сезонный характер. Предлагаю вашему вниманию многообещающие тренды в области дизайна, о которых вы, как уважающий себя маркетолог, должны знать при создании новых сайтов либо при ребрендинге старых.
Тренд №1: Адаптивный дизайн
Мы уже не раз говорили о том, что адаптивный дизайн – это одна из последних тенденций в области веб-дизайна, которая зарекомендовала себя с самой лучшей стороны и прочно вошла в список современных требований к дизайну веб-страниц.
Адаптивный дизайн сайта означает, что ресурс «подстраивается» под любой размер экрана устройства, с которого пользователь просматривает сайт. Подобная гибкость обеспечивает позитивный опыт в работе с пользователями, ведь на качество отображения сайта никак не влияет, с какого устройства заходит человек (смартфон, планшет, стационарный компьютер и т.д.).
Нам всегда нравились сайты с адаптивным дизайном. И именно поэтому мы создали новую «Систему по оптимизации контента» (Content Optimization System (COS)). Она гарантирует, что любой сайт, разработанный с помощью HubSpot, будет адаптивным.
«Outdure» является отличным примером сайта с адаптивным веб-дизайном. Посмотрите, как тексты и картинки органично отображаются на различных устройствах.
В чем преимущество?
Сайты с адаптивным дизайном хороши тем, что их любит Google и создавать/управлять подобными сайтами намного легче как дизайнерам, так и маркетологам.
Однажды создав сайт с адаптивным дизайном, вы лишаете себя головной боли о том, что ваш сайт не будет корректно просматриваться на каком-нибудь новом мобильном устройстве с нестандартным расширением экрана, т.к. он будет подстраиваться под любые параметры. Также вы будете уверены в том, что пользователь со стационарного компьютера будет видеть нужную версию сайта, а не ту, что предназначена для девайсов с маленьким экраном.
Можно с уверенностью сказать, что адаптивный дизайн сайта хорош для всех: как для владельца – не надо создавать несколько сайтов, а необходимо лишь следить за одним, так и для пользователей – сайт отображается в удобном формате, вне зависимости от того, с какого устройства вы решили зайти на него.
Тренд №2: Поддержка retina-дисплеев
В 2010 году компания «Apple» объявила, что у iPhone 4 будет установлен retina-дисплей. Подобная весть у многих обывателей не вызвала никаких эмоций, т.к. человеку, далекому от мира дизайна, это ни о чем не говорило.
Зато дизайнеры приняли весть на ура. Решение об установке дисплея retina говорило о том, что качество картинок, отображаемых на дисплее, будет заметно выше.
На заметку: на дисплее retina можно увидеть в два раза больше пикселей, чем на обычном. Это значит, что дизайнеры могут размещать изображения более высокого качества, где можно уделять внимание даже самым мелким деталям.
Небольшое отступление – в случае если вы ранее не видели изображения на retina-дисплее, вы не заметите разницы между ними и обычными изображениями.
В чем преимущество?
Позволяет размещать картинки с разрешением в два раза больше, чем обычно. Это дает возможность разработчикам сайтов создавать более продуманный дизайн (в деталях). Retina-дисплеи гарантируют более качественное отображение деталей на сайте.
Тренд № 3: Размещение огромных фотографий в качестве фона сайта
Вы когда-нибудь заходили на сайт, чей фон был настолько потрясающим, что аж дыхание захватывало? С каждым годом все больше компаний используют в качестве фона для своего веб-сайта огромные фотографии, которые сразу же дают посетителям представление о компании.
Например, колорадский ресторан «Sweet Basil», что в городе Вейл, использует в качестве фона несколько фотографий интерьера своего ресторана.
В чем преимущество?
Использование фотографий в качестве фонового изображения сайта является отличным маркетинговым ходом, т.к. пользователи получают сразу же представление о деятельности компании – начиная от стиля, которого вы придерживаетесь, и заканчивая целями.
Из фото, представленного выше (ресторан «Sweet Basil»), сразу становится понятно, какая царит атмосфера внутри этого заведения, и посетителям сайта легче решить, хотят ли они его посетить. Кроме того, у вас в арсенале всего несколько секунд, чтобы заинтересовать интернет-пользователей и убедить их остаться на вашем сайте – и в этом вам как раз может помочь размещение фотографий в качестве фонового изображения.
Тренд №4: Бесконечная прокрутка
Вы можете увидеть этот прием воочию, когда будете просматривать картинки в Google. Бесконечная прокрутка означает, что при прокрутке страницы вниз ваш сайт продолжает загружаться и отображаться на экранах пользователей.
Например, на вебсайте «Cutest Paw» вы можете бесконечно долго наслаждаться забавными фотографиями животных. Разработчики сайта используют эту технику еще и потому, что у них огромное количество фотографий, которые необходимо сразу же загрузить.
В чем преимущество?
Все очень просто – бесконечная прокрутка удобна для пользователей. Во-первых, использование этой техники позволяет пользователям просто прокручивать страницу, а не перепрыгивать со страницы на страницу, которых в данном случае огромное множество. И во-вторых, загрузка одной, пусть и большой страницы занимает намного меньше времени, чем загрузка новой страницы сайта.
Используйте данную технику в том случае, если на вашем сайте много фотографий. Сделайте так, чтобы новые изображения загружались по мере прокрутки пользователем страницы.
Тренд №5: Эффект параллакс-прокрутки
Параллакс-прокрутка – это техника в компьютерной графике, при которой слой фонового изображения движется с меньшей скоростью, чем объекты на переднем плане, таким образом создается эффект трехмерного пространства.
Многие сайты уже взяли на вооружение данный прием, только надо помнить, что все хорошо в меру, чрезмерное увлечение данной техникой не приведет ни к чему хорошему. Однако если вы знаете, как использование параллакс-прокрутки поможет сделать ваш сайт привлекательнее и удобнее для пользователей – примените ее.
Пример: когда вышел уже культовый фильм «Жизнь Пи», маркетинговая компания использовала данную технику на веб-сайте фильма.
В чем преимущество?
Параллакс-прокрутка привносит жизнь на сайт. Изображения на сайте остаются в формате 2D, но с использованием данной техники возникает эффект трехмерности, т.е. 3D-эффект. Параллакс-прокрутка также помогает маркетологам полнее рассказать пользователям о деятельности компании и преподнести информацию эффектно. При прокрутке страницы вниз пользователи находят больше информации о продукции и услугах, т.к. изображения и текст появляются в различных местах.
Данная техника может оказать крайне благоприятное влияние на деятельность компании, ведь она буквально оживляет сайт и делает его интересным для посетителей.
Тенденция №6: Масштабируемая векторная графика
Масштабируемая векторная графика (SVG) – это векторный формат изображения на основе языка разметки XML, который поддерживает как неподвижную, так и анимированную интерактивную графику. SVG позволяет дизайнерам работать с изображениями на качественно новом уровне – на уровне интерактивности и анимации. Из видео ниже (кликните по картинке) видно, что SVG файлы могут перенести вашу графику и анимацию на более высокий уровень.
В чем преимущество?
Благодаря тому, что масштабируемая векторная графика использует векторные изображения, вы можете менять их размеры и при этом нисколько не терять в качестве. Также с данным форматом намного проще работать при создании анимации, как видно из примера выше.
Графический дизайнер Иван Сунгуров заявляет: «Масштабируемая векторная графика заменяет растровые изображения, т.к. современные дизайнеры продолжают заниматься оптимизацией скорости сайтов и их гибкостью. Именно поэтому в скором времени SVG станет основным средством при создании любого отзывчивого сайта. Дизайнеру нужно будет лишь экспортировать изображения в данном формате, и он получит качественное свежее изображение, которое будет одинаково хорошо отображаться как на наручном дисплее SmartWatch, так и на retina-дисплее».
Тренд №7: Типография/тексты
Сейчас многие дизайнеры используют широкий выбор типографии, для того чтобы сделать навигацию по сайту для пользователей максимально удобной. Веб-типография включает в себя заголовки страниц, которые помогают сайту выглядеть организованным, но при этом аккуратным и красивым. Разработчики всегда использовали типографию при создании дизайнов, однако на сегодняшний день существует огромнейший выбор всевозможных шрифтов, что дает больше возможностей.
Ярким примером использования типографии может стать сайт «The New Yorker» – ресурс выглядит предельно аккуратным, красивым и узнаваемым на национальном уровне.
В чем преимущество?
Благодаря тому, что у типографии есть такие характеристики, как серия, стиль, размер шрифта, ее грамотное использование может сделать бренд легко узнаваемым и уникальным. При этом сайт будет выглядеть аккуратным.
Типография позволяет создать простой и понятный пользователю дизайн. В случае с «The New Yorker» сайт не загроможден дизайнерскими «штучками», он предельно аккуратен, понятен и дает пользователям достаточно информации о деятельности компании.
На главной странице большим шрифтом выделена та типография (а, следовательно, бросается в глаза), которая дает представление о том, куда нужно кликнуть, чтобы прочитать интересующую нас информацию, будь то новости, вопросы культуры и т.д.
Тренд №8: Наложение (оверлей) Dropdowns
Наложение dropdown – это форма раскрывающихся меню, которые накладываются поверх контента сайта. Это значит, что при нажатии на опцию в навигации сайта другие опции всплывают поверх меню без перенесения пользователей на новую страницу.
На сайте «iOffice» используется данная техника.
В чем преимущество?
Данная техника хороша для компаний, которые хотят разместить дополнительные ссылки на главной странице, но при этом боятся нагромождения текста. Использование всплывающего меню позволяет выбирать какую-нибудь функцию и при этом оставаться на странице, видя остальной контент.
Коммерческие сайты предпочитают использование данной техники на своих сайтах, т.к. это позволяет им максимизировать отзывчивость сайта как при просмотре на смартфонах, так и на планшетах.
Как вы считаете, какие еще существуют приемы, которые маркетологи должны применять при проектировании веб-сайтов?