Изучение тенденций современного веб-дизайна - Статья

А это значит, что более 61,5 млн человек в нашей стране ежедневно сталкиваются с проектами веб-дизайнеров, которые стараются сделать сайты максимально удобными и полезными для пользователей. Поэтому нельзя придумать формулу идеального дизайна сайта, который привлечет новых посетителей и подарит им настоящее удовольствие присутствия и использования ресурса. Изучив и проанализировав работы современных дизайнеров; новые, привлекающие внимание, сайты; а также тренды 2015 года [1,3], были получены выводы о тенденция веб-дизайна в 2016 году. Сайт, созданный даже профессионалами высшего уровня 5-7 лет назад не сравнится с современными: изменился подход к проектированию, появились новые веб-технологии, стали популярны определенные модели дизайна и т.д. Кнопки управления на таком сайте одинаково удобны и для пользователей компьютера (они имеют привычный размер), и для пользователей мобильных устройств (кнопки увеличиваются до размера, позволяющего с легкостью использовать их на сенсорных экранах).В 2016 году мы увидим сайты с лаконичным дизайном, удовлетворяющие большинству аспектов из вышеперечисленных пунктов. Главной особенностью современных тенденций можно считать направленность на адаптацию веб-ресурса к возможности просмотра на различных устройствах.

Согласно данным Фонда Общественного Мнения по вопросу динамики проникновения Интернета в России [4] на весну 2015 года, более половины жителей Российской Федерации выходят в сеть хотя бы 1 раз в сутки. А это значит, что более 61,5 млн человек в нашей стране ежедневно сталкиваются с проектами веб-дизайнеров, которые стараются сделать сайты максимально удобными и полезными для пользователей.

Понятие веб-дизайна ближе искусству, чем науке. Поэтому нельзя придумать формулу идеального дизайна сайта, который привлечет новых посетителей и подарит им настоящее удовольствие присутствия и использования ресурса. Однако, существуют популярные методы проектирования, модели, которые становятся все более узнаваемыми. Их принято называть тенденциями веб-дизайна. Изучив и проанализировав работы современных дизайнеров; новые, привлекающие внимание, сайты; а также тренды 2015 года [1,3], были получены выводы о тенденция веб-дизайна в 2016 году.

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

1. Адаптивность

Тенденции возникают исходя из потребностей общества. В современном мире огромную популярность имеют мобильные устройства. С каждым годом пользователей "умных" гаджетов становится все больше, а разработчики сайтов все чаще стараются учесть их потребности. Адаптивность дизайна теперь не "роскошь", а необходимость и обязательное условие качественного веб-ресурса. Каждый, кому доводилось сталкиваться с неадаптивными сайтами на мобильных устройствах, подтвердит, что это сильно и, возможно, навсегда отбивает желание посещать неудобный сайт. Ведь это и неполное отображение контента (часто урезанное или "съехавшее"), и отсутствие некоторых важных элементов (например, кнопок), и слишком мелкие и близкорасположенные ссылки, при нажатии на одну из которых, обязательно открывается совершенно другая. Масса неудобств неадаптивного дизайна обусловила не просто главную тенденцию 2015-2016 года, но и создала новый постулат веб-разработки. Отныне каждый уважающий себя веб-дизайнер обязан создавать удобные, адаптивные сайты. На рисунке 1 показан пример адаптивности сайта к экранам с различным разрешением. Элементы в зависимости от размера окна корректируют свой размер, то есть макет сайта является гибким. Таким образом, на мобильном устройстве мы видим тот же сайт, что и на компьютере или ноутбуке, но уже подстроенный под размер экрана смартфона или планшета. Кнопки управления на таком сайте одинаково удобны и для пользователей компьютера (они имеют привычный размер), и для пользователей мобильных устройств (кнопки увеличиваются до размера, позволяющего с легкостью использовать их на сенсорных экранах). Также разработчики многих адаптивных веб-ресурсов уменьшают размер картинок или убирают их совсем - для быстрой загрузки сайта мобильным Интернетом.

Рисунок 1. Пример адаптивности сайта. Слева изображена страница сайта при разрешении экрана монитора 1024х700, а справа - при разрешении экрана мобильного телефона 360х640 (при вертикальном положении устройства).

2. Длинная страница вместо ссылок

Продолжая тему об удобстве пользования сайтом на мобильных устройствах, нельзя не отметить самую заметную тенденцию 2015 года - одна длинная страница вместо ссылок на несколько страничек. Это обусловлено интуитивно понятным движением "перелистывания" пальца человека по сенсорному экрану вместо нажатия по многочисленным ссылкам. Причем страница может быть длинной и листаться вниз, а может быть равной размеру экрана (в длину) и иметь стрелочки сбоку для перелистывания контента направо-налево. Поэтому так называемые "landing-page", то есть длинные "продающие" страницы будут актуальны и в 2016 году.

Название "продающие" длинные страницы получили за то, что они отлично подходят для рекламы бизнеса в Интернете. Landing-page позволяет наилучшим образом представлять информацию о компании, выделять ее преимущества и побуждать работать именно с этой фирмой. Структура примера "продающей" страницы показана на рисунке 2. Данный landing-page состоит из 7 типичных для этого вида сайтов блоков. В первом блоке помещают логотип фирмы, название и контактную информацию (адрес, телефон, электронная почта). Второй блок первым бросается в глаза пользователю, здесь размещают изображение или короткий видео-ролик, подсказывающий пользователю о тематике бизнеса. Например, фирма, занимающаяся изготовлением мебели на заказ, может разместить здесь одну или несколько сменяющих друг друга фотографий мебели в высоком разрешении. Третий блок призывает покупателя совершить какое-либо действие. Например, сделать заказ или связаться с представителем компании. В четвертом блоке размещают кнопку, которая позволяет совершить действие, призыв о котором был в блоке выше. Под цифрой 5 на схеме выделен блок уникального предложения, призванный заинтересоать покупателя выгодой: акции, скидки, подарок за покупку. В шестом блоке фирмы выкладывают свое портфолио: сделанные ранее работы; товары; услуги и т.д. Под цифрой 7 на рисунке 2 показан блок отзывов - здесь компаниии размещают хорошие отзывы клиентов, сертификаты качества, грамоты и прочие доказательства конкурентоспособности. Так выглядит стандартная схема длинных страниц. Она не содержит лишних ссылок, неважной информации и поэтому привлекательна для пользователей.

Рисунок 2. Структура landing-page.

3. Минимализм с ярким акцентом

Если трендом веб-дизайна 2014 года был минимализм, то сейчас, в середине 2015 года, к нему добавился яркий акцент. Акцентом в данном случае является картинка или видео в хорошем разрешении. Самое главное правило - не перегружать дизайном сайт. Один акцент, который привлекает внимание и передает главную идею сайта, и минимальный набор текста и кнопок, которые должны отлично сочетаться с акцентом, не переводя лишнего внимания на себя. На рисунке 3 показан пример веб-страницы в стиле минимализм с ярким акцентом.

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

4. Прозрачные кнопки

Тенденции 2015 года подсказывают, что пользователь не должен отвлекаться на лишние эффекты, дополнительные акценты, цветовую перенасыщенность. В связи с этим самым популярным в 2015-2016 году станет использование стильных элегантных и ненавязчивых кнопок, не имеющих фона. К тому же такие кнопки отлично сочетаются с трендом, о которым сказано в пункте 3 данной работы. Пример использования прозрачной кнопки показан на рисунке 4.

Рисунок 4. Пример страницы с прозрачной кнопкой "Регистрация". Главной на этой странице является кнопка "Войти", поэтому на нее сделан акцент цветом. Второстепенная кнопка "Регистрация" прозрачная с цветной рамкой, чтобы эта кнопка не отвлекала на себя внимание, но при необходимости была заметна.

5. Материальный дизайн Google

Material Design [2] - это разработка корпорации Google, которая, по словам самих разработчиков, представляет собой визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями науки и техники.

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

6. Типографика

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

7. Постепенный отказ от мобильных версий сайта

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

Таким образом, можно с уверенностью сказать, что веб-дизайн очень востребован в наше время. В 2016 году мы увидим сайты с лаконичным дизайном, удовлетворяющие большинству аспектов из вышеперечисленных пунктов. Главной особенностью современных тенденций можно считать направленность на адаптацию веб-ресурса к возможности просмотра на различных устройствах. Плоский дизайн или "минимализм” будет конкурировать с материальным дизайном - и дело не только в эстетической привлекательности. Одним из важнейших требований современного сайта стала быстрая и простая работа, обеспечивающая хорошую производительность и экономию времени пользователя. Хороший дизайнер в наше время должен быть в курсе последних тенденций и популярных практик проектирования веб-ресурсов. Применив тенденции, описанные в данной работе, можно создать не только красивый и удобный сайт, но и конкурентоспособный сайт, отвечающий всем современным требованиям.

1. Зубехин А.А., Абрамова О.Ф. СОВРЕМЕННЫЙ WEB - САЙТ: МОДНЫЕ ТЕНДЕНЦИИ В КОМПОНОВКЕ И ЦВЕТЕ // Материалы VII Международной студенческой электронной научной конференции "Студенческий научный форум" URL: www.scienceforum.ru/ (дата обращения: 09.09.2015).

2. Материальный дизайн. Введение [Электронный ресурс] URL: http://www.google.com/design/spec/material-design/introduction.html# (дата обращения: 15.08.2015)

3. Тенденции веб-дизайна 2015 г. [Электронный ресурс] URL: http://webdesignledger.com/web-design-trends (дата обращения: 05.08.2015)

4. Фонд общественного мнения. Интернет в России: динамика проникновения. Весна 2015 [Электронный ресурс] URL: http://fom.ru/SMI-i-internet/12275 (дата обращения: 25.09.2015)

5. Google изменила логотип [Электронный ресурс] URL: http://tech. onliner. by/2015/09/01/google-logo (дата обращения: 25.09.2015)

Размещено на .ru