Казьменко Елена Александровна

Исследовательская работа по теме «Математика в создании веб-сайтов»

Материал опубликован 3 July 2017 в группе

Математики, объединяйтесь!!!

371

3609

Муниципальное бюджетное общеобразовательное учреждение

«Лицей №1»

Исследовательская работа по теме: «Математика в создании веб-сайтов»

Выполнил: Шепелев Владислав

ученик 7 «Д» класса

МБОУ «Лицей №1»

Руководитель: Е.А. Казьменко

учитель математики

МБОУ «Лицей №1»

2017 г.

г. Воронеж

Введение

«Математика прекрасна». Это может показаться абсурдным, для людей которые при одном только упоминании математики вздрагивают. Однако некоторые из самых красивых вещей в природе и нашей Вселенной — это проецирование математических свойств, от самых маленьких до крупнейших галактик. Один из древних философов, Аристотель сказал: «математическим наукам свойственно выстраивать все по порядку, в симметрии и ограничениях, они являются главными формами прекрасного».

Из-за своей природной красоты, математика является частью искусства и архитектуры. Но она практически не применяется для дизайна сайтов и приложений. Это наблюдается из-за того, что многие не сопоставляют математику с дизайном. Хотя, наоборот, математика может быть инструментом для производства, поистине волшебных конструкций.

Эффективный современный веб-дизайн не должен быть просто симпатичной и яркой картинкой. Он должен быть простым и интуитивно понятным. Какими же средствами этого добиться? Как сделать так, чтобы у посетителя возникло чувство гармонии и комфорта? Нужно для этих целей воспользоваться основными правилами математики.

Я считаю, что тема моего исследования на сегодняшний день очень актуальна.

Цель работы: рассмотреть различные математические принципы, которые можно использовать в дизайне сайтов.

Задачи исследования:

- проанализировать информацию по созданию сайтов;

- выяснить математические принципы, применяемые при создании сайтов;-

-сделать выводы о применении математики в создании сайтов;

-обобщить полученные материалы;

- создать макет сайта с использованием полученных данных.

Объект исследования: веб-сайты.

Предмет исследования: использование математики при создании веб-сайтов.

Методы исследования:

-изучение и обобщение;

-библиографический анализ литературы и материалов сети Internet;

-анализ полученных данных.

Практическая часть

1. Золотое сечение и web-дизайн

Говоря о математике нельзя не вспомнить о золотом сечении - божественной пропорции. Принцип золотого сечения применяется в верстке газет и журналов уже более ста лет, а сегодня становится все более популярным и в веб-дизайне. Дизайн золотыми прямоугольниками хорошо подходит, презентационных сайтов и каталогов продукции. Такой подход можно использовать для организации бокового меню и показа рекламы. В частности, его можно использовать их в блоках, которые показывают изображения или объявления в боковой панели. Естественно такой подход не применяют для создания профессиональных сайтов.

Золотой прямоугольник — это фигура, отношение сторон которой друг к другу равно 1,618. На сайтах золотой прямоугольник применяется не только из эстетических соображений. Навигация или какой-то другой элемент интерфейса сайта легче воспринимается пользователем, если используется принцип золотого сечения.

На рисунке мы видим каркас сайта, шириной 1000 пикселей. Широкая колонка равна 618 пикселям. Если 618 пикселей принять за единицу, то 1000 пикселей будет равна как раз 1.618 Узкая колонка равна 382 пикселям. И если 382 пикселя принять за единицу, то 618 = 1.618…

Можно пойти дальше, и широкую колонку разделить на две части также по принципу Золотого сечения.

Золотое сечение в веб-дизайне активно используется на Западе. Даже существует сайт, который позволяет совершать все эти вычисления для двух и трехколоночного макета сайта. Для веб-дизайнеров, решивших следовать принципам золотой пропорции в создании сайтов, это будет отличным инструментом. Адрес этого сайта: Goldenratiocalculator.com.

Чтобы определить зрительные центры рабочая площадь условно разделяется на две части в соответствии с золотой пропорцией, причем как по вертикали, так и по горизонтали. На пересечении условных прямых находится точка, которая называется «зрительным центром».

Можно также разделить рабочую площадь и с обратной пропорцией, получится четыре точки, в каждой из которых могут быть расположены ключевые элементы композиции.

Иногда проводят диагональные линии которые служат направляющими для расположения динамичных элементов композиции. Это значит, что ключевые элементы, а главное доминанта, должны находиться в районе зрительных центров общей композиции сайта.

В качестве примера рассмотрим минималистский дизайн сайта (Приложение 1). Он имеет шесть золотых прямоугольников, по три прямоугольника в каждой строке. Прямоугольники имеют размеры 299 х 185 пикселей. Таким образом, стороны этих прямоугольников образуют золотое сечение, то есть 299/185 = 1,616. Обратите внимание, что большое количество свободного пространства, окружающего Золотой прямоугольник создает спокойную и простую атмосферу, в которой каждый блок служит своей цели. Для гибкого лэйаута нужно брать расчеты в процентах. Делим 100% на 1.62 и получаем основную колонку, которая займет 62%, а вторая 38% соответственно. Далее, Вы сможете работать исходя из этого соотношения. Изображения, блоки текста и врезок могут быть хорошо представлены в маленьких золотых прямоугольниках, которые формируют красивый, сбалансированный вид, но число прямоугольников на каждой странице должно быть ограниченным.

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

2.Последовательность Фибоначчи в веб-дизайне

Дизайн Фибоначчи основан на последовательности чисел Фибоначчи. По определению, два первых числа Фибоначчи равны 0 и 1, и каждое последующее число равно сумме двух предыдущих. Последовательность Фибоначчи выглядит следующим образом:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
Дизайн Фибоначчи лучше всего подходит для блогов и журналов. Вы можете расположить макет самыми разными способами, но в соответствии с числами Фибоначчи.

Ряды Фибоначчи используют при построении многоэлементных макетов. Размеры элементов возрастают соответственно увеличению значений чисел ряда. На практике это выглядит следующим образом:

Ряд Фибоначчи не обязателен для построения квадратов. Это могут быть окружности, овалы и т.п

Не удивительно, что в данном проекте четко соблюдаются нужные пропорции. Крупные компании, зачастую, нанимают хороших специалистов, способных правильно развивать их бренд. Основной контент находится в блоке №1, элементы навигации в пределах блока №2. Если посмотреть на сайдбар, то даже там найдете воплощение принципа золотого сечения в дизайне — соотношение размера избранной статьи и рекламного объявления под ней.

Здесь пропорция реализована несколько иным образом — не горизонтально, а вертикально в каждой из колонок отдельно. Оцените место, которое занимает заголовок в блоке №3. Кстати, если бы разработчики использовали социальные кнопки сразу под ним, то это бы привлекло к элементам больше внимания, и посетителям сайта не пришлось бы тратить время на их поиск

Страница разделена на три колонки. Каждый столбец соответствует числу Фибоначчи. Для этого дизайна, использовали базу шириной 90 пикселов. Эта база шириной затем умножается на число Фибоначчи, чтобы получить общую ширину столбца. Например, первая колонка имеет ширину 180 пикселей (90 х 2), вторая колонка имеет ширину 270 пикселей (90 х 3) и третья колонка имеет ширину 720 пикселей (90 х 8). Размер шрифта также соответствует числу Фибоначчи. Заголовок страницы имеет размер 55px; заголовок статьи 34px; а основной текст 21px.
Возможное применение: дизайн по Фибоначчи лучше всего подходит для блогов и журнальных макетов

Существует специальный сайт http://www.uxtriggers.com/, с помощью которого можно узнать использовалось ли последовательность Фибоначчи и золотой пропорции в web-дизайне указав адрес интернет-странички.

3. Золотая спираль

Строится с использованием ряда Фибоначчи и дополнительно определяет расположение элементов — от меньшего к большему по мере увеличения витков спирали. Она может быть развернута любым образом — это зависит от требований к макету.

Я нашел несколько примеров сайтов с реализацией принципа золотого сечения в веб-дизайне и наложением данной спирали.

4.Правило третей в веб-дизайне

Правило третий один из распространенных способов разметки страницы (Приложение 3). Предположим, что у вас фиксированный шаблон в 960px, при этом его высота может варьироваться от 750px до 950px. Произведем следующие действия: разделите ширину на 3, получим 320px. Разделите среднюю высоту вашей страницы на 3 ( (750 + 950 px) / 2 ) / 3 ≈ 285px. Следовательно, каждый прямоугольник должен быть размером 320px × 285px. Построим сетку из девяти квадратов, 3 × 3. Теперь видны точки, в центре которых нужно расположить наиболее важные элементы вашего сайта, такие как кнопки, меню и другую актуальную информацию. Функции навигации прекрасно видны и структура сайта замечательно просматривается. Также удачно главные секции расположены на второй горизонтальной прямой. Это очень эффективно.

5. Пять элементов или Kundli дизайн

Еще один интересный пример математики в дизайне – это техника, основанная на правилах составления индийского гороскопа Kundli. Здесь основой является следующая фигура. Рисуется квадрат, внутри него проводятся две диагонали, соединяющие противоположные углы, потом линиями соединяются центры соседних сторон квадрата. Внутри квадрата мы видим четыре ромба. Это и есть основа для расположения пяти элементов дизайна на странице. Пример дизайна сайта базирующийся на геометрии Kundli приведен в приложении 3. Этот макет может подойти для одностраничного сайта-визитка с элементами интерактивного дизайна, для сайтов портфолио и сайтов, ориентированных на демонстрацию продукции. Также этот макет может легко превратиться в сайт с трехколоночной версткой хедером и футером.

6. Sine Wave дизайн

Когда дело доходит до математики, а Вы не хотите придерживаться достаточно известного Золотого сечения или последовательности Фибоначчи, можно попробовать поэкспериментировать с формулами из физики, химии и других наук, используя общеизвестные формулы и их значения. Например, рассмотрим синусоидальные волны или синусоиды (Sine Wave). Синусоиды — это такие математические функции, которые выглядят как, гладкие повторяющиеся колебания. Мы использовали синусоиду в качестве основы для простого и оригинального веб-дизайна, и создали одномакетную страницу. Этот макет состоит из заголовка, пяти колонок и нижнего колонтитула Эта конструкция оптимальна для сайтов, где требуется отражать хронологию событий. Более всего подходит для горизонтальной навигации.

Практическая часть

1. Анализ анкетных данных учащихся

Художественное восприятие формы человеком возникает, развивается и обогащается в процессе постоянного, непрерывного общения со всем тем, что его окружает. Для того чтобы узнать что является важным в структуре сайта с точки зрения пользователя было решено провести следующее анкетирование:

Что для вас является важным при создании сайта?

а) красивая картинка; б) хорошая навигация; в) реклама

Зависит ли «популярность» сайта от местоположения блоков (меню) в нем?

Проанализировав данные анкеты, можно сделать следующие выводы, что для пользователей наиболее важным является удобная навигация по сайту и так же очень важным является расположение блоков на сайте.

2. Анализ сайтов, использующих математику в веб-дизайне.

В своей работе я проанализировал структуру интернет- страниц и попробовал найти в них применение математики. Сайт должен быть не только красивой картинкой, а иметь удобную для пользователя навигацию, а в сфере услуг это просто необходимо для привлечения клиентов. Возьмем для исследование сайт известной компании МТС (http://www.mts.by/) и проверим как в его дизайне применяются золотые пропорции. Сайт имеет статические размеры, поэтому к нему можно применить правило золотого сечения, как к ширине сайта, так и к высоте. Разделив высоту и ширину страницы на 1.62, мы получили линии золотой пропорции (красные линии). На пересечении этих линий находится точка «зрительного восприятия» (зона 1 и 2): «Вопросы и предложения» и реклама акции, что является не маловажным для клиентов. Применив деление еще раз к верхней части, мы получили место для расположения меню сайта (3). Так же логотип компании МТС содержит в себе элементы золотой пропорции и находится на диагональной линии.

Таким же удачным дизайном может похвастаться другая торговая компания avon (http://www.avon.by/), для которой привлечение клиентов является основной задачей.

К размеру данного сайта хорошо применимо правило третей. Разделив ширину и высоту на 3 части, проведя линии, мы получили центры «центры зрительного» восприятия (зона 1), где размещена реклама продукции. В центе страницы размещена информация о скидках. На диагональных линиях расположились наиболее важные элементы сайта – специальное предложение, логотип, интернет-предложение, регистрация (зоны 2, 3, 4, 5 соответственно). Так же применив правило третей к верхней части сайта, поучим область для расположения меню. Также удачно главные секции расположены на второй горизонтальной прямой. Это очень эффективно

It's Numbered, известный онлайн магазин графики, использует идею золотого сечения, как отношение блоков с изображениями и текстом. Золотое сечение может использоваться не только в макете сайта, но и в общем дизайне сайта, при группировке объектов, и т.д.

Для сайта Московского государственного университета имени М.В.Ломоносова использовали числа Фибоначчи.

Не все сайты используют в своем дизайне математику, например, дизайн сайта нашего лицея.

Заключение.

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

В веб-дизайне сайтов не в полном объеме применяют математику, так как для кого-то не понятны вещи, такие как креатив и математика, а точнее- не совместимы.

Выполняя свою исследовательскую работу, я убедился, что математику

можно использовать, как инструмент при создании веб-проектов, применяя дополнительно другие средства

По моему мнению, веб-страницы выглядят более гармонично, когда они сделаны с использованием принципов золотого отношения. Это единственное соотношение, которое использовалось еще две тысячи лет назад, для тех же целей, что и сегодня.

Использование золотых прямоугольников дает чувство упорядоченности любому дизайн проекту. Но нужно быть аккуратным, и избегать злоупотребления этими прямоугольниками. Слишком большое количество произведет обратный эффект и сделает дизайн слишком приторным и менее привлекательным.

Сочетание математических вычислений и органической структуры в веб-дизайне может дать отличный результат. Необязательно, чтобы весь дизайн опирался на все упомянутые принципы, достаточно будет, если Вы постараетесь использовать один из них. Это поможет Вам правильно соблюсти пропорцию и разложить составляющие контента на свои места.

Список использованных источников и литературы

Автор: Илья Михалёв. Правило и метод золотого сечения в дизайне. [Электронный ресурс]. Адрес: http://witiger.ru/state/view/metod-pravilo-zolotogo-secheniya-v-dizayne.html

Прикладная математика в веб-дизайне. Часть 2. Дизайн Фибоначчи. [Электронный ресурс]. Адрес: http://2web-master.ru/applying-mathematics-to-web-design-chapter-2-design-fibonacci.html

Прикладная математика в веб-дизайне. Часть 4. Sine Wave дизайн. [Электронный ресурс]. Адрес:http://2web-master.ru/applying-mathematics-to-web-design-chapter-4-sine-wave-design.html

Прикладная математика в веб-дизайне. Часть 3. Пять элементов, или Kundli дизайн. [Электронный ресурс]. Адрес:http://2web-master.ru/applying-mathematics-to-web-design-chapter-3-kundli-design.html

Как правильно использовать математические закономерности в дизайне сайтов. [Электронный ресурс]. Адрес: http://www.designonstop.com/webdesign/article/kak-pravilno-ispolzovat-matetmaticheskie-zakonomernosti-v-dizajne-sajtov.htm

Использование «Золотого сечения. [Электронный ресурс]. Адрес: http://fonts.jofo.ru/528261.html

Приложение 1

Дизайна сайта с «золотыми прямоугольниками»