Самые горячие тренды веб-дизайна 2013. Часть 2

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

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

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

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

Бесконечная прокрутка веб-страницы

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

Бесконечная прокрутка веб-страницы

11. Инфографика

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

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

Вот вам несколько моих самых любимых примеров инфографики на сайтах:

Инфографика на сайте Инфографика на сайтеИнфографика на сайте

12. Страницы-слайды

Динамические сайты стали очень популярными, когда в моду вошли Flash и ActionScript. Сегодня же динамические эффекты добавляются в основном с помощью JavaScript/ jQuery, и это сильно повлияло на то, как дизайнеры стали создавать веб-сайты.

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

Переключение веб-страниц как слайдов

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

13. Эффект тени

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

Кроме того, если несколько лет назад придать элементам эффект тени было весьма затруднительно (для этого требовался определенный тип JavaScript или специальный фон, созданный в Photoshop), то сегодня он может быть получен с помощью всего нескольких строк в CSS!

Эффект тени на сайте Эффект тени на сайте

Эффект глубокой тени приятно оживляет сайт и иногда даже создает иллюзию 3D. Все это выглядит очень интересным и современным, а потому способствует привлечению посетителей.

14. CSS3 анимация

С помощью различных свойств CSS дизайнеры сегодня могут анимировать на страницах сайта всевозможные эффекты. Превосходный пример представлен в учебнике CSS от Codrops (нажмите кнопку «Activate me»). Обратите внимание на то, что на одной и той же странице вы можете настраивать разные времена и параметры анимации.

CSS3 анимация на сайте

Данный тренд, безусловно, является одним из самых перспективных и многообещающих в нашем списке. Мы уверены, что в ближайшие месяцы произойдёт настоящий бум веб-анимации, что создается без использования JavaScript. Для тех, кому интересно и кто желает попробовать, представляем хорошую библиотеку CSS3 анимаций Animate.css.

15. Одностраничный веб-дизайн

Одностраничный дизайн веб-сайтов появился с самого момента создания World Wide Web. Но за последние годы этот дизайнерский прием сильно эволюционировал и сегодня одностраничные сайты являются очень удобными и приятными для пользования.

Дизайн сайта http://www.wooddecker.ru/ является прекрасным примером одновременного применения многих тенденции, из тех, что были перечислены в этой статье. Во-первых, этот сайт является одностраничным, и все его страницы переключаются сверху-вниз подобно слайдам (пункт 12). Во-вторых, вся информация о продуктах и о магазине представлена здесь в виде инфографики (п. 11). Кроме того, прокрутив страницу вниз, вы заметите, что нижняя панель страницы является зафиксированной и не меняется при переключении слайдов (п. 3).

Одностраничный веб-дизайн

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

16. Круглые элементы

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

Предлагаем вам несколько примеров веб-дизайна с круглыми элементами, что просто источают свою уникальность:

Использование круглых элементов в веб-дизайне Использование круглых элементов в веб-дизайне Использование круглых элементов в веб-дизайне

***

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *