Archive for the ‘User Interface Design’ Category

Ribbon Bar App Prototype Library, Template and Sample Released

Friday, February 11th, 2011

Now you can get a massive head start when designing applications based on the ribbon bar user interface paradigm that originated with Microsoft Office 2007.

Using the Ribbon Bar elements already in GUI Design Studio, our new design library, application template and prototype sample make it easier for you to get started quickly.

1. Ribbon Library

The Ribbon Library contains:

  • 15 common ribbon groups: Clipboard, Document Views, Editing, Font, Illustrations, Links, Pages, Page Setup, Paragraph, Sort, Styles, Symbols, Tables, Window and Zoom
  • 3 pre-configured ribbons that use the groups: Home, Insert and View
  • An application window, menu and quick access drop-down
  • Various grids for colour selectors and generic item selections
  • Other popups including a page size and symbol selector
     

Once you’ve added these to your design projects you can edit and expand them as necessary for your own application.

Ribbon Library Widgets
(more…)

iPhone Contacts Application Prototype Example

Friday, August 13th, 2010

iPhone Contact Info Prototype Screen DesignNow that we’ve posted an updated iPhone Library of GUI design widgets (v1.1), it was time to add a new example to the Gallery that makes use of it.

The iPhone Contacts application prototype example is based on the built-in Contacts application on the Apple iPhone. It was built entirely from elements within the library, very quickly.

Here are some of the key areas this example demonstrates:

  • The typical structure for an iPhone application prototype project in GUI Design Studio.
  • Putting together a Quick Concept flow of the application.
  • The basic elements needed to create the screens.
  • How a typical screen design is put together.
  • How to create a scrolling section on a screen.
  • Flipping between portrait and landscape oriented designs.

The project files can be downloaded from the example gallery page.

I hope this example will help you get your iPhone application prototypes off to a flying start!

Collaborative GUI Design Patterns Site Launched

Friday, March 26th, 2010

GUI Design Patterns SiteRight from the start, GUI Design Studio was built with the ability to link in libraries of common design components so that you can reuse them within different projects. This has been extended in version 4.0 with custom elements within libraries and the new templates feature.

This is also a really useful way of sharing your designs. If you work in a team, or in an organisation that creates multiple products, you can share complete designs, templates of multi-page design patterns or individual components. Not only does this help save lots of time, it also promotes consistency and best practice in your designs.

What’s been missing is an easy way for you to get access to design libraries and to share your own.

So we’ve just launched www.guidesignpatterns.com where you can download libraries, templates, samples and patterns, and make your own contributions to the community. So, even if you work on your own, you’ll be able to benefit from the work of others and to share your work with them.

Our aim for this site is to build up an extensive resource of common design patterns and elements to help you create your prototypes as quickly as possible.

(more…)

GUI Design Studio 4.0 Released With New Interaction and Templates

Tuesday, March 9th, 2010

New Version 4.0GUI Design Studio version 4.0 is now available and includes some fantastic new features in two editions, both with a 30-day trial.

The new features are grouped around interactivity and element and design sharing. They enable you to build more realistic and interactive prototypes and to share or reuse individual elements or whole design templates with ease.

New editions

GUI Design Studio is now available in two different editions.

GUI Design Studio Express provides the prototyping functionality that was in v3, but focussed on individuals without the need to share projects and generate specification documentation.

GUI Design Studio Professional builds on v3, adding new interactivity and design sharing features, and is better suited to those working on larger projects, in teams, or on multiple designs.

All projects created in one edition will run in the other, or in the free viewer, except that the enhanced interactivity features in the Professional edition (see below) are not available in the Express edition. You can compare the two editions here.

Prototypes get more interactive (Pro edition only)

As your user interface design develops, everyone involved starts to focus on the details of interactivity. What process does the user need to go through to achieve certain tasks, how many button presses, how much navigation, is it clear and obvious, can they make simple mistakes?

All of these questions, and more, need to be considered in developing and refining a good UI and they cannot be addressed easily in a simple mock-up.

GUI Design Studio v4 introduces a range of new features (more…)

Styling Calendar Controls
- Are 33 colour options enough or too many?

Thursday, February 4th, 2010

Version 3.6 of GUI Design Studio included a new element for creating Calendar controls.

When we started designing this feature, we looked around for examples of different calendars in desktop and web applications. We found a wide range of different designs; some with one month, some with 3 or 4, some highlighting “today”, others highlighting a particular day or a range of days. Of course, each application had quite a different visual design to its calendars as well.

In the past, we’ve tried to simplify elements and minimize the number of settings and options they have but, with this new element, we felt we had to provide for the increasing demand on design flexibility.

The problem, as all of you designers of great user interfaces will know, is that with flexibility comes complexity. We didn’t want to give you a tool which is hard to learn or slow to use because it has so many options and special cases, but we did want to give you a tool which will let you create the calendar design you need, quickly and simply.
(more…)