просмотреть - Чебоксарский механико

МИНОБРНАУКИ РФ
ФГОУ СПО «Чебоксарский механико-технологический техникум»
Учебно-исследовательская работа
«Математика в компьютерном дизайне»
Выполнил: студенты гр. 2ам3
Андреев П.К.
Зайцев А.С.
Руководитель: Н.А. Крылова
2011
ВВЕДЕНИЕ
Математика – это прекрасно. Для человека, далекого от цифр и
уравнений, это может звучать абсурдно. Однако, множество самых красивых
вещей в природе, да и сама Вселенная, основаны на строгих математических
пропорциях. Еще Аристотель, один из самых авторитетных философов
древности, говорил: “Математика выявляет порядок, симметрию и
определенность, а это – важнейшие виды прекрасного”.
Математика есть везде, даже там, где вы не ожидаете. Вы можете найти
математические соотношения и константы в архитектуре, в живописи, в
инструментах, которые мы используем для создания музыки. Вы можете
найти математику в некоторых играх, в которые мы играем, и поэтому не
должно удивлять, что математика играет важную роль и в веб-дизайне тоже.
Но происходит это достаточно редко. Наверное, потому, что есть
расхожее мнение, что математика и креатив – вещи несовместимые. Хотя это
мнение можно опровергнуть: математика является хорошим инструментом
при создании сайтов.
Общий вывод прост: можно использовать некоторые основные
математические принципы для создания порядка и красоты в собственных
творениях.
В данной работе сформулированы основные математические
принципы, применяемые в компьютерном дизайне различных сайтов и
приводится результат исследования веб-сайтов на предмет наличия этих
принципов в их оформлении.
МАТЕМАТИЧЕСКИЕ ПРИНЦИПЫ В КОМПЬЮТЕРНОМ ДИЗАЙНЕ
1. Золотое сечение или «золотой прямоугольник»
В древней Греции была элитная группа математиков, которые называли
себя пифагорейцы. Пифагорейцы избрали пентаграмму своей эмблемой. Они
выбрали эту форму из-за своего математического совершенства: линейная
форма пентаграммы содержит золотые пропорции целых три раза! Кроме
того, существует множество золотых прямоугольников скрытых внутри
формы, это те же золотые прямоугольники, которые присутствуют в картине
«Мона Лиза».
Спустя некоторое время после этого, в 12-13-ом веках, жил
талантливый итальянский математик. Его имя было Леонардо Пизано
Биголло, хотя вы знаете его лучше, как Фибоначчи. В своей книге «Liber
Abaci», он рассмотрел процесс естественного размножения кроликов. В этом
его идеальном мире, где кролики никогда не умирают, и воспроизведение
каждого кролика начинается как можно скорее, он узнал, что этот цикл
содержит особенную последовательность чисел. Эта последовательность
позже стала известна, как числа Фибоначчи.
Что такого особенного в этой последовательности? Дело в том, что
если вы разделите выбранный номер с предшествующим числом в
последовательности, вы (приблизительно) получите столько же, каждый раз.
Это число составляет около 1,618, и более известно, как Phi. Чем дальше вы
заходите в последовательности, тем ближе результат разделения приходит к
Phi. Фибоначчи также выяснили, что эта последовательность не только в
разведении кроликов, но и в других вещах в природе, например,
расположение семян в подсолнечнике.
Число Phi также очень известная константа в дизайне. Это потому, что
соотношение 1 к 1,618 более известно, как Золотое сечение – часто
упоминается как Золотая пропорция, или Божественное Соотношение. Если
вы создадите прямоугольник в соответствии с этим соотношением, вы
получите форму, известную как золотой прямоугольник.
Золотой прямоугольник, показанный здесь, показывает, как можно
разделить на себя бесконечно (и отлично).
Золотое сечение и Золотой прямоугольник используется во многих
видах искусства и дизайна. В эпоху Возрождения, многие художники
создавали работы в соответствии с этим соотношением и прямоугольником.
В древней Греции, архитекторы использовали этот прямоугольник в дизайне
зданий (Парфенон является хорошим примером этого). Даже в современной
архитектуре золотой прямоугольник имеет ощутимое присутствие.
Но, что же делает это соотношение таким особенным? Так как это
число, Phi, находит свои истоки в природе, мы, люди, автоматически
находим это соотношение комфортным для себя. Потому что мы настолько
знакомы с этим соотношение, оно естественно, вызывает чувство равновесия
и гармонии. По этой причине, использование такого соотношения может
гарантировать вам сбалансированный состав ваших элементов.
Примеры Золотого сечения в веб-дизайне
Рассмотрим в качестве наглядного примера этот минималистический
дизайн, представленный ниже. Он состоит из 6 золотых прямоугольников,
размером 299х185 пикселей, по 3 прямоугольника в ряд. Стороны этим
прямоугольников соотносятся по правилу золотого сечения 299/185=1,616.
Обратите внимание на большое количества пространства вокруг
золотого прямоугольника. Оно создает спокойную и приятную атмосферу, в
которой элементы навигации могут спокойно дышать. Несмотря на
использование всего нескольких цветов и однотипных блоков, все элементы
навигации интуитивно понятны и служат своей цели.
В ходе исследования 100 веб-сайтов на наличие применения принципа
«золотого прямоугольника» было найдено
сайтов среди них:
- Сайт лаборатории Касперского
- Сайт «Группы ГАЗ»
2. Числа Фибоначчи в дизайне
Числа Фибоначчи – это математическая последовательность из ряда
чисел. По определению, два первых числа Фибоначчи равны 0 и 1. Каждое
последующее число равно сумме двух предыдущих. Ряд чисел выглядит
следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…
Числа Фибоначчи используют в музыке для настройки инструментов,
в архитектуре для вычисления гармоничных пропорций, например
соотношение высоты помещения к высоте декорирования стен различными
материалами. Расстояния между листьями (или ветками) на стволе растения
относятся примерно как числа Фибоначчи.
Основная область применения чисел Фибоначчи в дизайне –
определение размеров блоков с основным контентом (контейнеров) и
боковой панели. Суть метода в следующем. Берется базовая ширина
контейнера, например, 90 пикселей, и последовательно умножается на числа
из ряда Фибоначчи. На основании этих вычислений строится сетка сайта.
Посмотрим на примере.
Страница разделена на три колонки. Базовая ширина контейнера 90
пикселей. Тогда первая колонка имеет ширину 180 пикселей (90 х 2), вторая
колонка имеет ширину 270 пикселей (90 х 3) и третья колонка имеет ширину
720 пикселей (90 х 8). Размер шрифта также соответствует ряду Фибоначчи.
Размер шрифта в заголовке 55 пикселей, шрифт в разделе – 34 пикселя и
шрифт для текста 21 пиксель.
Области применения. Числа Фибоначчи лучше всего подходят для
дизайна блогов и журнальных макетов.
3. Пять элементов или Kundli дизайн
Еще один интересный пример математики в дизайне – это техника,
основанная на правилах составления индийского гороскопа Kundli. Здесь
основой является следующая фигура. Рисуется квадрат, внутри него
проводятся две диагонали, соединяющие противоположные углы, потом
линиями соединяются центры соседних сторон квадрата.
Внутри квадрата мы видим черыре ромба. Это и есть основа для
расположения пяти элементов дизайна на странице.
Приведенный ниже пример дизайна сайта базируется на геометрии
Kundli. Этот макет может подойти для одностраничного сайта-визитка с
элементами интерактивного дизайна.
4. Колебания синусоиды
Если хочется разнообразия, то совсем не обязательно придерживаться
базовых правил золотого сечения и чисел Фибоначчи. Можно
поэкспериментировать и с другими общеизвестными формулами.
Давайте посмотрим каким получится макет сайта, основанный на
колебаниях
синусоиды,
математической
функции,
описывающей
повторяющиеся колебания. На картинке ниже представлен пример простого
и оригинального одностраничного сайта.
Области применения. Эта конструкция оптимальна для сайтов, где
требуется отражать хронологию событий. Более всего подходит для
горизонтальной навигации.
5. Правило Третей
Это правило гласит, что изображение должно быть разделено на девять
равных частей двумя горизонтальными и двумя вертикальными линиями. А
все важные композиционные элементы должны быть расположены вдоль
этих линий или на их пересечениях.
В данном примере на двух из четырех пересечений собрана самая
важная информация. Отмечено розовыми квадратами. А навигационный блок
расположен как раз вдоль второй горизонтальной линии.
Так, как же именно можно применить правило третей в дизайне вашего
сайта? Вам следует разбить ваше изображение на трети по горизонтали и
вертикали, чтоб получилось 9 фрагментов.
Когда у вас появились линии, вы можете теперь разместить ваши
элементы в соответствии с этими линиями. Выровняйте элементы по линиям,
и поместите некоторые элементы, являющиеся наиболее интересными и
контрастными на точках пересечения.
Выводы
Нами были исследованы 100 сайтов на применение математических
принципов в веб-дизайне и мы получили следующие результаты:
Математика может быть красивой, когда применяется к дизайну.
Конечно, все эти техники не являются гарантом хорошего дизайна. Однако,
наверняка, они помогут в процессе созидания и дальнейшего восприятия
информации.