Research

Universal Declaration of Human Rights

The Universal Declaration of Human Rights, also known as the International Bill of Human Rights, is a historic document that states the basic rights and freedoms that any human being has. The declaration has helped many different people across the world over the years including women, children, people with disabilities and people from different cultures, society was primarily male dominated during the 1900’s and men were commonly seen as hard workers while the women stayed at home with the children. The universal declaration helped change people view on societal norms and gender labels by outlining everyone as being equal. This also created an emphasis on accessibility with disabled people and we gradually started to see ramps put in place to allow easy access for to public places for people with disabilities. The Universal Declaration of Human Rights was the first international agreement on human rights, having been signed by almost every country and continent across the world the document has been translated into over 360 different languages. The declaration helped pave the way for the human rights protection that we currently have in modern society and helped form the foundations of the European Convention on Human Rights and was incorporated into the Human Rights Act 1998.^[1]

 

Choosing An Article

After researching into what the universal declaration of human rights were I started to look into a few of the articles to see which one I would like to design my typographic poster for. On initial reading of the articles a few stuck out to me through either personal beliefs or through basic human morals that I stand by.

I decided to go with Article 1 of the Universal Declaration of Human Rights for my project as I am a firm believer in equal rights and everyone being treated fairly regardless of age, gender, race or nationality. I personally believe that everyone should be treated as humans and that there is no hierarchy between us all as a human race.

I have included some screenshots of these articles below to illustrate the start of my idea generation.

 

 

 

 

 

 

Josef Muller Brockman

Born in 1914, Josef Muller Brockmann is a well-known graphic designer from Switzerland and is considered one of the most influential figures in art and design today. In his early years he enrolled to the University of Zurich to study the history of art, design and architecture. After graduating and beginning his career as an apprentice Brockmann later decided to open his own studio in 1936 becoming a specialist of graphic design, exhibition design and photography. In his later years Josef Muller Brockmann started teaching his approach design making him one of the most iconic designer in history.

His passion for architecture made his approach to design very systematic and his main aim with design was functionality and objectivity, leading him to use numerous different organisational tools like grid systems to create his compositions as well as mathematical ratios to create spacing measurements. Josef’s approach to design created the foundational structure of modern visual communication design that we see today. Brockmann was extremely influential through his use of typography and he exclusively used sans-serif typefaces, most favourably Neo-Grotesque typefaces. Although he primarily focused on typography and the use of grid systems to create an organised structure to his work, photography was a common design medium he chose when creating his work.^[2]

I have included some of Josef Muller Brockmann’s work below to illustrate his design style and the characteristics behind his work.

 

 

 

 

Wim Crouwel

Wim Crouwel is a renowned graphic designer and typographer often recognised for his systematic approach to design, the use of grid systems to create organised layouts and the use of mathematical ratios to create sizing and space between elements. Born in The Netherlands in 1928, Willem Hendrik Crouwel was his original birth name after gaining the nickname Wim as he got older, from 1946 to 1949 Wim went on to study fine arts at the Academie Minerva in Groningen before later deciding to join the army and take up a new career path in abstract painting. In 1952 Wim moved to Amstered and went on to study typography at the Rietveld Academie where he found his passion for typography and words.

A year after he graduated his studies he went on to work as a freelance designer with an huge love for the new Swiss design and new wave of typography movement. His passion for typography and structured design led him to create a number of different typefaces throughout his design career like Gridnik and New Alphabet, which is a typeface created around a grid structure. Wim has also done work for the Dutch Post Office and the Stedelijk Museum and taught at several recognised universities and institutions like Delft Technical University and Eradmus University in Rotterdam.^[3]

The structured work of Wim Crouwel shares the same idioms and principles to the work of Josef Muller Brockmann and they both shared a love for the Swiss design movement, personally I’m a huge fan of the Swiss design period and the use of geometric shapes and sans-serif typography so this I definitely something I will being incorporating into my design.

I have included some of Wim Crouwel’s work below to demonstrate how he approached designing with typography and grid-based layouts.

 

 

 

 

Typographic Design Research

Before I start my idea generation and design process I want to look into some different styles of typographic design from a number of different art and design movements, the aim of this is to help me find creative inspiration by researching previous design styles similar to the project I have been given. I wanted to look into typography and typographic art in futurism, dadaism, Swiss design and post-modernism design to give me an idea on how these different design periods used typography.

 

Futurists

To start my research I started to look into futurism and the futuristic design movement to see how they used typography within their designs. While I was researching into different futurist designs that used typography I noticed that the designs were often very abstract with creative use of letterforms and typography, I also noticed that a lot of the designs used a very minimal colour palette with red being the popular primary colour.

I have included some of my favourite futurist typographic designs below.

 

 

 

 

Dadaists

I began looking into Dadaism and the Dadaist design movement to see how they used typography throughout their designs to see if I could draw some inspiration from their approach. When researching dadaism I came across a more modern style of design influenced by the dadaist movement that I really like the look of, I thought this would be a good way to represent the universal declaration of human rights in a modern way to portray how they had a role in changing how the world interacts with each other.

I have included some of my favourite dadaist typographic designs below.

 

 

 

Swiss Design

I continued my research into typographic designs and began looking into Swiss design and the New Wave era of typography. A common theme I came across when I was researching Swiss design and how they used typography was the use of modern sans-serif typefaces. I also noticed that a lot of the inspiration I looked at was often very modular in design and uniformly places to a grid or the grid was created from the letter forms, personally I really like this style of design as I a think it adds an element of modernism.

I have included a few of my favourite Swiss design typographic designs below to give you an idea on what influences and inspirations I have for my project.

 

 

 

 

Post-Modernism

Finally I started to look into post-modernism to see how they used typography throughout their designs, when I was looking into the post-modernist design movement and different design throughout that period I noticed a common use of photography and collage effects throughout the designs as well as big, bold typography, the use of textures to create a more urban, rugged feel and bright colour palettes.

I have included some of my favourite post-modernist design that focus on typography below.

 

 

 

 

Typography Research

After conducting research into various different design styles and influential graphic designers I wanted to go with the style of design that appealed to me most which was similar to the work of Josef Muller Brockmann and Wim Crouwel, I was inspired by the idea of using grid systems to create a layout for the content and using sans-serif typefaces. Similar to Josef Muller Brockmann I love the look of Neo-Grotesque Sans-Serif typefaces so I decided to look into a few typefaces that I could use for my project.

I wanted to use a typeface that would be suit the style of design I will be going for, as grid systems and commonly related to more modern periods of design like the Swiss Design movement a delicate serif typeface or decorative calligraphy typeface wouldn’t be the best choice.

I also want to explore pairing typefaces by using a sans-serif typeface as the main heading content as it would draw attention and then using a monospaced typeface for the body content to create more contrast in the information hierarchy. This is only an idea at the moment and is not something I am 100% dedicated to.

 

Typographic Content

Before researching into different typefaces to see what I could use in my project I wanted to consider what sort of information I could include into my design to give me a better idea on how it will be presented when it comes to testing the typefaces I have chosen. I wanted to create emphasis on the main elements of Artlice 1 in the Universal Declaration of Human Rights which states that we are all born free and equal, I want to make this the main focal point of my design and be the first typographic element that draws attention. I have included a list of content below to give you an idea on what I could include into my design.

• We are all born free and equal
• Article 01
• UDHR
• Universal Declaration of Human Rights
• United Nations
• They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.
• All human beings are born free and equal in dignity and rights.

 

Type Scale and Sizing

As the project brief stated that we must adhere to organisational approaches to our designs with either the 8-pixel grid system or the Fibonacci sequence, I wanted to explore the use of the golden ration within my typography to create a definitive visual hierarchy between the content being displayed on the screen. As the project requires the design to be made for screen I wanted to follow the design approach of many design systems used today like the Material Design System and Apple’s Human Interface design system by starting with my base text size at 16-pixels, this is the size my main body content will be displayed at.

I utilised the Figma plugin TypeScale to help me create the typographic scale for my project as it is a quick and easy to use, after setting my base value to 16-pixels I was able to create a number of different type sizes based on the golden ratio. I have included these typography sizes below.

• 6 pixels
• 10 pixels
• 16 pixels
• 26 pixels
• 42 pixels
• 68 pixels
• 110 pixels
• 177 pixels
• 287 pixels

 

Sans-Serif & Neo-Grotesque Typeface Research

After I created the content for my design and built a typography system I wanted to look into different typefaces I could use in my project, while I was researching Josef Muller Brockmann I learnt that he primarily used the typeface Akzidenz-Grotesk throughout his work. Helvetica was the first typeface to come to mind as it was a competitor to the Akzidenz-Grotesk typeface Josef Muller Brockmann exclusively used.

Taking my inspiration from my research into the Swiss design movement I wanted to use a typefaces that related to that design period,  I noticed that the majority of the design throughout that period used sans-serif or Neo-grotesque typefaces this led me to look into more typefaces that have the same characteristics.

I have included a few of my favourite sans-serif and neo-grotesque typefaces that I would be interested in using for my project, I chose these typefaces as they all share the same or similar characteristics to the typefaces used throughout the Swiss design movement.

• Helvetica
• Helvetica Neue
• Neue Haas Grotesk
• Montserrat
• Poppins
• Sofia Pro
• Niveau Grotesk

 

Typography Tests

I started to explore the different typefaces to see how they would look with the content I had created and visualise how the will be displayed at the sizes correlated to the typographic scale I will be using in my project. I have included some screenshots below to illustrate how each typeface would be displayed and what characteristics would best suit the style of design I am trying to achieve.

 

Helvetica – Helvetica is a neo-grotesque sans-serif typeface that was based on the typeface Akzidenz-Grotesk which was exclusively used by Josef Muller Brockmann, I decided to look into Helvetica as an optional typeface for my design as it holds the same characteristics as the typefaces used throughout the Swiss design movement. Personally I thought Helvetica was a nice sans-serif typeface and displayed my content well on screen but I felt like it had a more humanist feel and wasn’t as bold as I would like it to be to the design as opposed to a more geometric appearance.

 

 

Helvetica Neue – Helvetica Neue is a variation of the famous Helvetica typeface and shares most of the same characteristics. Personally I feel like Helvetica Neue has more influence from geometric shapes and had a tighter ascender line in comparison to the regular Helvetica typeface, this would be something I am looking to include into my design.

 

 

Neue Haas Grotesk – Neue Haas Grotesk is the original variant of the Helvetica typeface and shares a lot of the same characteristics at the Akzidenz-Grotesk typeface that Josef Muller Brockmann used in his typographic work. Personally I thought the Neue Haas Grotesk variant was a lot bolder and more geometric in appearance and a higher x-height making it a lot easier to read as opposed to the regular Helvetica typeface. This is a major candidate for my design as it is closely related to the history of Swiss design.

This will be the typeface I will use to display my typographic content.

 

 

Montserrat – Monserrat is possibly one of my favourite typefaces at the moment and I find myself using it as a starting point for the majority of design work I do. Personally I love the geometric characteristics of the typeface but I find the typeface to be a little too wide for the purpose I am using it for in this project, I think a tighter typeface would be beneficial as it will allow me to increase the size of the typography.

 

 

Poppins – Poppins is slowly becoming one of my favourite typefaces and is often my go-to when it comes to user-interface design, especially mobile design. I love how the typeface is centred around geometric shapes and still holds a bold appearance even at smaller sizes, personally I think this typeface would work well for the project but it doesn’t have as close of a relationship as the Helvetica typeface variants I previously looked into.

 

 

Sofia Pro – After looking on Adobe Fonts to find typefaces that would fit the style of design I’m trying to achieve, upon research of neo-grotesque sans-serif typefaces Sofia Pro was one that stood out to me as it shared the same qualities of the previous typefaces I looked into. Personally I like how the typeface is centred around geometric shapes but I feel like the typeface lacks in weight compared to the other typefaces I looked into.

 

 

Niveau Grotesk – Furthering my research into neo-grotesque sans-serif typefaces on Adobe Fonts I came across the typeface Niveau Grotesk. Personally I loved how the letter ‘W’ had a slight over hang making it appear more geometric and giving it some extra flavour compared to the other typefaces I looked into, in my opinion I think the typeface lacks weight and does not have much connection to the history of Swiss design compared to the Helvetica typeface variants.

 

---

Inspiration, Idea Generation & Sketching

 

Design Inspiration

After conducting research into different design styles and design periods throughout history as well as typographers like Josef Muller Brockmann and Wim Crouwel, I wanted to draw inspiration from there designs and how they approached design through the use of organisational tools like grid systems and mathematical ratios. I really liked the simplistic style of the Swiss design movement and the way they used typography in their designs, I am a huge fan of sans-serif typefaces and typefaces with geometric influences and characteristics so I wanted to implement these into my own design.

When looking for inspiration for my project I noticed that a lot of the designs that stood out to me incorporated a large title as the main focal point and had colour palette limitations or even just used generic black ad white colours throughout the design.

I have included some images below to illustrate the style of design I have in mind for my project.

 

 

 

 

 

 

Grid Design Inspiration

I wanted to explore the use of grid systems and organisational tool used in design to help inspire my design decisions for my project, I started looking at different grid systems I could potentially use in my project to help me create a well balanced and structured composition. The brief stated that we should either use the Fibonacci sequence or the 8-pixel grid system for our project so I decided to look into creating a grid system from the Fibonacci sequence as well as looking into other grid systems like basic column layouts, modular grid layouts and the golden canon grid which is a grid influenced by the construction of page design.

I started looking for design inspiration based around these grid system to help me draw inspiration and influence my design for this project, I have included a couple of examples below of designs that are based around grid systems to create a dynamic and structured layout.

 

 

 

Point, Line & Plane Inspiration

Before I started my idea generation I wanted to look into different creative was to use the point, line and plane principles of design and see how I could incorporate them into my own design. Other than using just basic lines to span above content similar to the works of the Swiss design movement I wanted to explore other ways of using point, line and plane to create a more dynamic design.

I have included some examples below of some inspiration for designing with the point, line and plane principles.

 

 

 

 

Sketching & Idea Generation

After conducting my research and re-reading the design brief I wanted to see if I was able to explore the idea of using the Fibonacci sequence within the layout as well as my type scale. I had the idea of using the Fibonacci scale on basic squares and aligning them diagonally across the page, in theory this would create a set of varied width columns in which I can place my content in.

Personally I like different elements of each design for their own reasons but I think my Initial Idea Sketch 06 is the best design based on what was being asked in the brief, previous research and based on composition.

I have included a few of my initial sketches below to illustrate my ideas and where I want to go with this project.

 

 

 

 

 

 

 

Fibonacci Sequence and Grid Ideas

I wanted to start generating some ideas using the scale of the Fibonacci sequence and basic squares based on the numbers of the Fibonacci sequence to see how they would look on screen. I personally like how the grid created a modular, asymmetrical layout which I think would work well in creating a modular design inspired by Josef Muller Brockmann,Wim Crouwel and the Swiss design movement.

I have included a few examples of the ideas I liked below.

 

 

 

 

---

Final Designs

For my final design I decided to explore the idea of using the fibonacci grid structure to create an interesting layout taking inspiration from the Swiss design movement. The design is heavily based around the Fibonacci sequence and the golden ratio, the typography is based on the golden ratio by using the type scale plugin in Figma, the grid structure is based off the Fibonacci sequence to create asymmetrical layout and planes based on the numbers from the Fibonacci sequence. I wanted to get creative with the main title of my design by separating “we are all born free and equal” into “we are all equal” and “born free and”, this was to draw attention to the words “we are all equal” as I personally feel like that is the main focus of Article 1 of the Universal Declaration of Human Rights.

I decided to leave the grid I had made earlier and drop the opacity to around 10% just to give some sort of visual struct to my design, I had to adjust the alignment of some of the elements to allow extra space between elements if they were places next to each other. When creating the spacing between the elements I was using the numbers from the Fibonacci sequence. Im not sure if I will leave this in the final design but I will see what others think in the group critique session.

My personal favourite is Final Design Idea 01 mainly because of the composition and placement of each element, this would be the design that I would choose to develop further.

 

 

 

 

 

 

 

 

---

Group Critique Session & Design Feedback

 

 

---

References & Sources

1. What is the Universal Declaration of Human Rights? | Equality and Human Rights Commission. 2021. What is the Universal Declaration of Human Rights? | Equality and Human Rights Commission. Available at: https://www.equalityhumanrights.com/en/what-are-human-rights/what-universal-declaration-human-rights.
2. Josef Muller-Brockmann. 2021. Josef Muller-Brockmann. Available at: https://williamipark.github.io/IXD102-Josef-Muller-Brockmann-Essay/index.html.
3. Famous Graphic Designers. 2021. Wim Crouwel | Biography, Designs and Facts. Available at: https://www.famousgraphicdesigners.org/wim-crouwel.