VERLAG, the affable Modernist

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

1. Project Goals

My first project in the UI & Communication Design course 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

Like I said before, everything was so new to me. In one class, one angel taught me that the Design Inception is a extremely important step 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

Of course I did not know what a mood board was. Anyway… I liked this step of the process and I was feeling really inspired to what I wanted and the more I searched, more I was feeling better and organizing same ideas in my mind. 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! I was completely scared about this 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 but I surely need a lot of practice and improvement to really work on something in a comfortable way.

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 especially because of my lack of ability on Photoshop (the first days I was freaking out because I was too scared and living a big confusion with an inspiration’s emptiness as a consequence), I did finish my landing page. At 2:25 AM, my PNG file (landing page), my presentation was ready and my files organized for the presentation that would be between 9:20 AM to 12:00 PM.

https://projects.invisionapp.com/d/main#/console/11551283/243976772/previewa

9. Conclusion

Of course my landing page is not perfect. Is pretty far from that and it has a lot mistakes and improvements to be done but is not a bad beginning for a guy who really just had design in his mind without never put it in practice as a potential designer. My design was destined to personal ideas.

I still have a lot (I mean more than a lot) to learn and there are many concepts, lessons and ideas that I want to capture and really absorb to actually use and live these for the rest of my life.

I’m very hard with myself and maybe that disturbs me a lot. I have a lot of to improve as a designer and of course much more as a human being.

Renato Vieira

https://projects.invisionapp.com/d/main#/console/11551283/243976772/previewa

Show your support

Clapping shows how much you appreciated Renato Vieira’s story.