VISUAL DESIGN, HTML/CSS Case Study

skills: visual design, css, html, client management

Tools: Adobe Illustrator/Photoshop, Sketch, InVision, Codepen

 

the challenge

I was assigned my colleague as my client with a brief to develop the visual design for her app TripTip's landing page to drive people to download the app, and then create a responsive site using HTML and CSS.

 

Proposed Solution

After consultation with the client, I proposed a simple, graphic landing page that very clearly displays the app's key features.

 

Research and Analysis

In addition to the brief we were given access to the original case study and clickable prototype developed by the client. In addition, I asked for any research materials or prep work used to prepare the initial designs. I was able to get her final presentation which included her design thinking and some of the early research, which was enough to get me started. 

To better understand what competitors' landing pages were showing, I sketched out the wire frames by hand. This forced me to look at every frame, every decision in close detail and decide which elements would work best for TripTip.

Sample wireframe sketches for potential designs

IMAG1056.jpg

I ultimately settled on elements with simple, bold sections and clear visuals to highlight the simplicity and design of the product’s key features.

Final wireframe layout

I wanted to mirror the client's clean, urban look that focused on youth and cool deciding that TripTip was “hip and intelligent, but never elite.”

Visual Analysis

To review our designs, we set up a group showcase where we reviewed one another’s work. We went around the room and marked our comments directly in the InVision prototype. I was left with 26 useful comments to incorporate into my design during the HTML and CSS build.

 

HTML and CSS

Once the design was approved by the client, I put my production and content creation background to use. I had designed my site with both my skill set and knowledge of programming in mind so my design elements were straight forward and mostly required looking up the issue, sharing notes with colleagues and trying it. The final product, while not exactly one to one with the initial visual design, was very close.

HTML + CSS = landing page

Even though my design was straightforward, I still found myself tweaking and simplifying to get a responsive website that closely matched my original designs. And, while going through this process, I found myself translating between design and development in order to ask the right questions or google the right keywords.

 

Reflection

While I quickly moved on to more sophisticated tools like Sketch and CodePen to finalize my designs, I still used pen and paper to quickly revise or tweak the design when moving from design to realization. Nothing beats the speed and ease of iteration with pen and paper, even when dealing with complex problems like HTML hierarchies within CSS.