FF Scala, Old-style & Vintage
Introduction
For this project, I studied the typeface FF Scala and was to create a landing page optimized for conversion. The goal was to captivate our target audience, and I will be going through my creative process of doing so.
Research
Scala is an old style contemporary typeface that was created by Dutch typographer Martin Majoor in 1990. Majoor also later released a sans version of his scala typeface in 1992, which attracted major popularity. When Scala Sans was released, Scala became a font superfamily that is used in many instances, especially in fine printing and book design. Scala was originally designed for the Muziekcentrum Vredenburg, a music venue located in Utrecht, Netherlands and was named after the famous Teatro Alla Scala Opera house in Milan, Italy.
The Scala typeface is very timeless and is inspired by many older typefaces, especially those created by French typographer Pierre Simon Fournier during the 18th century. The inspiration for Scala came from humanist typefaces during this century such as Bembo and the italic style of Scala was inspired by 16th-century italic typefaces. FF Scala Sans is also quite humanist, which was rare to see during the time of creation, with a few exceptions.
Martin Majoor
Martin Majoor has been doing type design since the mid-1980s. He studied in Arnhem at the School of Fine Arts and during his studying, he had worked in Hamburg as a part of a student placement program. During his time in this program, he was able to work with Serre, which was the first digital type design system. He created his first ever digital font but it was not released.
In 1990, Majoor started working independently after his job at the Vredenburg music center (FF Scala was designed for this venue). He worked as a type and graphic designer and his fonts include FF Scala, FF Scala Sans, Telefont, FF Seria, and FF Nexus. He has won multiple awards for his book design and continues to work as a graphic and type designer in the Netherlands and Poland.
Scala in Use
MoA
The MoA (Museum of Art Seoul National University) acquired FF Scala for one of their permanent collections. This occurred in October of 2010 and was used for the Museum’s Design and Crafts collection.
Metro Los Angeles
Metro Los Angeles is a great real-world example of where Scala can be used. It is prominently used by Metro Los Angeles and is a typeface that is very easy to read and understand and can equally stand out. Having both a serif and sans serif versions allows it to be versatile and for use in any project.
Design Inception
The Why
Above is my design inception sheet for the project. Working from the inside out, it helped me to create the mood & direction of my project, and everything I wrote came back to the “why” in the middle.
The target market for this project are designers looking to add a classic twist to modern projects. The questions I had behind my project was “Why am I promoting this?” and “Why would designers buy this typeface?”. Another question that I kept in consideration was “Who would benefit from obtaining it?”. I put myself into the user’s shoes when determining my reasoning behind these questions.
After some thinking, the “why” behind my project became,
“To reintroduce a classic, timeless typeface with well-rooted history for use by all designers, but especially for journalism, blogging, writing, and modern design with a vintage twist.”
The why behind this project was influenced by the history of the typeface, especially how it was used for fine printing and book design. I wanted to stay true to the roots of the typeface but also have FF Scala appeal to modern day designers. With this in mind, my target audience for the project became designers who love a typeface with history and character, but also one that is compatible with modern design, whether it be web, graphic, or print design, to name a few.
The Mood
The mood that I was going for with my landing page was also very much influenced by the history of Scala. Since the typeface was used for fine printing and book design, I wanted the mood of my project to be vintage, yet modern and I found it quite difficult to initially implement this as they are somewhat contrasting ideas. This did cause a minor roadblock for me but during my research, I found that vintage colors are making a comeback as an inspiration for modern design so this aided my process.
The main keywords that influenced the mood of my landing page were “classic, timeless, and intriguing”. I wanted the user to have an immersive and interactive experience when landing on my page and to naturally flow throughout. I wanted to incorporate powerful visuals to add to the immersive aspect and angle the page at a bird’s eye view. The main goal was to have the user feel as if they were reading directly off of a book page to stay true to the roots of Scala and to be reminded of the main use of the typeface. I wanted the page to be simple, yet bold in terms of colors to add a modernized tone.
Visual Language
The visual language is comprised of 4 elements; Space, shape, color, and movement.
SPACE —
Asymmetrical, Spacious
SHAPE —
Strong, Old-style, Humanist, Smooth
COLOR —
Historic, Vintage, Neutral, Bold Accents (modernization)
MOVEMENT —
Immersive, Smooth, Flowing
The Visuals
For the visual components of my page, I created a mood board to inspire my final iteration of the page, and I created lo-fi and mid-fi wireframes to influence my final product as well. I ran into some roadblocks during the process, especially with my moodboards.
Moodboard
The first iteration (failed)
I found that the initial mood board I created had a vintage, and outdated feel due to muted colors and found that it did not properly suit my target audience. I had to find a way to add a modern twist, so through extensive research and drawing inspiration from modern-day print a graphics, I found that adding those bold colors would modernize my landing page.
The second iteration (it works!)
With that in mind, I created my final moodboard pictured below. It connects to the “why” of my project because it has vintage feel/aesthetic but bold and modern colors to appeal to my target audience; modern-day designers.
Wireframes
My initial wireframes were quite simple to put together because I spent an extensive amount of time on previous steps (this caused me some time management issues), but I ran into slight concerns with the layout of my page when creating my mid-fi prototype.
Lo-fi
My lo-fi wireframe acted as a basis for the rest of my wireframes. The process of creating my lo-fi wireframes was exceptionally helpful in the process and helped me to build my foundation before moving forward. I sketched out different possible layouts without spending too much time and then moved forward into creating the layout in photoshop (mid-fi). I implemented the asymmetry and spaciousness during this step of the process.
Mid-fi
During the creation of my mid-fi mockups, I organized my elements on photoshop from my lo-fi mockups with a few slight changes. I completed this part of the process in greyscale and did not implement colors until the hi-fi/final prototype. I got excited and attempted to add color initially, but I had to take a step back and clear the mind.
I had some previous attempts in creating this layout in photoshop and came to this final product for my mid-fi prototype.
Final Prototype
The final prototype I created can be viewed below. I added colors and accents to the project after my mid-fi mockup and ensured that it followed all aspects of my design inception sheet. Enjoy viewing and continue reading for my conclusion which includes considerations and important takeaways from the project!
Conclusion
This project had many highlights and really allowed me to explore my creativity. My teachers assisted me along the way and gave me great feedback on improving my design which I am very grateful for!
The biggest takeaways would include focusing more on time management and sticking with my designs. After looking at my design for a long time, I would tend to focus too much on smaller aspects which lost me time and took my focus away from the more important aspects and the bigger picture. I changed my idea many times as well which affected my time. I learned that I need to focus on time management for my future projects as well as keep a focus on quality over quantity.
I attempted to add many components to my landing page design and I could have been more efficient if focusing on a smaller amount of work within the time we had to complete it.
Overall, I learned a large amount during this project and what to focus on during my future projects. I had a lot of fun and it was out of my comfort zone which allowed me to learn and grow even further!
Thank you for taking the time to read my case study.
