Case study: Typography [Breuer Condensed]

TASK/GOALS

Design a Landing page for Breuer Condensed Type.

TOOLS

Paper/Pencil, Photoshop, Keynote

BACKGROUND:

Breuer Condensed falls under the Breuer family and includes its siblings called Breuer Text and Breuer Headlines. It was designed by Silas Dilworth in 2008. The name was derived from Marcel Breuer who was an industrial designer. His portfolio includes IBM Laboratory in France and Whitney Museum of American Art. The type features 8 different styles and 4 different weights,all of which can be italicized. Breuer condensed is a geometric sans serif with relaxed curves that is suitable for moderate lenghts of body text.

THE PROCESS — DESIGN INCEPTION:

INCEPTION SHEET

The process starts with trying to find a “Why” for this specific typeface moving on to extracting the mood followed by defining the Visual language for this type.

1.1 DESIGN RESEARCH- Find the “Why”

Finding the why was the most difficult part in this project. I wanted the “Why” to represent an adjective that speaks of it and something that I can work my landing page around. I couldnt find a better match than “Trustworthiness” due to the geometrical sans and straight lines of the type.

1.2 FINDING THE MOOD

Finding the mood was rather an easy task as I exactly knew what the font represents to me. It gave me a sense of Boldness and Professionalism, It came of very strong and legitimate and finally it spoke of Trustworthiness.

1.3 VISUAL LANGUAGE

A: COLOR: Based on the mood, I wanted the colors to be simple yet professional. Blue is a perfect color for that paired with white. I also wanted to add a bit of grey as I wanted the page to be muted down and look serious and an accent color so I chose green as I wanted it to look welcoming.

C: MOVEMENT: I wanted the movement of the page to be channeled and not confusing to the eye.

D: SHAPE: For shapes I wanted to add a lot of boxes, as it interprets a sense of truthworthiness and some polygons to signify compounds and elements.

MOOD BOARD:

I wanted my mood board to be a true reflection of my Landing page. I chose alot of images of Laboratories showcasing the structure and behavior of the physical and natural world. The colors I chose were picked from the mood part of my inception sheet. Like I mentioned above I wanted it to look simple yet professional.

PROTOTYPE

WIRE-FRAMING

As soon as I got done with my Mood board I took out a Paper and Pencil and started sketching. It was hard at first to transfer my thoughts onto paper.

One of the definite things I wanted out of my Landing page was a true first impression it gives to the reader about the personality of the Type.

I didnt want the page to look too minimal nor too crowded. It took several attempts till I could find a perfect balance to utilize the space.

Another important thing was to select a good spot for the Call to Action button on the Landing page.

I also wanted to incorporate some geometrical shapes to speak for the Type

LANDING PAGE

RESULT

The final deliverable turned out pretty close to how I wanted it to be. I did want the first impression to showcase the personality defining trustworthiness so I used an image of Laboratory equipment behind the text.

I also wanted to give a bit of History about the text, the name of the designer and mention what the type is most suitable for e.g Instructional copy or safety warnings.

I also wanted to include the different weights it features that are Regular, Bold and Light and how it looks italicized in all those weights.

I mentioned in the inception sheet that I wanted to include polygons so it gives a feeling of compounds and elements. Furthermore I wanted to add faces as faces promote a sense of legitimacy and trustworthiness.

I also included different fonts in the same family i.e Breuer Headlines and Breuer Text.

Lastly I added 2 call to action buttons on my page highlighted in green to differentiate from the rest of the page.

SHORT COMINGS/CHALLENGES

The very first challenge for me was to figure out the “Why” for this specific typeface. It is easy to sell a product as you know who the target audience is. Whereas for a Typeface different people have different interpretations. So being mindful of that find a personality that suits the font was rather a challenging job for this project. My second challenge was to transfer my thoughts to paper and the prototype from paper to photoshop as it was my very first design experience using photoshop. Lastly, The time was a big constraint in this project as we were only given a little over a week for this project and having no design background, theres only so much you can self learn.

LEARNINGS:

The very first and the most important thing I learnt was to think outside the box. Like I mentioned above its easy to design for a product, not a typeface.Secondly I got a good hands on experience using photoshop and Lastly I realized that there are so many resources out there to learn from. So one should make full use of it.