Research
Fundamental Principles of Composition
Point
A point is defined as a dot or a circle on a page, an example of this that almost everyone in the world has seen at some point in their lives is the full stop or the lowercase ‘i’ in some of the most popular typefaces used in modern society. When a series of dots are displayed on a page at different weights, sizes, alignment and arrangement they can evoke specific meanings and/or messages to the viewer. The point, line & plane principles to design are often used to composition by using lines, planes (squares) and dots (circles) to create arrangement of elements or content on a page or art-board.[1]
Points can also represent the intersection between two or more lines on a page, a popular use of this is the Golden Canon grid system where the grid is built from using the points at each intersection of the page to create a dynamic and responsive layout. Two points connected together will create a line but as a point grows in scale it will often be considered as a shape by the viewer, an example of this would be having a 1-pixel square on a screen would be viewed as a point because it is too small for the viewers brain to make a shape from in but if you gradually increase the size of that point the viewers brain will start to see it as a circle as opposed to a point on the page.[2] Another good example of this is If The Moon Were Only 1 Pixel, which is a website that in built using the principles of point, line and plane.[3]
Line
A line is often defined as a pathway between two points on a page, these can either be straight, curved, thick or thin. Similar to how points are perceived as small by the human brain but as it grows they begin to be perceived as shapes or circles, the same applies to lines where the thinner the pathway between two points is the viewer will perceive it as a line and the thicker that lines becomes the human brain will start to perceive it as a plane.[1] An example of lines and points being used in modern design is in iconography for websites and mobile applications, designers will often use a set of points and lines to create simplistic objects to illustrate a certain action, activity or object. These are simplistic elements in modern user-interface design that allow the viewer to instantly recognise what the icon means throughout basic points and lines, some of their meanings are built into us now as we have started to use technology in our day-to-day lives, the heart icon is a good example as everyone would say signifies the liking of content and is used across almost every social media platform as well as websites and mobile applications.
Another common use of lines within design is through grid layouts and page composition, one of the most popular grids used today by designers and web developers is the 12-column grid system, this a grid that consists of 12 columns vertically down the page to help create balance and alignment in a website or application. You will often see designers and developers adding gutters, which is the space between each column, this is often used to create space for each element and allow it to breathe in the design. Lines are often used within the architectural design industry to allow designers to create shapes from a series of straight lines, architectural designers will converge lines diagonally to create intersections that are usually perceived as vanishing points within the design. This allows the designer to create a sketch of a building from a perspective view using lines and points as opposed to just illustrating the front or side of the building.[1]
Plane
Planes are described as a two-dimensional shape with a width and a height that consists of 2-4 lines joined together, the lines are then perceived as squares or rectangles by the viewer. A common use of this, again, is in grid systems like the Golden Canon grid where the horizontal and vertical lines create different planes or areas on the page. In addition to creating two-dimensional shapes designers can create the illusion of depth and three-dimensional space through the use of vanishing points and intersections, architectural designers will often use this to create the illusion of a three-dimensional object or space on a page.[2]
These fundamentals have been used throughout the growth of society in numerous different industries like art, design and architecture creating the basic structure or building blocks of form and composition. Examples of this can date back to the very first days of printing where the Guttenberg Bible was designed using four columns off content on a two page spread, as design developed the use of basic geometric shapes became more popular through the De Stijl and Bauhaus design movements as designers like Piet Mondrian started using shapes and lines to create interesting art forms. I explore this is more detail later on as the De Stijl era is something that inspires my design.
Divergence & Convergence Design Approach
Taking what I learned from the lectures into consideration, I wanted to use the diverges and converges approach to my idea generation. This allows me to generate a large amount of ideas through brainstorming and then reducing the ideas down to create the solution to what is being asked. I began by brainstorming different ideas for each section of the project considering each section needed to relate to certain key design principles like scale, rhythm and symmetry.
The De Stijl Movement
De Stijl or ‘The Style’ was an artistic movement during 1917 to 1931 also known as Neoplasticism. Founded in The Netherlands by a group or painters, artists and architects, the De Stijl movement demonstrated simplicity and modernism at its purest form by using basic geometric shape, horizontal vertical and diagonal lines, and the three primary colours; red, blue and yellow, to illustrate abstraction and an objects basic form and structure. Pioneered in the early 1900’s by Theo van Doesburg, Piet Mondrian and many other Dutch artists and architects they wanted to spark a new revolution of modernism through design and architecture.[6]
Piet Mondrian
Piet Mondrian is an influential Dutch abstract artist and a co-founder of the De Stijl movement along with Theo Van Doeburg in 1917. Born in Amersfoort, Utrecht, Piet went on to study painting at Amsterdam Academy in 1892 creating abstract art influenced by cubism and aimed to create rhythm in his work. He chose to limit himself the the basic point, line and plane principles by using a set of horizontal and vertical lines forming a grid and a the use of three primary colours, red, yellow and blue.[4] Piet Mondrian work was first displayed in the National Museum of Serbia and became widely adopted by fashion designs from all around the world. During the 1930’s, Piet’s work was a huge inspiration for many clothing brand and sparked a new generation of abstract modernism.[5] I have included some of Piet Mondrian work below to illustrate how his design uses the basic point, line and plane principles.
Project
Wax On, Wax Off – Point
Reflect, Multiply, Disperse, Proximity, Scale & Dominance
Sketches
For my first 3×3 grid I wanted to look into reflection and how I could explore this by using just points and circles. I wanted to look beyond just reflection alone so I decided to explore into how negative space could be used to create an inverse reflection of the other side also.
For my second 3×3 grid I want to look into multiplication and how I could represent this through the use of points and circles. I wanted to look into different scaling and sizing systems like the golden ratio to allow me to create extra contrast between larger points and smaller points, I also wanted to look into how I could represent how viruses multiply through the use of just points and circles.
For my third 3×3 grid I wanted to look into proximity and how I could portray proximity through the use of points and circles, I wanted to explore into how the points and circles are perceived when in close proximity to each other and how elements are grouped together when they are close. I also wanted to explore the opposite of this and how points and circles would be perceived when they are not in close proximity to each other.
I have included an image of my sketches below for you to be able to visualise my ideas.
Final Designs
Paint The Fence – Line
Rhythm, Frequency, Symmetry & Asymmetry
Sketches
For my first 3×3 grid I wanted to explore asymmetry and how I could represent this through a set of basic lines, I wanted to look into using certain grid systems, like the golden canon grid, and take the primary principles from them and utilise them in my own layouts.
For my second 3×3 grid I wanted to explore frequency and rhythm and how this could be portrayed through the use of lines, I wanted to look into music and how beats and rhythms could be represented through lines in addition to other elements that relate to music like audio samples and transients.
For my third 3×3 grid I wanted to explore symmetry and how I could represent this through a set of lines, similar to reflection I wanted to use grid systems to create a variety of layouts just using lines and then reflecting them to create symmetrical layouts that are a reflection of one another.
I have included my initial sketches below for you to visualise my ideas.
Final Designs
Paint The House – Plane
Sketches
In my experimentation with the use of planes, I wanted to look into creating five different planes using the principles of page layout techniques by crossing lines to create intersections. Similar to my exploration of lines to create different layouts, I took the same approach but used different tones to illustrate each individual plane.
For my first 3×3 grid I looked into using horizontal, vertical and diagonal lines to create different shaped planes. I was inspired by my research into the golden canon grid system to create different shapes.
For my second 3×3 grid I wanted to look into using simple mathematics to achieve five different planes within each design. I started by using a 160 by 160 pixel square and then dividing the height and width vale by 2 to get my next plane, I repeated this system until I had a total of five planes in each square.
for my third 3×3 grid I wanted to look into using the golden ratio to scale different planes within each design. I started by creating a 160 pixel square and then multiplying its height and width values by 0.618 to create my next square, I repeated this until I had a total of five planes. I then experimented with different layouts of each square and explored extending either the height or width of each square to create new and interesting layouts.
I have included my initial sketches below to visualise my ideas.
Final Designs
Lesson Summary
References & Sources
- Dabner, D., Stewart, S., Zempol, E. and Vickress, A., 2017. Graphic Design School. Thames & Hudson.
- bbadesign. 2021. Point, Line, Plane – The fundamental elements of design – bbadesign. Available at: https://bbadesign.jimdofree.com/design-foundations/unit-3-point-line-plane/.
- If the Moon Were Only 1 Pixel – A tediously accurate map of the solar system. 2021. If the Moon Were Only 1 Pixel – A tediously accurate map of the solar system. Available at: https://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html.
- Wikipedia. 2021. Piet Mondrian – Wikipedia. Available at: https://en.wikipedia.org/wiki/Piet_Mondrian.
- Tate. 2021. Piet Mondrian 1872–1944 | Tate. Available at: https://www.tate.org.uk/art/artists/piet-mondrian-1651.
- Wikipedia. 2021. De Stijl – Wikipedia. Available at: https://en.wikipedia.org/wiki/De_Stijl.