Summary
This is a project I completed during my time as a student at RED Academy. The objective was to create an optimized landing page to showcase a typeface. I decided to explore the typeface ‘Oswald.’
Oswald is a typeface created by Vernon Adams, first said to be a revised take on the gothic & grosteque style used during the late 19th & early 20th century.
Popular font pairings includes Open Sans, Roboto, Lato, Montserrat, and Raleway.
When I encountered the typeface ‘Oswald’ for the first time, I noticed how bold, strong, and defined it was — no matter the weight type.
This led me to imagine words towering over city skylines, creating an impact on scale and commanding attention from the audience.
Inception & Moodboard
With that idea in mind, I set out to display the typeface using vibrant cities as a backdrop. I used the following key parameters to kickstart this project:
Why
- To display Oswald typeface in modern cities to test its versatility
Mood
- Bold
- Electric
- Energetic
Visual Language
- Colour — Yellow, red, pink, blue & teal
- Movement — Scrolling, image & text sequence
- Shape — Rectangles & blocks
- Space —White negative space
I proceeded to look for inspiration by compiling images into a mood board. Using the mood board, I was able to extract colours from images of cities to create the palette of colours that would make up the theme of my landing page. The pieces were falling into place and the general theme of the landing page was established.
Landing Page design: Neon World
I decided to use cities with plenty of colours, looking at the fast-paced mega cities that burst with energy and excitement. This led me to Hong Kong; a city meshed with modern and old with neon signs peppered all over the city streets.
And then there’s Singapore; a clean and modern country famously known as the Garden City for its lush greenery and its focus on being eco-friendly.
I wanted to make the text and image the focus of the landing page, but there needed to be a balance so they could compliment each other rather than fight for attention. Therefore, I had the idea of fashioning the landing page after the style of a magazine.
The landing page had plenty of white negative space, words were displayed in their different weights, and images were positioned neatly in blocks.
Challenges
Throughout this project I had issues with finding the right colour scheme to match the text headings. Headings like ‘Neon’ and ‘Garden City’ should have colours that reflect the words accordingly, but I had to work within boundaries. For example, I wanted ‘Garden City’ to be green, but green didn’t fit with my colour palette. What I should do in the future is refer back to my colour palette more often to help me find complimentary colours that harmonize the overall theme.
Another issue I had was developing a good method to merge imagery and the Oswald typeface together. To solve this problem I made use of the clipping mask in Photoshop to blend the text and images together.
Reflection & Learning points
From this project, I learned plenty on the importance of typefaces, typesettings, and how it can be paired with other fonts. I also gained an appreciation for how typefaces and colours can be used to impact your content in powerful ways.
