Build Robust & Production Quality Applications: Precourse, From Ideas to Products

27 Nov 2014

The Process of Going from Ideas to Products

Prototype process for web applications

Step 1. You have an idea

Step 2. Build wireframes

• balsamiq mockups
• moqups.com

Purpose:

1. Communication: not for design but merely for commuincation (to yourself, designers, devs, and the client)
2. Workflow
3. Scoping

Points for wireframing:

1. Don't over design, this is to quickly put together a concept
2. When you wireframe - you want to do several versions and iterate from there. This will free your from the attachment to your idea.

Step 3. Design

Provides: Layout *Colors *Typogaphy *Look & Feel *Tools: Typically Photoshop, producing a .psd file

Step 4. Slicing

Taking the .psd file and turning it into mockups. At this point, you want your .psds to as pixel perfect as possible because this is where we turn the psd into html/css

Step 5. Development

The advantage of this process is that it isolates the each step into layers, allowing you to explore many alternatives at each step.