Blog

UX Design

How I Made A Clickable Prototype

Photoshop and Illustrator have always been my go-to tools since I started designing websites and apps. It went something like this: design with Adobe Creative Suite and hot-spot it in InVision. Test the prototype built in InVision on users.

The problem with this is that you can't experiment. With InVision for instance, you can't see how people play with creative interactions like the parallax effect.

I challenged myself to change this and empower myself to push the boundaries both for myself as a designer but for people who want to experience.

The Objective

I chose to prototype out the Twitter site with HTML and CSS. Wanted to see if this was possible by choosing a consumer-based website. Here I'll take you through my process.

Before and After

Current twitter.com UI My prototype built with HTML and CSS

What I Did

1. Downloaded ZURB Foundation

2. Did a quick and dirty sketch of Twitter.com

3. Started coding. (More like, played around with and totally destroyed the index.html file.) 

Challenges

This is my first time building a prototype with HTML and CSS. I ran into some road bumps along the way:

  • The top right has a 2-column drop down menu. Right now, what I have coded up is a one-column drop down menu. Not sure how to fix that yet.
  • Alignment of the two panels

Final Result

Up Next

Part 1 of this series on reconstructing the Twitter experience is prototyping with HTML and CSS. The goal of prototyping with code is to tell a story. (Mock-ups don't tell a story.) Build, iterate, play and refine with code.

I'll be using these Foundation to build, iterate, play and refine ideas.