ДАНГ НГОК ХОАНГ ТХАНЬ. СЕКЦИЯ "ГРАФИЧЕСКИЙ ДИЗАЙН"

[Королева С.В.]

УДК 004.5
ПРИНЦИПЫ СОВРЕМЕННОГО ВЕБ-ДИЗАЙНА
ДАНГ НГОК ХОАНГ ТХАНЬ
Аспирант кафедры информационной безопасности, факультета кибернетики,
Тульского государственного университета, Г. Тула, РФ.
myhoangthanh@yahoo.com
Аннотация. В работе приведены принципы создания современного веб-дизайна. Созданные с помощью данных принципов веб-сайты принесут новый опыт пользователям и повысят количество посетителей.
Ключевые слова. Веб-дизайн, золотое сечение, обрамление, CSS3, HTML5.

1. Введение
В настоящее время интернет достиг высоких результатов: скорость передачи данных и полоса пропускания сети повышены, количество пользователей интернета также возросло, количество денежных и не денежных операцией через интернет также увеличилось. Одна из многих причин, которые привели к этим достижениям – это веб-приложения. Принципы использования интернета меняются: с развитием мобильных технологий [1], пользователи получили доступ к сети интернет с помощью персональных устройств. Веб-разработчики находятся в постоянном поиске методов повышения рейтинга [2] своих веб-сайтов и увеличения количества посетителей. Такие методы основаны на следующих факторах:
(1) Предсказание тренда и спроса пользователей;
(2) Функциональные возможности должны быть полны, просты и демонстративны;
(3) Качество обслуживания должно быть достаточно высоким, а отношение к клиентам – дружеским;
(4) Стоимость поддержки невысокой либо вовсе нулевой.
В данной работе рассмотрим 2-ой фактор – делаем акцент на пользовательским интерфейсе либо веб-дизайне [3, 4, 5].
2. Принципы современного веб-дизайна
Принцип 1. Оформление дизайна и равновесие
Вёрстка дизайна – это один их важнейших критериев для оценки профессионального уровня веб-сайта. Дизайн является лицом веб-сайта, а также основой для оценки качества сервисов, предоставляемых веб-сайтом. Такая оценка субъективна и недостаточно полна, но и она очень важна. Например, рассмотрим электронный коммерческий веб-сайта Amazon. Качество вёрстки очень заметно. Товары и категории товаров находятся в нужных местах. Функция поиска товаров подсказкой «какой товар вы хотите приобрести?» размещена на видном месте. Популярные товары, и товары со скидкой также находятся легкодоступных местах. Такое дизайнерское решение стимулирует покупательский интерес пользователя тем самым способствует увеличению спроса.
В веб-дизайне, свободное и фиксированное обрамления обычно используются. Подбор какого обрамления зависит от цели веб-сайта. В таком обрамлении делятся на структуры с одним или 2-мя или 3-мя столбцами. Структуры с 2-мя или 3-мя столбцами популярно используется. Сейчас, тренд дизайна по стили «Live Tiles» сильно развивает, поэтому дизайнерам более нравится структура с одним столбцом.
Другой важный критерий в дизайне веб-сайта – оформление должно быть сбалансированно. Различают 3 типа баланса:
 Симметричный баланс относительно оси: вносит совершенство и гармоничность.
 Асимметричный баланс: ощущение свободы и безграничности.
 Симметричный баланс относительно центра: не используется в веб-дизайне.
Дизайн веб-сайта Amazon на (рис. 1) имеет асимметричный баланс. Благодаря этому, пользователи ощущают свободу и готовы отдать крупную сумму за товар.
Принцип 2. Цветовая палитра и мультимедиа
Цвет также является важным фактором в веб-дизайне. Цветовая палитра в веб-дизайне должна быть сбалансированной. По опыту, веб-сайты с яркими цветами часто являются неудачными. Подбор цветов зависит от цели веб-сайта. Для электронных коммерческих веб-сайтов выбираются внушающие уверенность и чистые цветы, такие как белый, зелёный, синий либо оранжевый. Например, Amazon, Apple магазин, Adobe магазин, Microsoft магазин, Nokia магазин и т.д. используются белый цвет.
Изображения, использующиеся на веб-сайте также должны тщательно подбираться. Форматы файлов изображений, используемых на веб-сайте – GIF, PNG, JPG. Такие форматы файлов не только гарантируют хорошее качество отображения, но и обеспечивают небольшой размер файлов, сокращая этим самым время загрузки страницы.
Принцип 3. Оптимизация скорости скачивания страницы; стабильность и независимость от веб-браузеров и платформ
Оптимизация скорости скачивания: веб-сайты стали более красивыми, притягательными с использованием мультимедиа, но скорость скачивания страниц при этом уменьшается. Пользователи будут недовольны большим временем загрузки веб-сайта. Дизайнерам необходимо избирательно подходить к выбору мультимедийных материалов, чтобы не увеличивать до критического уровня время ожидания загрузки веб-сайта.
Стабильность и независимость от веб-браузера и платформы: один шаблон дизайна называется постоянным если он стабилен и не зависит от веб-браузера. Если такой шаблон хорошо отображается в Chrome, Firefox, но плохо в Internet Explorer, то в конечном счёте он является плохим. Выбор веб-браузера зависит от предпочтения пользователей, поэтому отображение веб-сайта нужно тестировать на самых популярных веб-браузерах. Если существуют ограничения на технологии, используемые веб-браузером (например, нет поддержки таких технологий, как AJAX, HTML5, CSS3 [3] и т.д), разработчики должны предоставить пользователям информацию о предпочтительных веб-браузерах.
Принцип 4. Отступы и пробелы [5, 6]
Нельзя создавать вебсайт, содержащий только чистый текст без отступов и пробелов. Это приведёт к путанице, потере интереса пользователей, и они захотят возвращаться. Такие веб-сайты создают ощущение тесноты, закрытого пространства и негативно влияют на ощущения пользователя.
Пользователи не хотят терять много времени на чтение всего текста, им нужна возможность овладеть основной информацией. Следует учитывать, что пользователи предпочитают визуальное восприятие информации нежели чтение, поэтому помимо текстовой информации следует использовать мультимедиа, отступы и пробелы.
Принцип 5. Группирование и пагинация
Записи на веб-сайте должны быть рационально сгруппированы. В каждой группе могут содержаться подгруппы. С помощью группирования веб-сайты станут красивыми и последовательными.
Другой метод для создания очерёдности – это пагинация. Она используется, если текст записи длинный. При традиционной пагинации, в основном используется нумерация страниц. Современные веб-сайты используют новый принцип пагинации – пагинация по скроллингу. Это значит, что текст следующей страницы будет добавляться, когда пользователь дочитал текущую страницу до конца. Примерами веб-сайтов, использующих такую пагинацию: Facebook, Yahoo, Google рисунки и т.д.
Принцип 6. Золотое сечение [6] в дизайне
Золотое сечение обычно используется в архитектуре и также применится в веб-дизайне. Значением является золотое сечение. Следующий пример показывает, что социальная сеть Twitter также использует золотое сечение в своём дизайне.
Сечение 16:10 для слайда-шоу на веб-сайтах считается золотым. Такое сечение даёт лучший угол обзора.
Принцип 7. Использование веб-анализаторов для обнаружения действий пользователей для изменения и обновления дизайна
Google даёт аналитические инструменты для определения уровня акцентирования внимания пользователей на частях веб-сайта. На основе таких результатов разработчикам необходимо подбирать шаблоны, которые будут рационально отображать информацию на веб-сайте.
3. Заключение
В данной работе были рассмотрены 7 принципов для создания современного веб-сайта. Целью следования данным принципам является повышение качества и опыта использования сервисов. Главной целью является повышение дохода путём увеличения количества пользователей.

ЛИТЕРАТУРА
[1]. Lisbeth Thorlacius. Visual Communication in Web Design – Analyzing Visual Communication in Web Design // International Handbook of Internet Research P.455-476, Springer, 2010.
[2]. Aaron Marcus. Design, User Experience and Usability: Web, Mobile and Product Design // Second International Conference HCI 2013, Las Vegas.
[3]. Peter Gasston. Multi-Device Web Development with HTML5, CSS3 and JS // Smashing Magazine, 2013.
[4]. Pierre Hansch, Christian Rentschler. Emotion@Web // XMedia Press, 2012.
[5]. Ethan Marcotte. Responsive Web Design // A Book Apart, 2011.
[6]. John Sharp. Spirals and the Golden Selection // Nexus Network Journal, 2002, Vol. 4, P. 59-82.