Gabriela's G

An introduction to coding.

This “iPad poster” was my first venture into web-based design, coding in HTML and CSS. It was the result of an assignment to showcase and analyze my favorite letterform, Gabriela's G. In essence, this poster was a rudimentary web app that introduced me to simple mechanisms such as scrolling text and slideshows. It also served as an exercise in typography and hierarchy.

Role Design and development
Date February 2017
MEDIA Web app
Tools DreamWeaver, Illustrator
Course VCD 3: Web Design

Initial sketches.

My design process began by creating 32 sketches. I was confined to the dimensions of an iPad screen and required to incorporate seven different elements: my favorite letterform, the typeface's name, the typeface designer's name, an alphabet sample, an informative paragraph, a button, and my name and photo.

Concept development.

I narrowed my sketches down to four compositions and translated them to the computer. I also experimented with a variety of color studies to influence my final solution.

Final solution.

My finished iPad poster utilized a two-column grid similar to one of my very first sketches. The color palette was an expanded three-color version of my earlier color study. The informative paragraph and alphabet sample were both interactive, scrolling sections. Finally, the user-friendly button to the lower left of my favorite letterform activated a slideshow mechanism, revealing my original design analysis of Gabriela's G.