Блог Нетологии

Советы и обзоры для новых высот в карьере, бизнесе и жизни

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

1. Плоского дизайна интерфейса станет больше

Пора констатировать, что простота и чистота одержали верх над украшательством и излишествами. Вначале на это сильно повлиял Windows 8, а затем и компания Apple отказалась от скевоморфизма в iOS7. Можно утверждать, что плоский дизайн прочно стоит на ногах.

Windows 8 интерфейс
Интерфейс операционной системы Windows 8.


Интерфейс операционной системы Apple iOS 7.


Интерфейс приложения Ski Buddy.

2. Адаптивный дизайн

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

Конечно, в большинстве компаний принцип mobile first все еще не применяется. Обычно это больше похоже на mobile second — о мобильных устройствах многие думают в последнюю очередь. Но тех, кто будет внимательно относиться к адаптивному дизайну, ROI не заставит себя ждать.

3. Еще больше скроллинга

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

Параллакс-скроллинг (когда фоновые изображения в перспективе двигаются медленнее, чем элементы, расположенные на переднем плане), горизонтальный скроллинг, скроллинг по колонкам и бесконечный скроллинг — все эти вещи будут еще больше развиваться в 2014 году и в будущем.

4. Больше прекрасного от HTML5

Вместо того чтобы читать здесь восхищения по поводу HTML5, посетите Codepen и поиграйтесь с несколькими примерами, чтобы понять, какие возможности нам открываются. Кроме того, оцените эти несколько сайтов креативных веб-агентств, которые отлично используют в работе HTML5 с добавлением CSS3 и jQuery.

5. Больше ужасного от HTML5

Дизайнеры без тормозов постоянно совершают преступления против удобства пользователей. То, что вы можете что-то сделать с помощью HTML5, еще не значит, что вы должны это делать.

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

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


Не используйте красоту в ущерб удобству.

6. Микро-UX

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


Оцените этот прогресс-бар на сайте The Daily Beast.

7. Меньше текста

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

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


Концепт медицинского сервиса.


Такой подход оправдан для сайтов с портфолио.

Сервис Snapchat
Сервису Snapchat не помешало бы побольше текста.

8. Минимализм в навигации

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

Medium
Пример скрытой навигации на Medium.

Smart Home
Приложение Smart Home.

9. Использование CSS вместо картинок

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

10. Видео и динамичный фон

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

Firestorm
Медиапроект Firestorm от The Guardian построен на динамическом фоне.

Магазин оптики The House of Eyewear
Магазин оптики The House of Eyewear использует динамический фон для представления продуктов.

11. Более богатый опыт взаимодействия с контентом

Эта тенденция следует за предыдущей. Тот же Firestorm от The Guardian хорошо иллюстрирует возможности, которые имеются сейчас для вовлечения аудитории в контент. Многие издания шагают все дальше в своих экспериментах, комбинируя текст, изображения, видео, интерактивные элементы и скроллинг для обогащения опыта пользователей при взаимодействии с контентом.

City of Dogs
Пример использования различных форматов контента в одном из проектов ESPN's Grantland.

12. Больше информации на одной странице

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

8 Stories
Пример того, как отобразить дополнительный контент на той же странице, — проект Stories от H&M.

13. Разнообразие типографики

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

14. Монохромный дизайн

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

Календарь Qatar Airways
Дизайн календаря на сайте Qatar Airways.


Дизайн приложения Qatar Airways.

15. Многоцветность

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


Сайт телефонной компании Сolouredlines.

16. Плиточный, блочный дизайн

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


Сайт небольшой команды разработчиков Etchapps.

Тема Pravda
Pravda — тема для WordPress.

Сайт агентства Silktricky
Сайт креативного агентства Silktricky.

17. Большие и красивые картинки

Большие картинки и фоновые изображения вместо обычной заливки фона быстро набирают популярность — ну и, конечно, они отлично смотрятся на retina-дисплеях. Посмотрите на галерею победителей Site of the day, и этот тренд станет очевидным.

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

18. Неподвижные элементы сайта

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

Сайт Awwwards
Пример неподвижного меню на сайте Awwwards.

Оригинал статьи: 18 pivotal web design trends for 2014 на Econsultancy.

А вы как думаете, какие еще тенденции дизайна мы увидим в 2014 году? Делитесь вашими мыслями в комментариях!


Перевел Алексей Полехин,
руководитель онлайн-интенсива «Веб-дизайнер»

 

comments powered by Disqus

Онлайн-университет

Получите 9 профессий, востребованных рынком. От мечты до диплома за 2 месяца.

Присоединяйтесь к нам в соцсетях!

Сообщите о предложении или проблеме