1 of 21

MATHEMATICS AND �WEB DESIGN

A CLOSE RELATIONSHIP

Saanjhi Gupta

Swati Umang

2 of 21

MATH IS EVERYWHERE!

A mathematical rectangle can be found in both ancient and modern architecture. We can find this exact same rectangle in some renaissance art by, for example, the famous ’Leonardo da Vinci’s‘, “Mona Lisa”.

3 of 21

INTRODUCTION TO WEB DESIGNING

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design

MATHEMATICS IN

WEB DESIGN

Mathematical thinking is clear, crisp, and concise. These characteristics are all desirable in web design. Even if you're an artist or writer, which are roles that do not normally require a math background, having an interest in, affinity for, and ability in mathematics are desirable characteristics.

4 of 21

MATHEMATICS USED IN WEB DESIGN

Golden Ratio

Fibonacci Sequence

Importance

Applications & Examples

5 of 21

GOLDEN RATIO &�FIBONACCI SERIES

6 of 21

INTRODUCTION

The Golden ratio was discovered by Phidias, a Greek sculptor and mathematician, studied phi and applied it to the designs of his sculptor. Golden Section, Golden Mean, Divine Proportion, or the Greek Letter Phi, the golden ratio is a special number that approximately equals to 1.618.

The Golden Ratio and Fibonacci Sequence go hand in hand.

7 of 21

HOW DOES THIS RELATE TO DESIGN?

Take a line segment of length c.
Divide it by 1.618.
Take c/1.618 = a.

And the other part becomes b.

4. So the ratio of a/b = 1.618.

This is the ratio that is used to create many logos, posters, layouts and more.

Also,

a/b = (a+b)/a = 1.618 = Phi

8 of 21

GOLDEN RATIO AND FIBONACCI SERIES

Take a square any multiply one side by 1.618 to get a new shape, a rectangle.
If you lay the square over the rectangle, the relationship between the two shapes will give you the Golden Ratio.
If you will keep applying the Golden ratio formula to new rectangle on the far right, you will end up getting something like this.

9 of 21

If you draw a spiral over each square, starting in one corner and ending in the opposite one, you’ll create the first curve of the Fibonacci series.

Also know as the Golden Spiral.

10 of 21

HOW TO USE THE GOLDEN RATIO IN DESIGN�

Typography and defining hierarchy

Cropping and resizing images

Logo development

Layout

11 of 21

TYPOGRAPHY AND DEFINING HIERARCHY

The Golden Ratio helps you to find what size font you should use for headers and body copy on a website, blog post, or even print campaign.
Body size: 12px

If you multiply 12 by 1.618.

It becomes 19.41.

Header size: 19px or 20px.

12 of 21

CROPPING AND RESIZING IMAGES�

When cropping images, it’s easy to identify white space to cut out. But, how do you make sure the image is still balanced after you resize it?

For example, if you overlay the Golden Spiral on an image, you can make sure that the focal point is in the middle of the spiral.

13 of 21

��LAYOUT��

Using the Golden Ratio can help you design a visually appealing user interface that draws the user’s attention to what matters the most.

For example, a page that highlights a wide block of content on the left with a narrower column on the right can follow the Golden Ratio’s proportions and help you decide where to put the most important content.

14 of 21

��LOGO �DEVELOPMENT��

While designing a new logo you can the Golden Ratio to help you sketch out the proportions and shapes. Many popular logos follow the Golden Ratio, like Twitter, Apple, and Pepsi.

�

15 of 21

IMPORTANCE OF GOLDEN RATIO IN DESIGN

1. Helps in creating a visual symphony.

2. Balance out the proportion of all design elements.

3. Creates harmony amongst all the design elements.

4. Balanced content which contributes towards an effective web design.

5. Enhances the typography by making proper use of various typographic values in proportion.

6. Adds weightage to the blank space of the design rather than making it look ‘empty’.

16 of 21

REAL WORLD EXAMPLES

17 of 21

��HUMAN FACE��

The mouth and nose are each positioned at golden sections of the distance between the eyes and the bottom of the chin. Similar proportions can been seen from the side, and even the eye and ear itself (which follows along a spiral).

The more closely our proportions adhere to phi, the more "attractive" those traits are perceived. As an example, the most "beautiful" smiles are those in which central incisors are 1.618 wider than the lateral incisors, which are 1.618 wider than canines, and so on.

18 of 21

��SPIRAL GALAXIES��

Spiral galaxies also follow the familiar Fibonacci pattern. The Milky Way has several spiral arms, each of them a logarithmic spiral of about 12 degrees

SHELLS

The unique properties of the Golden Rectangle provides another example. This shape, a rectangle in which the ratio of the sides a/b is equal to the golden mean (phi), can result in a nesting process that can be repeated into infinity — and which takes on the form of a spiral. It's call the logarithmic spiral, and it abounds in nature.

19 of 21

ANALYSIS

In this presentation we discussed how making a website presentable is important. How it can attract people. The Golden Ratio being an integral part of mathematics also is an integral part of Web Designing.

We also discussed how we can observe this concept in our day to day lives.