MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math...

14
MATHEMATICS IN DESIGN An exploration of the use of math in the fields of Fine Art and Graphic Design TEAM MEMBERS: SABRINA HURT ERYN NEELY TIM COOLEY Spring 2017, EMPACTS Project Gary Bender, Instructor, [email protected] Northwest Arkansas Community College Bentonville, AR 72712

Transcript of MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math...

Page 1: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

MATHEMATICS IN DESIGN

An exploration of the use of math in the fields of

Fine Art and Graphic Design

TEAM MEMBERS: SABRINA HURT ERYN NEELY TIM COOLEY Spring 2017, EMPACTS Project

Gary Bender, Instructor, [email protected] Northwest Arkansas Community College Bentonville, AR 72712

Page 2: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

• OBJECTIVES 1. To give the beginning Fine Arts student and Graphic Design

student an understanding of how the use of Mathematics in Fine Art and design has been documented through out history

2. To aid the beginning Fine Arts student and Graphic Design student in the understanding and application of Mathematics in design and composition of visual communications and artwork

3. To provide beginning design students with a few of the resources available to them early in their education process.

Page 3: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

The Hexadecimal numbering system for colors

A hexadecimal numbering system is used in design to ensure that consistency of color is used between the various different individuals working on a design project and particularly in web design. By assigning a hexadecimal number to a color, tint, tone, shade, designers world wide can look at the same color or as close as their monitors or other devices will allow. This allows for collaboration in design across vast distances that were previously impossible to do. A great resource for finding colors and their hexadecimal numbers can be found @ http://www.colorhexa.com, https://en.wikipedia.org/wiki/Lists_of_colors lists colors in an alphabetical order along with the hexadecimal and RGB make up of the colors.

Page 4: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Mathematics in Typography

Typogragphy is the work of producing printed pages and the styleor appearance of those printed pages. Whether designing a magazine layout, a brochure, web page, poster or any other of the many, many different methods of visual communications enjoyed by our society today, good design and typography starts with a grid. A grid allows the designer to efficiently layout the art work to be used in a pleasing and cohesive relationship in order to subtly guide the viewer to the message the designer is trying to convey. Grids are said to be the invisible glue that hold a design together. Any grid can be modified to fit the design or function to the media to be used. Shown are some examples of basic grids that can be used in printed or web media.

Page 5: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Some math conversions for fonts

• Picas: one pica equals 1/6 of an inch. Used to represent fixed horizontal measurements such as line length column width guttering between columns.

• Points: one point equals 1/72 of an inch. It is used to measure the height of a typed character and the amount of space between lines.

• Each pica is equal to 12 points

• Some general rules for typography in print and web applications

• The four most important typographic choices you make in any document are point size, line spacing, line length, and font (passim), because those choices determine how the body text looks.

• Point size should be 10–12 points in printed documents, 15-25 pixels on the web.

• Line spacing should be 120–145% of the point size.

• The average line length should be 45–90 characters (including spaces).

Taken from http://practicaltypography.com/summary-of-key-rules.html

Page 6: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

The Golden Ratio (1.618) is also known as the divine proportion. In mathematics and the arts, two quantities are in the Golden Ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. Such as seen below:

. A golden rectangle (in pink) with longer side a and

shorter side b, when placed adjacent to a square with

sides of length a, will produce a similar golden rectangle

with longer side a + b and shorter side a. This illustrates

the relationship

The Golden Ratio also known as phi

Page 7: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

The Golden spiral vs the Fibonacci Spiral

The Golden Spiral is based on the Golden Ratio while the Fibonacci Spiral is a spiral based on the Fibonacci Sequence. Both are very similar, and can be used as a compositional tool.

Page 8: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal
Page 9: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal
Page 10: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Samples of using the golden ratio in Architecture

Parthenon in ancient Greece

Page 11: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Leonardo Pisano a.k.a. Fibonacci

• Fibonacci, as he was known, was an Italian mathematician born in 1170 near what is now Pisa Italy.

• Most famous work is the rabbit problem: A certain man put a pair of rabbits in a place surrounded on all sides by a wall. How many pairs of rabbits can be produced from that pair in a year if it is supposed that every month each pair begets a new pair which from the second month on becomes productive. The solution to this problem resulted in what is known as the Fibonacci sequence is 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. This sequence, in which each number is the sum of the two preceding numbers, has proved extremely fruitful and appears in many different areas of mathematics and science. The Fibonacci Quarterly is a modern journal devoted to studying mathematics related to this sequence.

• Taken from: http://www-history.mcs.st-andrews.ac.uk/Biographies/Fibonacci.html

Page 12: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Fibonacci sequence

Page 13: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

USING GOLDEN RATIO IN PHOTOGRAPHY

Top grid is a three place grid horizontally and vertically. It is based on the Golden Ratio. In this case it is 1+.618+1. The rule of thirds commonly taught in photography classes is 1+1+1 is shown below.

Page 14: MATHMATICS IN DESIGN - NWACC - Faculty Web Pagesfaculty.nwacc.edu/EAST_original/Spring 2017/Math Structures II... · Spring 2017, EMPACTS Project TIM ... for colors A hexadecimal

Why use the rule of thirds or golden ratio in photography

The rule of thirds is one of the most useful tools in photography. It's an important concept to learn as it can be used in all types of photography to produce images which are more engaging and better balanced. You should think of it more as a handy "rule of thumb" rather than one that's set in stone. However, it will produce a pleasing photo more often than not, and is an excellent starting point for any composition. By moving the focus of the composition away from the center of the photograph the photographer gives the viewer a more balanced and harmonious composition to look at. Taken from

http://www.photographymad.com/pages/view/rule-of-thirds