Главная Новости

8 трендов в дизайне сайтов, о которых обязан знать маркетолог


Опубликовано: 23.08.2018

видео 8 трендов в дизайне сайтов, о которых обязан знать маркетолог

Как увеличить продажи в бизнесе | Туннели продаж в мессенджерах и чат-ботах

Предлагаем Вашему вниманию авторский перевод статьи Рэйчел Спранг о новых трендах в веб-дизайне сайтов. Рекомендуем перейти по ссылке каждого примера и посмотреть, насколько красивы и удобны сайты, которые их применили. Особенно завораживает сайт, созданный к фильму «Жизнь ПИ».



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

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


Личный бренд за короткий срок? Реальные кейсы создания личного бренда

Тренд №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 » используется данная техника.

В чем преимущество?

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

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

Как вы считаете, какие еще существуют приемы, которые маркетологи должны применять при проектировании веб-сайтов?

rss