Сайтостроение. Вопреки парадигмам навигации – альтернативы
” Джона Мур Уильямса, руководителя отдела контент-стратегии Webflow.
Завершение текущего года не за горами, и каждый веб-дизайнер хотя бы раз задавался важным вопросом: что же будет определять веб-дизайн в наступающем 2017 году? Я решил найти ответ на этот вопрос и спросил дизайнеров WebFlow, какие тренды, по их мнению, будут преобладать следующие 365 дней. Их мыслям я также дал собственные комментарии.
В первую очередь давайте узнаем мнение главного дизайнера-проектировщика Webflow Серджи Магдалин (Sergie Magdalin).
1. Дизайн, направленный на контент
“Расположение элементов дизайна внутри данной структуры должно быть таким, чтобы читатель мог легко уловить главную мысль, не снижая свою обычную скорость чтения” - Герман Цапф
В последние несколько лет наблюдается резкое изменение взглядов на роль дизайна в бизнесе. Раньше дизайн рассматривался как завершающая ступень в процессе создания объекта: дизайнер-чародей приходит в финале и осыпает наш продукт волшебной пылью, чтобы он стал лучше, чем у конкурентов.
Было очень интересно смотреть на метаморфозы, происходящие с приоритетами в разработке.
И самым прекрасным в этих метаморфозах был переход к модели, когда контент снова встает во главе стола. Дизайнеры во всем мире поняли, что пользователи посещают сайты в первую очередь ради содержания, будь то короткие твиты, объемные специализированные статьи или свежие интернет-мемы. Конечная роль дизайна – показать контент в наиболее привлекательном, понятном виде и получить от этого наилучший результат.
Это одна из причин перехода от “скевоморфного” дизайна (когда элементы изображаются максимально похожими на их аналоги в реальном мире) к плоскому, минималистичному дизайну. Из этих соображений Google создал Материальный дизайн.
Конечно, как гласит третий закон Ньютона, для каждого действия существует такое же по силе противодействие. Многие дизайнеры считают, что мода на плоский дизайн “убила” сам дух дизайна. Мы ожидаем, что этот спор продолжится и в грядущем году, но всё-таки фокус останется на контенте – основе любой дизайнерской работы.
2. Качественное взаимодействие дизайнеров с разработчиками и дизайнеров между собой
Значимость дизайна в формировании бизнеса повышается, поэтому всё больше и больше внимания уделяется совместной работе дизайнеров с их коллегами-дизайнерами и их коллегами-разработчиками.
Такая забота о взаимодействии с дизайнерами появилась отчасти из-за массивности мобильных и веб-приложений, которые разрабатываются на сегодняшний день. Помимо того, что такие гигантские корпорации, как Google, Facebook, Twitter и LinkedIn требуют титанического труда дизайнерской команды с совершенно разных сторон, дизайнерам необходимо всегда быть на одной волне друг с другом. Это значит, что требуется более тесное общение по проекту и способы наиболее эффективной совместной работы.
Чтобы облегчить эту задачу, было создано множество инструментов, начиная коллективными шаблонами и досками в Webflow’s Team и заканчивая графическим редактором интерфейсов Figma, показывающим изменения в реальном времени. Я уверен, в 2017 эти платформы будут улучшаться и дополняться.
Если говорить о взаимодействии дизайнеров и разработчиков, много внимания уделяется крайне важному процессу передачи работы. Например, вместо отправки тяжелых и объемных статичных изображений теперь дизайнеры могут расшаривать живые визуализированные макеты благодаря таким инструментам, как InVision, Marvel, UXPin.
Карсон Миллер (Carson Miller) высказался по этому поводу в своей недавней статье “Будущее фронтенда в дизайне ” на TechCrunch:
“Рано или поздно инструменты для создания дизайна и шаблонов проектирования полностью заменят собой разработку фронтенда. Вы сможете легко создавать качественную основу для любого вашего фреймворка, не прибегая к написанию кода вручную”.
3. Упрощенный процесс “от дизайнера к разработчику”
Инструменты для создания дизайна и прототипирования, упомянутые выше, позволяют наглядно видеть различные стадии совместной работы благодаря визуализации – это могут быть как анимированные Keynote-файлы, так и полностью функциональные веб-сайты. Такой способ обмена рабочим материалом сокращает время отклика внутри проекта, тем самым повышая качество дизайна, увеличивая скорость работы команды разработчиков и снижая возможность разочарования от результата. Также это улучшает взаимодействие с клиентами. Например, для многих пользователей WebFlow встречи с клиентами превратились в полноценные рабочие совещания, где дизайнеры могут быстро реализовать идеи, и каждый почти сразу может потестировать свои задумки.
Тренды веб-дизайна в предстоящем году по мнению продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):
4. Крупный, громкий заголовок
По мере того, как мир веб-дизайна начинает фокусироваться на контенте, на сайтах всё чаще можно увидеть вдохновляющие заголовки с соответствующими шрифтами – такими же крупными и жирными, как и их содержание.
The #MadeInWebflow Heco Partners
Как можно увидеть на примерах, “крупный” и “жирный” относится не только к описанию шрифта. Скорее, речь идет о том, что значительная часть главного экрана выделена под простое, но сильное и самодостаточное утверждение о продукте или услуге. Подобный заголовок должен содержать в себе самую суть и быть понятным для любого посетителя, избегая излишней напыщенности (окей, фраза “Design the impossible”, возможно, звучит чересчур громко).
На сегодняшний день, когда люди постоянно заняты и информационно перегружены, такие короткие и мощные утверждения хорошо сработают у любых брендов.
5. Сложная разметка, пришедшая из основ графического дизайна
Если мы хотим предсказать развитие веб-дизайна (по крайней мере, его визуальной стороны), нужно обратиться к истории развития графического дизайна.
В последние несколько лет вёрстка веб-страниц ограничивалась возможностями CSS, но такие новые модули, как Flexbox и CSS Grid (который выйдет в марте 2017 года), позволят осуществить самые смелые задумки в веб-разметке.
Наша главная задача сейчас – понять, как новые возможности сетчатой разметки блоков должны работать в рамках адаптивного дизайна.
Вот несколько примеров того, что стоит ожидать (конечно, если у вас есть браузер, поддерживающий CSS Grid, например, Firefox Nightly, Safari Technical Preview или Chrome Canary):
Экспериментальная лаборатория макетов Джен Симмонс
Обратите внимание на стиль главного блока – явная отсылка к истории графического дизайна.
Grid by Example
На сайте можно посмотреть больше примеров.
6. Больше SVG
SVG (scalable vector graphics – масштабируемая векторная графика) имеет больше преимуществ для веб-дизайнеров и разработчиков, чем традиционные форматы изображений, например, JPG, PNG или GIF.
Основные плюсы SVG описаны в самом названии формата – это масштабируемость и вектор. В отличие от форматов, основанных на растре и пикселях, изображения в SVG состоят из векторов – математических описаний формы объекта. Это означает, что SVG не зависит от разрешения, и изображения в этом формате будут отлично смотреться на любых экранах и устройствах. Нет необходимости беспокоиться о том, что картинки будут размытыми на ретине.
Но это еще не всё. SVG также славится тем, что не требует отправки HTTP-запросов. Если вы когда-нибудь проверяли скорость загрузки своего веб-сайта, вы могли заметить, что эти HTTP-запросы могут действительно тормозить ваш сайт. С SVG такой проблемы нет.
7. Инструменты для адаптивного дизайна на основе правил
Адаптивный дизайн полностью изменил наш взгляд на веб-приложения и на их создание.
Но, как ни странно, принцип работы программ для создания дизайна никак не поменялся. Большинство таких инструментов работают так: вам нужно создавать аналогичную страницу снова и снова для различных устройств и разрешений. В отрасли, где требуется быстрая генерация идей, быстрая разработка и быстрый запуск, такое расточительство времени просто недопустимо.
Ожидается новая волна дизайнерских инструментов (таких как Figma) на основе “правил”, корректирующих вид сайтов на различных экранах и устройствах, тем самым сокращая количество повторных действий дизайнера. Такие инструменты основываются на пространственных связях элементов и, когда мы меняем размер экрана или устройство, они стремятся сохранить эти связи путем изменения размеров элементов и отступов между ними.
Кстати, на сегодняшний день есть подобные инструменты для вёрстки веб-сайтов не только для дизайнеров, но и для рядовых пользователей. Например, TruVisibility.com – платформа адаптирует созданный дизайн именно по определенным правилам, согласно которым разметка и размеры элементов подстраиваются под размер экрана. Остается только внести несколько корректировок, чтобы веб-страница выглядела на устройствах так, как нужно. Пользователю не требуется заново создавать версию для мобильных устройств,и это значительно экономит его время.
Тренды дизайна в 2017 году по мнению Райана Моррисона (Ryan Morrison), старшего графического дизайнера.
8. Больше ярких цветов
Когда в 2016 году в веб-дизайне началась эпоха минимализма и брутализма, дизайнеры пытались внести больше индивидуальности в их работы, при этом не выходя за рамки модных стилей. И есть по крайней мере несколько случаев, когда яркие и смелые цвета были использованы очень успешно.
Взгляните на новый сайт Asana с яркой цветной заливкой:
Новая иконка приложения Instagram вызвала много критики, но этот редизайн, несомненно, освежил бренд:
Всё, что делает Stripe, не требует отдельного представления:
Как вы можете видеть, это не просто яркие и смелые цвета. Градиенты также вернулись в моду, смешивая и размывая цвета в оттенках, напоминающих полуденное небо или пылающий закат. Это своего рода возрождение натурализма с яркими цветами и дерзкими градиентами, и я лично с нетерпением ожидаю увидеть еще больше подобных работ в 2017 году.
Хотя, может быть, стоит всё-таки немного уменьшить яркость? Мы следим за вами, Asana.
9. Больше внимания анимации
Анимированные элементы давно играют ключевую роль в веб-интерфейсе, и эта тенденция продолжится в 2017-ом. На самом деле, пока дизайнеры будут иметь доступ к инструментам для разработки привлекательных анимаций, мы будем наблюдать, как эти эффекты становятся более заметными и более изощренными.
Эта тема особенно важна, поскольку создание анимации упрощается с каждым днем. На Конференции Дизайна и Контента (Design & Content Conference) в 2016 гуру анимации Вал Хэд (Val Head) подчеркнула, что при разработке анимированных элементов дизайнерам следует помнить о целях и потребностях бренда, чтобы достигнуть эффект, который ожидают увидеть создатели контента. Если к этому совету будут прислушиваться, анимация будет выполнять задачи, значимые для бренда, а не просто вызывать мигрень у пользователя.
10. Необычная разметка
2016 год, как и предыдущие несколько лет, знаменит нескончаемыми дискуссиями о том, что веб-дизайн либо умирает, либо теряет свой дух.
Те, кто пытается убедить всех в смерти веб-дизайна, явно преувеличивают. Многие продолжают искать способы по-новому представить контент пользователям. Один из самых заманчивых способов – сломать систему и игнорировать привычное расположение элементов в виде сетки, продиктованное правилами адаптивного дизайна.
Метод “сломанной” разметки заключается в выходе элементов за пределы скрупулезно выровненной сетки. Подобные приемы могут иногда показаться даже неприятными для глаза. Например:
Наезжающие друг на друга тексты и изображения:
Тексты и изображения, раскиданные (казалось бы) случайно по странице:
Это была первая часть перевода статьи “18 трендов веб-дизайна в 2017 году ”. А вы согласны с мнениями специалистов Webflow? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?
Давайте разберемся, что значит быть популярным, модным и современным в веб-дизайне в 2017 году. Для этого рассмотрим основные тренды веб-дизайна. Большинство из них кочуют из года в год и стали уже неотъемлемой частью современного сайтостроительства. Особенно это связано с развитием мобильных технологий, каналов связи и усовершенствованием девайсов. Например, такой тренд, как мобильность сайта, стал обязательным для исполнения. Коммерциализация интернета тоже диктует свои жесткие условия дизайнерам и веб-разработчикам. При этом часть тенденций ослабевает и становится менее популярной, но все равно остается достаточно активной. Также появляются модные увлечения, характерные для короткого периода. Например, в прошлом году это были иконки с длинной тенью изображенных объектов. В этом году стали популярны геометрические узоры, их мы тоже рассмотрим. Итак, давайте по порядку.
1. Мобильный, адаптивный дизайн
На сегодняшний день, пожалуй, самый главный и обязательный к исполнению тренд. Сайт должен одинаково хорошо смотреться на всех разрешениях мониторов, ноутбуков, экранах мобильных смартфонов и планшетах. Поисковики, к слову, очень пристально следят, насколько хорошо сайт адаптирован к различным устройствам, и исходя из этого определяют место в поисковой выдаче.
2. Активная типографика
Вот уже несколько лет один из самых популярных трендов. Крупные шрифты и типографика на сайте несут в себе две составляющие. Во-первых, эстетическую — красивые линии, изгибы и начертание букв сами по себе являются украшением и декоративным элементом. И во-вторых, это функциональность — с помощью крупного шрифта можно однозначно и акцентированно донести до посетителя главную мысль.
3. Широкоформатное видео
Полноэкранное видео на бэкграунде сайта, несомненно, сразу же овладевает нашим вниманием. Это хороший прием, чтобы заинтересовать посетителя. Современное развитие технологий позволяет легко встраивать видео на сайт, а значит дизайнеры все чаще будут использовать этот прием. Однако, есть один нюанс, смотреть видео интересно только первый раз, во второй и третий раз это уже надоедает. Поэтому этот прием эффективен только для новых посетителей.
5. Синемаграфия
Хорошая альтернатива широкоформатному видео и большой фотографии на бэкграунде. Синемаграфы — это фотографии, на которой происходят незначительные повторяющиеся движения. Обычно они представлены в gif формате и создают зрителю иллюзию просмотра видео. Подробнее о синемаграфии с большим количеством примеров можно посмотреть в подборке 
6. Плоский дизайн
Еще один мощный тренд последних лет. Сайтам, выполненным в плоском цвете, присуща аккуратность и ясность. Но, в последнее время, появилась новая разновидность плоского дизайна — Semi flat. Это когда весь дизайн выполнен в плоском цвете, и только один элемент имеет тень, градиент или текстурность. Как, правило, этим элементом является кнопка, которой придается объемность или выпуклость для привлечения внимания посетителей.
7. Микровзаимодействие на сайте
Сейчас большое внимание в веб-дизайне уделяется микровзаимодействию функционала и дизайна сайта с посетителем. Суть которого в том, чтобы посетитель мог однозначно видеть результат своего действия на сайте, будь то регулировка пользовательских настроек, переход по ссылке, подтверждение операции, взаимодействие с активными иконками, кнопками, переключателями, счетчиками и другими элементами.
8. Анимация объектов
Возможности современного html5 и css3 позволяют использовать большой арсенал визуальных эффектов на сайте. Это делает взаимодействие со страницей более интересным и увлекательным для посетителя. Так что в новом году мы также увидим самые неожиданные интерактивные микроперемещения объектов, как правило, реагирующие на движение мышки. Возможно мы увидим примеры более сложной анимации.
9. Яркие цветовые схемы
Популярные модные цвета 2017 года отдают предпочтение яркости и насыщенности. Интересные оригинальные оттенки алого, горчичного, желтого, изумрудного, глубокого синего, а также красная, сиреневая и шоколадная гамма помогут вашему сайту выделиться и приобрести собственный уникальный стиль.
10. Скроллинг сайта
Поскольку скроллинг сайта идеально подходит для мобильных устройств, то его присутствие будет значительным и в 2017 году. Единственное, скроллинг не оставляет простора для взаимодействия с пользователем, и поэтому, ощущается некая усталость от бесконечно подгружающегося контента. Возможно тренд развернется в сторону комбинации простых управляющих элементов со скроллингом.
11. Параллакс эффект
Параллакс — это изменение видимого положения объекта относительно удаленного фона. В веб-дизайне этот эффект применяется при скроллинге сайта, когда объекты и фон прокручиваются с разной скоростью, в результате чего создается иллюзия трехмерности. Тренд достаточно устойчивый, так что мы еще не раз увидим сайты с параллаксом.
12. Модульная конструкция
Модульная конструкция или карточный интерфейс, состоящий из автономных смысловых блоков, был популярен некоторое время назад. Этот тренд очень хорош для мобильных устройств, поскольку блоки хорошо выстраиваются под любое разрешение экрана. Но на больших сайтах выглядят достаточно одинаково и трудно поддаются иерархии и структурированию.
13. Одностраничники
Сайты-одностраничники, посадочные страницы, лендинг пейджи стали неотъемлемой частью современного интернета. Подробнее, что такое лендинг пейдж можно прочитать в статье и . В 2017 году у лендингов будет усиливаться акцент на кнопку, призывающую к действию — заказать, позвонить, записаться и т.д. Все остальное, отвлекающее внимание потенциального посетителя, будет отсекаться.
14. Графическая реклама
Еще хотела бы отметить один момент, чем мне запомнился минувший год, и скорее всего тенденция будет продолжаться и в 2017. В связи с коммерциализацией рунета и ростом интернет торговли существенно увеличился спрос на графические промо материалы для рекламы и продвижения — баннеры, тизеры, карточки, флаеры.
15. Автоматизация типовых процессов
Все типовые решения и процедуры на сайте постепенно замещаются автоматизированными процессами, что избавляет от необходимости общения со службой поддержки или онлайн-консультантами. В связи с этим растет популярность различных приложений и расширений. Теперь купить товар или услугу, сделать заказ, записаться на прием, забронировать места, перевести деньги, заполнить анкету или пройти тест — все это можно сделать онлайн в несколько кликов мыши.
16. Инфографика
Графическое представление в виде инфографики все еще популярно и востребовано. Сопровождение текста красивой картинкой или иконкой в совокупности со стильными элементами оформления делают инфографику эстетически привлекательной. Особенно визуально наглядна и интересна сравнительная инфографика — типа было-стало, да-нет, плюсы-минусы, можно-нельзя и т.д. Также с помощью инфографики можно рассказать поэтапную историю или живо представить скучную статистику.
17. Гамбургер меню
Гамбургер меню — это визуальная иконка из трех горизонтальных полосок, как правило, вверху в углу сайта, при нажатии на которую открывается или выезжает сбоку полное меню. Многие специалисты предрекают затухание этого тренда, по причине, что большинство неискушенных пользователей просто не понимают назначения этого значка. Поэтому веб-дизайнеры склоняются к упрощенной навигации. Но, тем не менее, гамбургер меню мы еще неоднократно увидим на вновь созданных сайтах.
18. Иконки
Иконки, как способ представления информации и инструмент визуализации, были и остаются одним из самых востребованных и любимых дизайнерами трендов. Достаточно около блоков с текстом поставить соответствующие тематические иконки — и вот уже весь текст приобретает логическую и визуальную упорядоченность и структурность. Так что, в наступившем году продолжаем активно пользоваться иконками.
19. Леттерстакинг
Леттерстакинг (англ. letter stacking) — это текст в квадрате. По сути, это пример сложного творческого решения — нужно представить длинный текст в объеме крохотного пространства. При этом, это должно смотреться красиво и оригинально. В этом году это еще и модно.
20. Пустая кнопка
В силу экономии места и пространства на мобильных устройствах некоторое время назад появилась пустая кнопка — крупная надпись с квадратной обводкой вокруг слова. Такая кнопка дает обзор бэкграунда за кнопкой и при этом сохраняет свою функциональность полноценной кнопки. Плюс, как дизайнерский элемент, такая кнопка смотрится стильно и аккуратно.
21. Отказ от стоковых фото
Некоторые специалисты замечают, что наметился отказ дизайнеров от стоковых фото. Поскольку современные устройства позволяют быстро и качественно сделать фотографию самим, то можно избежать стоковой обезличенности и унифицированности и сделать собственную уникальную фотографию и создать собственный неповторимый дизайн.
22. Необычные ракурсы на фото
Поиск интересных ракурсов на фотографиях стал доступен любому владельцу смартфона с камерой. В связи с этим креативность при создании фото зашкаливает и мы можем украсить сайт уникальной картинкой с необычным углом обзора или ракурсом.
23. Карусель
Слайдер-карусель, вошедший в дизайнерскую жизнь несколько лет назад, все еще популярен и актуален при оформлении сайтов. С помощью широкого слайдера удобно ротировать главные новости, а также представлять текущие акции, коллекции и прочую актуальную информацию, которую посетитель видит сразу, попадая на сайт.
24. Самовоспроизводящееся аудио и видео
А вот этот тренд — привет из 2000-х. Я помню тогда было модным воспроизводить звук при попадании на сайт. Причем многих этот . Не могу сказать что аудио сопровождение меня радует, но возможно, умеренное использование будет ненавязчиво. Ну а самовоспроизведение видео — это больше дань рекламе, как по мне. Ну и плюс желание удержать внимание посетителя в ленте. Не самый приятный тренд, но коммерчески необходимый.
25. Геометрические узоры
Ну и закончим мы наш обзор краткосрочной модной тенденцией в виде различных геометрических узоров и паттернов. Они стали неожиданно популярны в конце минувшего года. Ну что ж, еще один способ сделать дизайн сайта выделяющимся и уникальным.
Инфографика «Тренды веб-дизайна 2017 года»
Предлагаю вам инфографику, в которой наглядно представлены все тренды и тенденции веб-дизайна. Скачать картинку в большом размере можно по этой ссылке на DeviantArt . В новом окошке откроется страничка на DeviantArt. Там нажмите на слово Download справа от картинки и сохраните картинку на свой компьютер.
В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.
Меню в хедере страницы, которые раньше включали 5-7 опций, теперь будут предлагать 3-4 варианта.
Меньшее количество вариантов облегчает пользователю поиск нужной информации и позволяет избежать ситуации «паралича выбора».
Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.
Старая версия:
Новая версия, запущенная в 2016 году:
- Отказ от гамбургер-меню
Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения. В итоге он остаётся дезориентированным.
Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.
- Дуотоны
Использование дуотонов делает оформление сайта минималистичным и позволяет удержать внимание пользователя на основном сообщении или навигации.
В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.
- Тактильный дизайн
Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.
В 2016 году анимация рассматривалась как перспективный тренд. Однако в этом году в центре внимания разработчиков находится производительность. С этой точки зрения параллакс-скроллинг – не самое оптимальное решение.
- Осмысленное действие
Одним из основных принципов материального дизайна является «осмысленное действие». В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности» .
Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.
- Отказ от низкокачественных стоковых изображений
Сайты компаний должны приглашать пользователей к взаимодействию и отражать ценности бизнеса. На них больше нет места некачественным и скучным стоковым изображениям. Таким, как это:
- Меньше приложений, больше PWA
Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения. В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.
- Шрифты Google
Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts . В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще. В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.
В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.
- Минимализм
Этот тренд объединяет в себе многие другие тенденции, упомянутые выше. Минимализм означает акцент на производительности (скорость) и юзабилити. В рамках этого подхода важную роль играют типографика, контраст и пространство.
Яркая инфографика о путях развития современного веб-разработчика и технологиях, которые ему необходимо изучить, чтобы стать фронтендером, бэкендером или devops в 2017.
Введение
Первоочередная задача - определить профиль дальнейшего развития. Пробуйте, изучайте, попытайтесь понять, что вам ближе - фронтенд, бэкенд, devops, а может быть fullstack?
Путь фронтендера
В любой сфере веб-разработки во главе всего стоит освоение основ. Для новичка, очевидно, задачей номер один является изучение HTML, CSS и JavaScript (+jQuery). По мере развития базовых навыков и расширения теоретического бэкграунда, можно переходить к более специализированным вещам.
Существует множество JavaScript-фреймворков и библиотек, владение которыми значительно упрощает веб-разработчику жизнь. Среди них можно выбрать наиболее удобный и подходящий конкретному программисту пакетный менеджер, инструмент тестирования и сборки, менеджер задач и многое другое на любой вкус и круг потребностей.
Сегодня сфера фронтенд-разработки развивается как никакая другая. Постоянно появляются и совершенствуются фреймворки и инструменты, рождаются новые методологии и паттерны, сама идеология фронтенда давно вышла далеко за пределы верстки. Поэтому одна из первостепенных задач веб-разработчика — оставаться на плаву, быть в курсе современных тенденций развития данной области.
Путь бэкендера
В области бэкенд-разработки за последние несколько лет также произошли большие перемены. PHP давно уже не является монополистом на рынке бэкенд-технологий, хотя его последняя версия, PHP 7, более чем достойна внимания. На арену ворвались Node.js, Ruby и Go. Современные технологии дают возможность разрабатывать сложную бизнес-логику и добиваться высокой производительности.
Путь devops
Работа devops — очень ответственная. Современное веб-приложение — огромный и сложный организм, и задача devops в том, чтобы поддерживать правильное его функционирование. Мониторинг процессов, работа в облаке, веб-контейнеры, непрерывная интеграция — вот лишь малая часть стека web-технологий, позволяющих существовать как единое целое и выполнять свои функции веб-приложению.
С каждым годом увеличивается темп жизни, а вместе с ним растет и количество информации. Пользователи тратят все меньше времени на изучение сайтов, при этом число требований к ним возрастает. Инструменты привлечения внимания, которые были в топе еще год назад, теряют свою эффективность. Чтобы оставаться в тренде и создавать сайты под ключ , привлекающие клиентов, во время работы веб-дизайнерам стоит учитывать основные тенденции 2017 года. Какими они будут? Рассмотрим в этой статье.
Тенденции дизайна сайтов 2017:
- Одностраничные сайты
Эта тенденция становится все более распространенной, благодаря мобильным устройствам. Вся информация размещена на одной странице, которую удобно пролистывать на телефоне или планшете, не используя клики.
- Скроллинг
По-прежнему отличное решение для сайтов с однотипным контентом. Но не стоит забывать, что он добавляет вес странице и усложняет поиск среди уже пройденного материала, поэтому не рекомендуется для создания интернет-магазинов. Для оптимизации работы можно использовать совмещение классической навигации и скроллинга.
- Минималистичный дизайн
- Яркие цвета
Популярность ярких красок растет. Используйте больше палитр и оттенков, если желаете идти в ногу с модой. Для создания свободы пространства и ощущения воздуха можно использовать контрастные оттенки. Различные оттенки и градиенты цветов помогут лучше различать содержимое, которое они выделяют.
- Типографика
Шрифты по-прежнему являются сильным графическим элементом и играют одну из главных ролей в создании эстетики веб-страницы, вытесняя собой другие элементы. Хороший красочный заголовок также отлично смотрится с экранов планшетов и смартфонов и помогает донести информационное сообщение до пользователя.
- Анимация
Небольшие анимационные элементы и интерактивный дизайн приковывают внимание, делают сайт интереснее и улучшают взаимодействие пользователя с ним. А развитие JavaScript-библиотек позволяет упростить создание подобных страниц.
- Видео
На смену широкоформатным фоновым фотографиям приходит широкоформатное видео. Как и анимация, оно не только вызывает интерес со стороны пользователя, но и позволяет оживить страницу. Здесь главное использовать качественное изображение, соответствующее общей стилистике сайта. Видео помогает не только привлечь внимание зрителя, но и дает возможность донести до него информационное сообщение, например, рассказать о компании.
