GUI Design and Software Prototyping

The walkthrough video for the Internet Banking Web Application design is now available to view in the Gallery. This gives you a brief (2-minute) tour of the design and points out a few of the key features.

You can download the entire project (only 86 KB) to see how the whole design was put together. The project files can be opened in GUI Design Studio or the free Viewer that can be downloaded from the Gallery.

Most of our design examples so far have focussed on Desktop applications but GUI Design Studio is also highly suited to Web Application design.

From the many requests for a Web Application sample, and the dozens of different kinds of application requested, we’ve put together an Internet Banking example.

We chose Banking because it would be familiar to most people and we also had easy access to a few real examples to crib ideas from (not that we’re lazy - we just didn’t want to spend too much time re-inventing a good design).

This new sample demonstrates:

• how to link Web pages
   
• using masters for common sections like headers, footers and navigation menus
   
• overriding properties on masters for specific page differences such as highlighting the current page
   
• dynamic page content (on-page changes)
   
• mouse overs, including a popup window
   
• generated documentation
   

You can see this new design example in the Gallery where you can also download the project design files and view the generated PDF and HTML documentation.

The project files and distribution file (.gdd) will all open in version 2.4 of both the full GUI Design Studio application and also the free Viewer that you can download from any of the Gallery pages.

Be sure to give us your feedback and let us know what other design samples you’d like us to create (leave a comment here, send us an email or use the Web forms).

Thanks to those that took part in this little bit of fun, both on the blog and by email.

The correct answer to the film is of course “Harvey“, made in 1950 and starring James Stewart. It’s a wonderful film that you really must see!

The odd one out in the cast list was Mary Chase who wrote the original stage play and also the screenplay for the film (with Oscar Brodney).

And the winner is… Kevin Murray with an amazingly quick answer. Ian Summers was a very close runner up being pipped at the post by just a few minutes. Well done to both of you!

We’d like to think that such fast and accurate answers came from your encyclopedic knowledge of great films and nothing at all to do with the use of Internet search engines or online film databases ;-). Congratulations however you got there!

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.

If you download the distribution file (and Viewer) then you can also try out the application simulation, have a look at how the project was put together and maybe get some tips for your own design projects.

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?

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:

• 5 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:

• 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…

“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!