Original GUI mock-up for the Designer Service (ug!)

(If you're not familiar with what I'm building, here is my elevator pitch. "A web service that will allow designers to upload their work (pieces) to a web page. The designer's clients will then be able to view, comment on, and approve the designer's work.")

Before we get started, I need to let everyone know that I know this original mock-up is bad. That's why I'm not using! :)

I want to share it with everyone because I will be putting up screen shots or a video of my current UI soon, and since this blog chronicles my journey I figured you should see the evolution of the UI!

Before I started coding the designer service (I will name it one day!) I created a mock-up of the main screen of the application. The goal for the main screen was to give the designers and clients a very simple page to review, edit, and approve each "piece" of a project. (A "piece" could be a logo, a page from a brochure, a screen shot of a web page, etc...) I didn't want anyone to have to jump from one view to another to get to any of the pieces so I created what you see below. (You should be able to click on it to view the full version.)


At first I liked the UI, and started building the application from this mock-up. Once I got the page working I really didn't like it. Other than it's poor aesthetics it just didn't work. The page would (obviously) get huge when you had a lot of pieces and it was very easy to lose your context when you were working with it. I was also very concerned that a client would think the large-sized images they were looking at were full size. Giving a distorted view of the designer's work.

I did take away a good thing from this prototype/build effort. (Other than getting my feet wet with Ruby on Rails.) Even though I ditched this UI the server-side logic was still usable for my next UI.

I decided to go with a thumbnail/big-view model as opposed to the single-page-for-everything style I used on the first pass.

After I ditched the above UI, I created a mockup of a thumbnail version.


It's still pretty terrible, but at least I got my thumbnail concept into something I could see. I then coded my app against this mock-up. I didn't like how cluttered and goofy this UI looked, but like I said, it got my concept into a format I could see.

I've settled on the thumbnail/big-view model for the application, and have made some dramatic changes to the UI. It's not as awesome as something like Fluxiom, but I think it's pretty sharp. I'll be posting a screen shot of the most recent UI soon. (Maybe even tonight!)