A Web Service from Sketch to Screenshot

Ever wondered how other developers create their web apps? I've scanned in sketches from the initial development of Voices.com

Seeing as I haven't discovered anywhere else on the web that actually reveals the designers' initial layouts and how their ideas evolved, I though these sketches might be of interest to new developers getting started.

Like with most good ideas, they start with a brainstorm. Stephanie, my partner, and I wrote some notes on a paper napkin. The napkin turned into an entire book where we wrote down all the features and functions that we thought would be important for our future customers.

Web 2.0 App Brainstorm on a Napkin

Next, I organized those thoughts into groups. I tried to limit the groups to around 5 or 6. To avoid feature creep, some of the features were put on the back burner or eliminated completely. The group headings turned into the tab titles. The result was 5 tabs across the top navigation bar, and an "Account & Settings" link, as well as a "Logout" link, located in the top right hand corner.

Features and Functions of our Web App

Before jumping into sketching multiple screens, I split one page into four areas, then photocopied the page about 20 times. This saved me from re-drawing the header and logo multiple times per page. Plus, I felt that each activity on the site should require no more than 4 steps.

Blank Design and Sketch Sheet

The core of our web application surrounded the personal websites of each member. Your website URL would be http://yourname.voices.com . I mapped out a basic page and the fields to be included in the Profile.

Since we would be hosting MP3 files, specifically voice-over demos, we needed a separate area to manage the uploading, downloading, editing and ordering of multimedia files. We call this the 'Studio'.

Uploading, downloading, editing and recording of multimedia files in the Studio

Finally, I put myself in the shoes of a client who was visiting the website to hire a professional to record a podcast commercial. He needed to search for an 'authentic' voice, without getting bogged down in advanced search fields.

Searching by keyword for voice talents at Voices.com

The search results page included the name of the voice talent, description, location, and MP3 demo that would be played using a Flash player. Once the client clicks on the voice talent's name, they can view their website. From there the client can send the talent an email. After the email has been sent, the client lands on a 'thank you' page which provides them with the option to either search again or access different parts of the service.

And here's the live layout of search results and the My Account area.