Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Семь трендов в веб-дизайне на 2015 год

16 декабря 2014 | Опубликовано в статьюшечки | 17 Комментариев »

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

 

1. Адаптивная типографика

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

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

Существует три существенных аспекта, влияющих на читабельность текста в вебе:

  1. Размер шрифта
  2. Ширина колонки
  3. Высота строки

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

2. Верстка без кода

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

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

3. Эволюция адаптивного дизайна

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

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

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

4. Плоский дизайн в расцвете

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

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

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

5. Чем больше картинки тем лучше

Не только в веб-дизайне становится большего размера. То же происходит с изорбажениями!

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

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

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

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

6. Анимированные параллакс-эффекты

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

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

В 2015 году использование параллакс-эфектов станет еще популярнее.

7. Веб-графики

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

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

В 2015 году все больше клиентов захотят видеть подобные веб-графики в качестве части дизайна.

Автор статьи Webydo

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Макс
    Thumb up Thumb down +7

    Ну всё верстальщики больше не нужны ... Ребята всё пропало)))))))))))))

    Ждём от вас теперь подборку этих магических инструментов)

    Openixxx Ответ:

    Thumb up Thumb down -2

    Макс про Adobe Muse не слышали?

    Дима Ответ:

    Thumb up Thumb down +2

    Видел, показывали мне... Для недолендингов пойдет....

    Timofey Ответ:

    Thumb up Thumb down -1

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

    Openixxx Ответ:

    Thumb up Thumb down 0

    Timofey вот например один из моих лендингов сделанных в музе:

    promedia74.ru/vatr1/

    страшненький? кривой дизайн? ну хз.

    людям которые заказывали очень понравилось.

    помоему просто вы сами в музе ничего сделать не смогли вот и негатив)))..

    Timofey Ответ:

    Thumb up Thumb down +2

    Простенько но со вкусом))))) Подтверждение моих слов выше.

    Сколько времени потратили ?

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

    Timofey Ответ:

    Thumb up Thumb down -1

    Промедия74 — это ваша «студия», Openixxx ? По ваянию лендингов в музе ??? " Официальные партнеры — HTML5 " :) Давно так не смеялся))))))

    Не позорились бы.

  2. Макс
    Thumb up Thumb down +15

    Большие проекты в студию. На редакторе написанные)

  3. Илона
    Thumb up Thumb down -1

    Спасибо, очень интересно! Насколько я поняла, будет продолжение развития тенденций 2014? :)

    Vad Ответ:

    Thumb up Thumb down -1

    Да. Material Design, иконки «бутерброда» (имею в виду те самые три линии друг под другом), скрывающиеся меню, полный отказ от подчёркивания (сама дежурка грешит этим) и хорошая типографика (и этим) — всё это будет только в расцвете.

  4. Сергей
    Thumb up Thumb down -1

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

  5. pog
    Thumb up Thumb down -5

    Комментарий скрыт из-за рейтинга

    demogot Ответ:

    Thumb up Thumb down +1

    Лично я после Мьюза такой говнокод получаю, жуть. Но зато прикольно сидеть и очеловечивать его потом... чувствуешь себе пипец каким верстальщиком))

    Timofey Ответ:

    Thumb up Thumb down +1

    Мьюз — игрушка для начинающих веб-дизайнеров, которым лень потратить немного времени на изучение верстки и толковых инструментов и фреймворков. Ребята, фронт-энд это не ядерная физика, там все просто, если есть желание и немного мозгов :) Покажите хоть один приличный сайт сделанный в Дриме в режиме визивига ? Говнокод ни на что не годный)) А сколько лет ему уже ? Адоб последние пару лет хрень какую то делает, с облачным своим сервисом и прочими недоинструментами. Так что верстальщики — расслабьтесь)

    ПыСы — сам дизайнер, 5 лет стажа, сам проектирую, сам рисую, сам делаю весь фронт-энд.

  6. Димка
    Thumb up Thumb down +2

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

  7. Timofey
    Thumb up Thumb down -1

    Ценность данной статьи стремится к нулю)) И это, ребята с Дежурки, вы хоть перевод чуток поправьте, и ошибки пофиксите, уважайте своих читателей :) Статья эта гуляет по всему рунету с кривым переводом.

[an error occurred while processing the directive]


[an error occurred while processing the directive]