Креадивный блог

Вернуться обратно

Двадцать тенденций веб-дизайна две тысячи тринадцатого. Часть I

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

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

1. Адаптивная верстка

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




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

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

Однако, крупные корпорации, такие как IBM, Toyota, Blackberry и многие другие стоически не хотят переходить на новые технологии, довольствуясь прекрасно работающими мобильными версиями их интернет-ресурсов. Связанно ли это с неповоротливой бюрократической машиной, сложностью их сайтов или просто отсутствием необходимости — надо спросить у них ;)
Можно только сказать, что поддомены с буквой «m» будут еще долго радовать глаз пользователей мобильных устройств.

2. Дисплей Retina


«Картинка на вашем устройстве стала такой четкой и яркой, как никогда прежде»
— Из рекламы Apple. Вольный перевод.


Маркетологи компании Apple настойчиво уверяют нас в том, что их специалистам наконец удалось расщепить пиксель. Ну, допустим.

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

Для облегчения труда дизайнеров, добрыми людьми из компании Imulus была создана библиотека RetinaJS, которая автоматически отображает увеличенную картинку, если пользователь просматривает сайт с устройства с дисплеем Retina. Это намного удобнее, чем использование CSS Media Queries :)



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

3. Фиксированные блоки

Очень забавный тренд начавший широко применяться именно в 2013 году, хотя свойство CSS “position:fixed;” существовало еще давно. Но именно сейчас эта тенденция набрала полную силу.
Свойство fixed позволяет фиксировать один или несколько блоков относительно страницы вашего сайта. Это действительно удобно — таким образом можно «прикрепить» навигацию, логотип или рекламное объявление в нужном месте и пользователю не придется тратить драгоценные секунды на их поиск. Эти элементы всегда будут видны и доступны.



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

4. Большие фотографии на фоне

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



Я люблю большие фотографии — они приятны для глаз и хорошо воспринимаются аудиторией. Но кроме того, при грамотном использовании, такой подход может стать основой вашего интернет-маркетинга, как это произошло, например, с Renaissance Development.

5. Прозрачность CSS3

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

— Photoshop больше не нужен — во всю кричат аналитики Codrops, а так это или нет — покажет время ;)


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



Еще одной интересной техникой для манипулирования прозрачностью элементов является задание прозрачности через пространство RGBA. При написании CSS вы можете задать цвет с помощью красного, зеленого, синего каналов и альфа-значения прозрачности. Например, значение «rgba (255, 255, 255, 0.6) » будет генерировать белый цвет только на 60% непрозрачности.

Это, конечно, всего лишь модная тенденция, но стоит ожидать ее развития и будущем.

6. Минимализм на целевых страницах

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

Для привлечения клиентов идеально подходит создание целевой (посадочной) страницы. Последние тенденции в этом направлении диктуют нам идеи минимализма — сделать все максимально простым и сосредоточится на главном — на продукте.



Хороший пример такого подхода посадка PictoPro, компании продающей векторные иконки. Очень хитрый прием использования основного продукта как в качестве фона, так и в качестве товара ;)
Но тем не менее, весь текст легко читается и покупка осуществляется за один клик.
Проще и быть не может.


7. QR-коды

Я увидел на этой картинке пушистого котёнка. Доктор, я правильно ответил?
— Нет, это QR-код.


Эти маленькие черные квадраты поражают воображение как маркетологов, так и потребителей. Смартфоны разбирают как горячие пирожки, а покупатели требуют скорости и удобства. Так стоит ли удивляться популярности QR кодов?

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

Сейчас вы можете обнаружить QR-коды везде: в наружной рекламе, листовках, брошюрах и даже в объявлениях в подъезде. А 2013 год внес новый тренд использования их и в веб-дизайне. Все чаще черные квадраты появляются на страницах интернет-сайтов.



С течением времени передача данных становится все быстрее, ускоряется ритм жизни и использование QR-кодов это отличный способ взаимодействия с покупателем — мощнейший инструмент маркетинга и мобильной коммерции (программы, разрабатываемые Paypal, Visa, и Mastercard предрекают мобильным платежам большое будущее), способствующий совершению покупок.

Кроме того, QR-коды могут использоваться для сбора статистических данных или мониторинга форм взаимодействия потребителей с товаром. Да хоть, заполнение формы авторизации на сайте интернет-магазина (кстати, очень облегчает процесс авторизации и ускоряет процесс покупки).

Но при использовании технологий QR-маркетинга следует учитывать, что для разных кодов просто необходимо создавать разные ссылки. QR-код размещенный в магазине должен отличаться от кода размещенного в печатном издании. Это позволит отслеживать эффективность проводимых кампаний, размещать торговые предложения в реальном времени и создавать базы лояльных клиентов. Также это позволит получать последнюю информацию и повысить ROI.

В общем, у QR-маркетинга очень светлое будущее, и этот тренд имеет все необходимые предпосылки для того, что бы вырасти в отдельную отрасль.

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


8. Медиа-иконки

Все мы давно поняли, что маркетинг является одним из определяющих факторов успеха или неудачи любого интернет-проекта.
Социальные медиа-ресурсы тоже давно это поняли и стали использовать в своих целях. Первыми, кто это понял были сервисы хранения закладок Digg и Reddit.

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



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

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

Таким образом, глобальное увлечение социальными сетями неожиданно стало предпосылкой к развитию еще одного канала интернет-рекламы ;)

9. Сверхподробные иллюстрации

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



А возможно, выверенные до последнего пикселя, такие цифровые картины — это отклик на появление дисплеев Retina.

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




10. Бесконечная прокрутка

Бесконечная прокрутка активно используется, как минимум, уже несколько лет.
Но действительно популярной она стала именно в 2013 году.

Pinterest, MySpace и Tumblr взяли эту идею за основу, и это прекрасно сработало.



Вы можете искать что-нибудь на сайте и результаты поиска будут подгружаться автоматически и вам не надо перезагружать страницу. Это так просто.
В социальной сети «В контакте» таким образом сделала реализация новостной ленты — фида. Однако, там она, реализована немного криво ;)

В целом, это шикарный способ, который работает и выглядит в каждом дизайне просто феноменально.

Вернуться обратно

Категории

Авторы

Twitter


Бренд-маркетинговое агентство KREADO Контакты:
Адрес: 17-я В.О. линия, дом No 4-6, корпус лит. Е, пом.1-4Н, оф.Т-215-1Санкт-Петербург,
Телефон:+7 (812) 408-1376, Электронная почта: info@kreado.ru Часы работы: