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