We gave it a name, figured out how it would work and built the prototype. Now we’re going to let you have a look at GoodDemo- at both the very rough proof of concept and the more polished mockup of what the real deal might end up looking like.
The Prototype
No matter how refined and polished a web application ends up looking, they all have modest beginnings. The prototype of GoodDemo isn’t really anything to look at but we wanted to show how apps evolve from the very first bare, unstyled interface created by a developer to a clean, functional product.
(Slight tangent: Apparently “unstyled” isn’t a real word, at least not according to the dictionaries I’ve checked. It’s certainly not uncommon to me and Google seems to agree with over two million hits. How does one go about submitting a new word?)
Below are two screenshots of the prototype. The first page (in the background) is just a list of demos so that we can easily get to them during the back and forth development process, as well as a link to the demo creator. The second page (in the foreground) shows a test demo of www.novologies.com- note the links at the bottom.
Here’s a closer look:
Even though the prototype doesn’t look like much (to say the least), there’s a lot going on under the hood. There are approximately 3,500 lines of code with 700 comments already between the libraries, the web services and the ASP.NET site. Rather than getting bogged down in making things look pretty, it’s much more efficient to keep things simple on the front-end while you’re building the back-end.
The Mockups
One of the (many!) interesting aspects of GoodDemo is how you can start creating a demo of any web application by simply clicking on a “bookmarklet.” Below is how it looks- just like any other bookmark that you saved in your browser.
The only difference is that unlike a bookmark that directs you to a site, a bookmarklet runs a small bit of code. And in our case, it adds the GoodDemo functionality to the current page and overlays the demo creator tools.
For this article, I’m going to skip over the creation of the demo. The mockups of the resulting demo are more interesting to look at because most people are going to be viewers rather than creators. There’s also another reason, I haven’t actually gone beyond the sketches in my pad (yes, that’s with pen and paper, not mouse and screen.) And I don’t plan to move them over to high-fidelity versions until we’ve firmed up how the final demo is going to look and work. Keep it simple and also work efficiently (so you’re not constantly reacting to all of the different moving parts.)
So below are a few screenshots of what a demo would look like of a web app (it happens to be of one of our favorite products, Scopings.) The first screenshot is what you would see at the beginning of the demo, an introduction with an intuitive control bar that serves as the guide and is fixed near the bottom of the page.
Here’s a closer look:
The introductory text is geared towards Scopings and would of course be customized for each demo. Sitting right below the text is the control bar, which has only a few functions that are obvious in what they do. When you click options, a box slides up (similar to the introduction box) and shows a bunch of neat functionality. I’ll leave what those options are for the next article since we’re still figuring them out ourselves (but hotspots and social features would make for good hints.)
Once you click to get started, the demo begins and walks you through the real application. It’s not a movie, nor a bunch of screenshots- it’s exactly what you would see if you were to sign in to your own account for Scopings.
This screenshot shows how a particular feature of Scopings is highlighted and explained. Any element on a page can be part of the demo and there can be explanations for the page in general, similar to a list of FAQ’s. The demo can continue from one page to the next and back.
GoodDemo is certainly on its way. We’re pretty confident that it will be a great (perhaps even best?) way to show off how a web app looks and works. And there’s plenty more in store so stay tuned!