VERLAG, the affable Modernist

A case study on landing pages, typography, and learning the creative process.

1. Project Goals

My first project at RED Academy was to create a well structured and designed web desktop landing page that is optimized for conversion and showcases a typeface which was randomly drawn out from a set of typefaces that were pre-selected by the instructors.

2. Tools

Sketch pad, Adobe Photoshop (and maybe Invision)

3. Typeface research

Verlag is a geometric sans-serif typeface designed by Jonathan Hoefler. In 1996, when designing the Guggenheim magazine, Abbott Miller (of Pentagram) approached Jonathan Hoefler (of Hoefler & Frere-Jones) to create a custom typeface for the publication. Hoefler referenced Wright’s iconic lettering and designed the custom typeface in various weights and italic and bold versions for exclusive use in the magazine.

Originally envisioned as a riff on the Guggenheim’s iconic Art Deco lettering, Verlag developed into its own family of versatile typefaces in order to suit the needs of a modern identity program. It comes in three widhts: a regular width for text, a condensed for close quarters, and a compressed for headlines. All fifteen romans have matching italics. The typeface reconciles the modernity of “lining figures” with the font’s small x-height by offering two sets of numbers, with matching punctuation. Verlag features our Latin-X™ character set, covering more than 140 languages throughout the world — including all of Central Europe.

4. Understanding what is a Landing page

I really didn’t know what is a landing page. It really was everything absolutely new for me.

Landing page is basically a standalone web page distinct from your
main website that has been designed for a single focused objective. There are 2 types of landing page: Click Through & Lead Generation.

After a nice instruction of landing page, I figured out that I should build my landing page showing my typeface with idea to sell it.

My landing page’s type was Click Through.

5. Design Inception

This step is an extremely important part of the process because it represents kind of the birth of everything that I would work on.

It was not difficult to capture the idea but when I started trying to put everything in practice, it was not easy because is necessary to go deep to find the why of the why of the why of the why… Once you have strong answers, the process became better because the mood and the visual language are consequences. I’m not saying that is easy because one mistake at this part can destroy everything, but is really better.

Anyway… inspiration and ideas are not easy but once is everything beautifully planed, is much better to continue walking on the project.

My inspiration: As Verlag being a geometric and modern typeface, it brings me a context, a feeling, an inspiration of modernity and sophistication. The mood would be elegant, organized, stylish, lined up, refined, modern and sophisticated. Inside the visual language, I was thinking to use geometric and modern wooden elements, rectangles black and white (or something very clear pretty close to white). The movement should up to down and very organized.

6. Mood Board

At this step of the process I was feeling really inspired to what I wanted and the more I searched, more I was feeling better and organizing same ideas. I was collecting images to my mood board during all the process. This step really gives inspiration and help a lot to adjust and connect some ideas.

As far I was going with my mood board, I was strongly related with my idea (inspiration) of geometric modern wooden elements.

7. Sketching

I’ve learned that this part of the process was to make my idea more clear drawing everything before going to the fearsome and awaited Photoshop. I had a beginning of my ideas on my sketch but I didn’t finish everything on a paper before using Photoshop. I was kind of using booth but trying more Photoshop especially because I was learning and discovering everything.

7. Photoshop

Oh my God! This is a beautiful and powerful software. For long time I desired to start using it but always without really do something about it. Once I started watching tutorials and practicing, it became better and I’m sure I’m getting better on it.

I had my first file, it was not ugly but I couldn’t connect the ideas and because of that I decided to initiate a new file.

8. My Landing Page

After a lot of intensive work in the last 3 days, I did finish my landing page and it looks unique.

InVision Link: Click here

9. Conclusion

It was challenging and I had a lot of fun. It is just the beginning of a very beautiful way and I’ll surely get there.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.