HTML + CSS + JS Prototyping

Project Overview
Carnegie Mellon University  |  Duration: 3 weeks  |  Project Type: Individual  
The project requirement was to code a simple task management application with HTML, CSS and JavaScript in order to ease non-programmers into the world of programming. This was my first ever programming project and was undertaken for the course 'Programming Usable Interfaces' at Carnegie Mellon University.

The Problem
I was not a programmer before this project. It is no secret that an efficient designer needs to know the constraints of the medium that would be used to build her grand interface and that she is able to code her own prototypes in order to communicate her ideas better with the programmers on her team.

The Solution
I dived deep into HTML, CSS and JS prototyping. The best way to learn something is by using it for something meaningful. I learnt these programming tools by building a mobile app interface with them. This made me realize that any design tool can be mastered to the extent needed, when needed.

My Role
Beginner Programmer

Purpose: To become an empowered Interaction Designer who can communicate effectively with programmers on the team thanks to a strong understanding of coding constructs and challenges.
Tools: Paper, Marker Pen, Balsamiq Mockups, Adobe Photoshop, Adobe Illustrator, InVision and TextMate

My Process
Paper Prototype  |  Wireframes  |  High-Fidelity PSD Mockups  |  InVision Prototype  |  Code  
During the first week, I kicked off the project with paper prototype iterations based on continuous user-testing. The final iteration was further refined using Balsamiq wireframes based on which high-fidelity mockups were created using Adobe Photoshop. Screenshots from the latter formed the basis of an interactive InVision prototype. Once that was done, I started coding with the help of Lynda and W3 Schools tutorials and Stack Overflow. Discussing best coding practices and problems faced with peers was a big part of the learning process.
Paper Prototype
A separate project has been dedicated to this paper prototype.
You can view all the shots of the paper prototype here.
Wireframes
High Fidelity Mockups
The screens were built in Adobe Photoshop. The icons were designed
using Adobe Illustrator.
Interactive InVision Prototype
Click anywhere on the screen to begin.
This prototype shows simple workflows of logging in, toggling between the personal and group task tabs, task deletion, task creation and accessing the hamburger menu to log out. Its purpose is to serve as a guide for writing code.

Actual Coded Prototype Screenshots
These are screenshots of my very first piece of programming as viewed in the Google Chrome browser, whose width has been narrowed to resemble a mobile screen. Since viewport dimensions have been used, the width of the header bar, tab bar and task bars get adjusted depending on the viewport width.
What's Next
Getting more familiar with JavaScript in order to be able to achieve the same workflow with fewer lines of code is a priority. Learning to use Bootstrap and CSS media queries to program responsive websites is the next step.

Conclusion

Being my first ever programming project, it was quite overwhelming at the very beginning. The fact that we had to code a functional prototype within two weeks after just a week of planning with absolutely no knowledge of HTML, CSS and JavaScript was the biggest challenge. This project, more than anything, taught me to teach myself just what I needed to know by gleaning useful snippets from sources such as W3 Schools and Stack Overflow.

You may also like

BotBarbello: The Ruby + Slack Chatbot
January, 2017
Geospatial Data Manager App
December, 2015
Leap: GPS Accuracy Enhancer App
August, 2014
AR Workforce Management App Scenarios
January, 2017
The Art of Breathing Life Into Paper
July, 2013
Live Mine Photo Capture App
July, 2015
Cube: Institutional Asset Management Portal
January, 2017
Field Service Supervisor App
June, 2014
IoT Scenarios for Business Jet Interiors
February, 2016
Power Paper Prototyping
September, 2016
Back to Top