Публикация научных статей.
Вход на сайт
E-mail:
Пароль:
Запомнить
Регистрация/
Забыли пароль?

Научные направления

Поделиться:
Статья опубликована в №27 (ноябрь) 2015
Разделы: Информационные технологии
Размещена 30.09.2015. Последняя правка: 01.10.2015.
Просмотров - 7341

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

Агрова Кристина Олеговна

Самарский государственный технический университет

Студент

Забержинский Борислав Эдуардович, кандидат технических наук, доцент, кафедра информационных технологий, Самарский государственный технический университет


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


Abstract:
The paper discusses and analyzes the popular methods of designing a web design in order to identify trends in the development and changes in the appearance of the Internet resources. Conclusions were obtained and identified models using a web designer who can create in 2016 the actual website.


Ключевые слова:
веб-дизайн; тенденции; веб-сайт; Интернет-технологии

Keywords:
web-design; trends; website; Internet-technologies


УДК 004.92

Введение. Согласно данным Фонда Общественного Мнения по вопросу динамики проникновения Интернета в России [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)




Рецензии:

24.12.2015, 18:12 Клинков Георгий Тодоров
Рецензия: Статья рекомендуется к пуубликации.Основания: 1/Актуальность проблематики... 2/Высокий научный стиль автора... 3/Веб-дизайн анализирован на основе ясного исследовательского конструкта... 4/Динамизация основных доводов автора в процессе развития основной тезы... 5/Структура статьи имеет нужный объем и логических связей...



Комментарии пользователей:

1.10.2015, 18:29 Агрова Кристина Олеговна
Отзыв: Сергей Владимирович, спасибо Вам за отзыв и Ваши замечания. Я их учла и исправила всё, о чём Вы написали.


Оставить комментарий


 
 

Вверх