Skip to content

GUI Design Studio Clones Microsoft Outlook?

Following last week’s launch of GUI Design Studio version 2.2, we’ve had quite a few questions about what it’s really capable of and maybe you’ve been wondering about that yourself.

We figured the best way to answer that was by way of an example prototype design. The trouble was, we didn’t have anything big enough or suitable enough in-house and we certainly can’t share any of our customers’ designs.

So we set ourselves a challenge. What could we put together quickly as a good example? Not a simple 5-screen demo, but a fully fledged application. It needed to have real-world appeal and be the type of application that’s familiar to as many of you as possible.

The answer was staring us in the face… Microsoft Outlook!

What would it take to create a design of that magnitude and how easy would it be to do? We wanted to find out so we gave a single designer just 3 days to create an example project from scratch using no other resources than a basic GUI Design Studio installation.

Rather than invent some hypothetical example along the same lines, we decided to create a Microsoft Outlook-alike design. That way, we could at least eliminate some of the creative thinking time :-) . It’s not a complete clone of course. We’ve taken the essense of the design, changed quite a few things and left a bunch of stuff out.

Here’s one of the screen designs… does it look at all familiar?

Horizons Application Mail Mode Design

 

You can see a short video walkthrough of the final result in the Gallery where you can download the project (and the free Viewer) for examination, and read the project notes.

3 days wasn’t quite enough time to complete the project but our designer managed to accomplish a great deal:

  • Horizons Application Contact Card Design5 application modes (mail, calendar, contacts, tasks, goals)
     
  • Multiple sub-modes within most modes
     
  • Task bars
     
  • Popup screens
     
  • Structured report (table) views with expanding and contracting groups of rows
     
  • Mode-dependent toolbars and menu overrides:

Horizons Application Calendar Menu Design

  • Extra icons, quickly created on-the-fly where necessary using the integrated Icon Express editor.
     
  • It also turned into a good example of project structure with independent sub-systems and component designs. These were worked on individually then assembled into the final prototype. The sub-sytems can be viewed and tested independently making the whole project much easier to manage.

 

Here’s what our designer had to say about the experience…

Horizons Application Calendar Panel Design“I was surprised at how much of the application design I managed to create in such a short period of time.

You can’t see it from the final video but the design was built up in stages, starting from an outline and gradually filling in the details. Initially, all the modes looked the same with just different title text and no content. Then, one by one, I worked on each mode and added features.

I love the ability to work in this way, making incremental changes to the design to flesh it out and being able to jump from one area to another to make tweaks.

At each stage, we looked at the design to see what needed further detail and clarification. During the process, many questions popped up like ‘what’s missing?’, ‘what’s this bit for?’, ‘how would we do such-and-such?’ and ‘does the flow work well?’.

I don’t know how long it would take for a developer to create a prototype to this level but, most of the time, it took me just a few minutes to duplicate screens and make changes.

I’m itching to get back on the project and expand on the bits I didn’t have time to complete!”

 

Competition for Fun

Just for fun, we have a competition for you. Within the prototype there’s a classic film cast list. If you can name the film, post your answer as a comment on this blog or email it to us. If anyone gets it right, we’ll announce the winner next week.

For extra brownie points, one of the cast members is not actually an actor. Who is it and what is their connection to the film?

 

Have your questions answered

Here’s the short video walkthrough link again.

If you have any questions about the example (anything at all), then post a comment here or email Support. And remember to post your answer to the “spot the film” competition!
 

{ 9 } Comments

  1. Kevin Murray | October 18, 2006 at 4:35 pm | Permalink

    The movie is “Harvey”, the screenwriter is Mary Chase.

  2. Ian Summers | October 18, 2006 at 4:43 pm | Permalink

    The movie is ‘Harvey’ from 1950.

  3. Ian Summers | October 18, 2006 at 4:47 pm | Permalink

    Mary Chase – wrote the play (and the screenplay).

  4. ravi pothuraju | October 19, 2006 at 7:21 am | Permalink

    Competition for Fun

    answer: Hero

  5. sujata | October 19, 2006 at 7:24 am | Permalink

    I want Vb.Net project Please send me please help me I am wainting for you please…

  6. Will | October 19, 2006 at 7:35 am | Permalink

    At a guess, I’d say “Harvey”. :-)
    And the non-actor actor is Harvey, after whom the film is named, who’s six feet three and a half inches, a rabbit, and invisible.

  7. Turtle | October 19, 2006 at 9:37 am | Permalink

    We’ve already had some responses to the film competition but we’ll hold off posting them to let more of you have a crack at the answers (we don’t want to spoil the fun).

    [Once we do, this comment will probably make no sense :-) ]

  8. Turtle | October 19, 2006 at 9:46 am | Permalink

    Sujata

    Please give us a better idea of what you would like us to do and we’ll be happy to help.

    Are you looking for VB.NET form or code generation?

    Do you want to see an example design that would suit a VB.NET application?

    There are endless possibilities so if you could give us a brief description of the sort of thing you want then we’ll see what we can do.

  9. genimerry | January 20, 2008 at 10:39 am | Permalink

    Hello!
    Nice site ;)
    Bye

{ 1 } Trackback

  1. [...] Whether you managed to answer the competition or not, I hope you managed to take a look at the Outlook-alike design example from the last post. If you just look at the video you’ll get some idea of what GUI Design Studio can do with your user interface designs. [...]