VAG Rounded: A Friendly Font
Part Two of Creating a Typographical Specimen Landing Page
Brief
You can find the first part with my research and the history of VAG Rounded here.
Task
Create a well structured and designed web desktop landing page that is optimized for conversion and showcases the typeface, VAG Rounded.
The Process
Whenever I start a project, I am faced with the blank page. It feels like I have to reinvent the wheel or create something from completely nothing. Starting is always the hardest part, but I followed a new process for this project. In the end, it really helped to have designed steps to take me all the way to the finished high-fidelity prototype.
Creating the Style Guide
I began my design process by looking at the why of the project. Looking at my font and why (purpose) helped me come up with the overall mood of the finished product.
Using these adjectives, I began my Google scavenger hunt. I typed in these key words and grabbed a variety of pictures. I placed them in a collage to organize them, then used Adobe Color to automatically create a colour palette for me.
Just to test out the colour scheme, I threw together a quick design based on the palette and research I did on the 70’s aesthetic which included multicoloured lines and geometric shapes.
I found the colours way too bright and decided to tone them down. I think the tricoloured stripe stiffened it all up as well. It reflected what I saw as a simple geometric representation of the 70’s aesthetic, but it just contrasted the font too much.
The palette still kept its friendliness but with a more vintage vibe now. It also reflected the moods I listed and I was pretty happy with the overall outcome.
The Part Where I Went Off Track
Instead of finishing up my notes, I jumped ahead to making a mood board. I was a little too eager.
That night I woke up at 3am with a spark of inspiration. I whipped out my dry-erase notebook and went to town.
My plan was to make a horizontal landing page that the user could click through. Each screen section would tell a new story. I was still hung up on having a tricoloured ribbon in my design. There would be interactive bits and it would all be really artistic and nice…
…that is until I made a quick design for the hero page:
I did not like this design. The ribbon was too stiff and it didn’t suit the font. It was all imbalanced and I couldn’t see this working out with this style. There was no use pursuing this rigid style. I had to let go of my obsession with those stripes!
Getting Back On Track
I took a few steps back and decided to finish my notes. I used my mood board, the vintage colour palette, and the knowledge of what didn’t work.
Using these finished notes as a guide, I went off to create a style guide. I researched websites I liked and made some sketches of widgets and buttons. It look a few tries, but in the end I came up with this:
Creating the Wireframe
I did a bit of research, looking through landing pages that I liked and read case studies UX designers published.
“About 74% of the time [users viewed the landing page] was spent in the top two screenfuls of content (the information above the fold plus the screenful immediately below the fold). The remaining 26% was spent in small increments further down the length of the page.” Source: NNGroup
Two very important parts of my landing page are: the characters and being able to test them out and what products the typeface may be used for. These two features needed to come first in my landing page, and the rest can follow.
I started sketching wireframes.
~Voila~
I no longer felt like I was creating something from nothing. I had references to look at, a whole plan, and the tools to make it happen. I took some artistic liberties from my own design and fiddled around a bit. The whole process from the research to the high-fi prototype took about 32 hours.
Personal Reflection
I am really happy with the end product. It’s nothing like how I first imagined, and that’s a good thing. I had to test out a bunch of bad ideas before I came across good one. If I hadn’t been stubborn and let go of some initial ideas I had (like having those dang stripes), then I could have cut a huge chunk of time out of a 32 hour long project. Note to self: don’t be afraid to scrap what you have a try something from a different angle.
This was my first project at RED Academy. I can’t wait to see how much I improve by the time I graduate.
You can find the first part with my research and the history of VAG Rounded here.
