Самарский государственный технический университет
Студент
Забержинский Борислав Эдуардович, кандидат технических наук, доцент, кафедра информационных технологий, Самарский государственный технический университет
УДК 004.92
Введение. Согласно данным Фонда Общественного Мнения по вопросу динамики проникновения Интернета в России [4] на весну 2015 года, более половины жителей Российской Федерации выходят в сеть хотя бы 1 раз в сутки. А это значит, что более 61,5 млн человек в нашей стране ежедневно сталкиваются с проектами веб-дизайнеров, которые стараются сделать сайты максимально удобными и полезными для пользователей.
Понятие веб–дизайна ближе искусству, чем науке. Поэтому нельзя придумать формулу идеального дизайна сайта, который привлечет новых посетителей и подарит им настоящее удовольствие присутствия и использования ресурса. Однако, существуют популярные методы проектирования, модели, которые становятся всё более узнаваемыми. Их принято называть тенденциями веб-дизайна. Изучив и проанализировав работы современных дизайнеров; новые, привлекающие внимание, сайты; а также тренды 2015 года [1,3], были получены выводы о тенденция веб-дизайна в 2016 году.
Актуальность. Сайт, созданный даже профессионалами высшего уровня 5-7 лет назад не сравнится с современными: изменился подход к проектированию, появились новые веб-технологии, стали популярны определенные модели дизайна и т.д.. Для поддержания интереса к своему веб-ресурсу и для привлечения новых клиентов - важно своевременно производить редизайн сайта, то есть переделывать полностью или частично внешний вид страниц. Своевременно - это значит идти в ногу со временем и обращать внимание на тренды, следить за конкурентами и прислушиваться к мнению посетителей. Поэтому выбранная тема очень актуальна - тенденции веб-дизайна 2016 г подскажут нужное направление веб-разработчикам, дизайнерам, арт-менеджерам для создания современного сайта.
1. Адаптивность
Тенденции возникают исходя из потребностей общества. В современном мире огромную популярность имеют мобильные устройства. С каждым годом пользователей «умных» гаджетов становится всё больше, а разработчики сайтов всё чаще стараются учесть их потребности. Адаптивность дизайна теперь не «роскошь», а необходимость и обязательное условие качественного веб-ресурса. Каждый, кому доводилось сталкиваться с неадаптивными сайтами на мобильных устройствах, подтвердит, что это сильно и,возможно, навсегда отбивает желание посещать неудобный сайт. Ведь это и неполное отображение контента (часто урезанное или «съехавшее»), и отсутствие некоторых важных элементов (например, кнопок), и слишком мелкие и близкорасположенные ссылки, при нажатии на одну из которых, обязательно открывается совершенно другая. Масса неудобств неадаптивного дизайна обусловила не просто главную тенденцию 2015-2016 года, но и создала новый постулат веб-разработки. Отныне каждый уважающий себя веб-дизайнер обязан создавать удобные, адаптивные сайты. На рисунке 1 показан пример адаптивности сайта к экранам с различным разрешением. Элементы в зависимости от размера окна корректируют свой размер, то есть макет сайта является гибким. Таким образом, на мобильном устройстве мы видим тот же сайт, что и на компьютере или ноутбуке, но уже подстроенный под размер экрана смартфона или планшета. Кнопки управления на таком сайте одинаково удобны и для пользователей компьютера (они имеют привычный размер), и для пользователей мобильных устройств (кнопки увеличиваются до размера, позволяющего с легкостью использовать их на сенсорных экранах). Также разработчики многих адаптивных веб-ресурсов уменьшают размер картинок или убирают их совсем - для быстрой загрузки сайта мобильным Интернетом.
Продолжая тему об удобстве пользования сайтом на мобильных устройствах, нельзя не отметить самую заметную тенденцию 2015 года – одна длинная страница вместо ссылок на несколько страничек. Это обусловлено интуитивно понятным движением «перелистывания» пальца человека по сенсорному экрану вместо нажатия по многочисленным ссылкам. Причем страница может быть длинной и листаться вниз, а может быть равной размеру экрана (в длину) и иметь стрелочки сбоку для перелистывания контента направо-налево. Поэтому так называемые "landing-page", то есть длинные "продающие" страницы будут актуальны и в 2016 году.
Название "продающие" длинные страницы получили за то, что они отлично подходят для рекламы бизнеса в Интернете. Landing-page позволяет наилучшим образом представлять информацию о компании, выделять ее преимущества и побуждать работать именно с этой фирмой. Структура примера "продающей" страницы показана на рисунке 2. Данный landing-page состоит из 7 типичных для этого вида сайтов блоков. В первом блоке помещают логотип фирмы, название и контактную информацию (адрес, телефон, электронная почта). Второй блок первым бросается в глаза пользователю, здесь размещают изображение или короткий видео-ролик, подсказывающий пользователю о тематике бизнеса. Например, фирма, занимающаяся изготовлением мебели на заказ, может разместить здесь одну или несколько сменяющих друг друга фотографий мебели в высоком разрешении. Третий блок призывает покупателя совершить какое-либо действие. Например, сделать заказ или связаться с представителем компании. В четвертом блоке размещают кнопку, которая позволяет совершить действие, призыв о котором был в блоке выше. Под цифрой 5 на схеме выделен блок уникального предложения, призванный заинтересоать покупателя выгодой: акции, скидки, подарок за покупку. В шестом блоке фирмы выкладывают своё портфолио: сделанные ранее работы; товары; услуги и т.д.. Под цифрой 7 на рисунке 2 показан блок отзывов - здесь компаниии размещают хорошие отзывы клиентов, сертификаты качества, грамоты и прочие доказательства конкурентоспособности. Так выглядит стандартная схема длинных страниц. Она не содержит лишних ссылок, неважной информации и поэтому привлекательна для пользователей.
Если трендом веб-дизайна 2014 года был минимализм, то сейчас, в середине 2015 года, к нему добавился яркий акцент. Акцентом в данном случае является картинка или видео в хорошем разрешении. Самое главное правило – не перегружать дизайном сайт. Один акцент, который привлекает внимание и передает главную идею сайта, и минимальный набор текста и кнопок, которые должны отлично сочетаться с акцентом, не переводя лишнего внимания на себя. На рисунке 3 показан пример веб-страницы в стиле минимализм с ярким акцентом.
Рисунок 3. Пример веб-страницы в стиле минимализма с ярким акцентом. Акцентом в данном случае является изображение в высоком разрешении, которое привлекает на себя внимание, но не перегружает пользователя лишними элементами дизайна.
Тенденции 2015 года подсказывают, что пользователь не должен отвлекаться на лишние эффекты, дополнительные акценты, цветовую перенасыщенность. В связи с этим самым популярным в 2015-2016 году станет использование стильных элегантных и ненавязчивых кнопок, не имеющих фона. К тому же такие кнопки отлично сочетаются с трендом, о которым сказано в пункте 3 данной работы. Пример использования прозрачной кнопки показан на рисунке 4.
Рисунок 4. Пример страницы с прозрачной кнопкой "Регистрация". Главной на этой странице является кнопка "Войти", поэтому на нее сделан акцент цветом. Второстепенная кнопка "Регистрация" прозрачная с цветной рамкой, чтобы эта кнопка не отвлекала на себя внимание, но при необходимости была заметна.
Material Design [2] – это разработка корпорации Google, которая, по словам самих разработчиков, представляет собой визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями науки и техники.
Основные принципы материального дизайна: интуитивное общение с техникой; визуальные подсказки, основанные на реальности (бумага и чернила, свет, поверхность); пространство, масштаб; акцент на действия пользователя; единая среда, непрерывность действий. И всё это не нарушает принципов минимализма, а является его продолжением и улучшением.
Рецензии:
24.12.2015, 18:12 Клинков Георгий Тодоров
Рецензия: Статья рекомендуется к пуубликации.Основания:
1/Актуальность проблематики...
2/Высокий научный стиль автора...
3/Веб-дизайн анализирован на основе ясного исследовательского конструкта...
4/Динамизация основных доводов автора в процессе развития основной тезы...
5/Структура статьи имеет нужный объем и логических связей...
Комментарии пользователей:
1.10.2015, 18:29 Агрова Кристина Олеговна Отзыв: Сергей Владимирович, спасибо Вам за отзыв и Ваши замечания. Я их учла и исправила всё, о чём Вы написали. |