Consistency, Consiztency, Consitency…

Consistency in a design / mockup / prototype is hard to maintain.

A design should be consistent in content across multiple areas of the same screen, across multiple screens and in some cases across different projects.

Ibex Relief, Church of Abba Afse, Yeha, Ethiopia by Alan, on Flickr - https://www.flickr.com/photos/adavey/3141483107

Design consistency relates to:

  • colors
  • fonts – family, variation and size
  • styles across elements (e.g. rounded corners, padding and margins)
  • re-usable elements all match (e.g. buttons, tabs, headers etc)
  • data – names, dates, headers, footers etc

The typical level of consistency sought by a designer takes a lot of work, a lot of reviews and lot of changes to maintain consistency in a design. As soon as there is a change request a review of consistency has to happen again.

Keeping a design consistent throughout the life-cycle is a real pain for designers who are not using Antetype. No other UI design or rapid prototyping software offers re-usable design components with custom sharing for the properties or the facility to compare different usages of re-usable components.

Using widgets to maintain consistency

This is not the only way to maintain consistency in Antetype, you can read about other methods in this article such as using Automatic Layout or OS X color lists or even Property Binding.

These features not only make Antetype unique but help the designer to easily maintain consistency across many screens and even documents using the widget library. No longer should a change request create fear for a UX designer.

The rest of this article outlines the details of how Antetype helps maintain consistency, while you read it why not download a 30 day trial of Antetype in the background so you try it yourself.

Using widgets for consistency

Antetype widgets are re-usable components that can be re-used within screens, documents or in many documents.

A widget can be created from any hierarchy of elements in Antetype and then re-used throughout a design. A common example of a widget would be a type of button that is repeatedly used. As a widget any changes to the button will be immediately reflected across all buttons on the screen.

You can learn more about Antetype widgets in the Getting Started Tutorial for Antetype or in the Tutorial 2 – Widgets.

6 versions of a widget each with individual text

Antetype highlights widget usage that is inconsistent with the master widget. Inconsistencies happen if a widget instance is modified but the changes are not applied to the master widget. If you select an inconsistent widget instance you will see two green and gray circular buttons on the style bar.

Using these buttons a designer can choose to update the master widget with the changes (and therefore all other instances) or to revert this instance to match the master widget.

6 versions of a widget top left has modified background

Pressing the green circular button on the style bar will result in the background changes being sent to each instance.

6 versions of a widget after update

Why has the background changed and not the text?

Not every instance of a widget needs to be the same though and with Antetype you can mark which style properties are unique to each instance and which are shared across all instances of a widget. As a default text defaults to always being unique to each instance of a widget, but background fill defaults to being shared across all instances of a widget. The sharing settings for each style property are unique for each widget.

If we use the Style Inspector to change the background style property to be individual, we can then modify all the backgrounds of the widgets.

Shared / Individual menu in the Style Inspector

6 versions of a widget all have modified background

If further changes are made to the master widget (e.g. rounded corners, shadow etc) the individual style properties (background color, text) are not overridden.

6 versions of a widget all modified

Widgets can also be configured for different states so that a single widget can be used for example to show different states of a button (mouse-over, pressed, selected etc). Using states of a widget enables consistent representation of a widget in these different states.

Using widgets to managing consistency of re-usable elements is simple and quick. Designers that build Antetype documents with widgets almost need not worry about consistency.

 Using the Widget Library for consistency

Similar to the way that widgets are re-used in a document, widgets can be re-used across documents via the Widget Library.

If a widget has been sent to the widget library then the master widget can be compared to the widget library version and the changes sent to the widget library. This process can be repeated across multiple documents first sending changes to the widget library and then taking the changes from the widget library into other documents.

Send Changes to Widget Library Menu Entry

Using Automatic Layout for consistency

The Automatic Layout system in Antetype (read more about Automatic Layout in the post “The End of Nudging”) is a great time saving feature, but it also helps maintain consistency.

Automatic Layout rules in action as a screen resizes

Using Automatic Layout a single design responds to changes in width, by flowing content, re-sizing content or showing and hiding content. Automatic Layout allows designers to use a single design to generate images of how a screen will appear for phones, tablets and desktop displays. The use of a single design means that it is simple to maintain consistency across screen sizes.

Automatic Layout rules in action as a screen resizes

When interactions are added to your Antetype design, then Automatic Layout provides more consistency. Imagine a screen that expands some information in response to a click, in Antetype when this happens the screen will flow around the additional section. This means that additional designs do not have to be created for each of the states of the screen. Using Automatic Layout encourages a single design for all screen states which in turn provides easy to manage consistency.

Interaction causes layout to expand

 Using OS X color lists for consistency

The Color Picker in Antetype provides quick access to Color Lists that have been created in the standard OS X Color Picker. This means that a single color list can be maintained across different OS X apps. You can find our more about this in the blog post “New Color Editor – Antetype 1.3”.

OS X Color List in Antetype Color Picker

This approach is only suitable for designs that are constrained by a single palette of colors at the start of the project because subsequent updates to an OS X color list will not result in changes to the Antetype document.

Using property binding for consistency

Property Binding in Antetype can also be used to help maintain consistency. This is not a solution we would recommend for all designs but in some circumstances it is being used for exactly this purpose.

If you are not already aware of Property Binding read more from our blog or the help pages.

Property Binding allows a designer to link the style properties of one element to another. For example this allows the background of one element to be linked to the background of another, or even the font of one element to be linked to another.

Some Antetype designers use Property Binding as a way to centrally control colors and fonts. This is done by creating a “style screen” that contains elements for each of the colors to be used in a design and a set of elements that define the fonts, styles and sizes to be used.

Style screen with a project color palette defined

The designer then uses Property Binding to manually link each element in a document to the elements in the “Style Screen”. This means that making a single change on the “Style Screen” will be reflected across an entire document.

It should be noted that Property Binding was not designed for such usage, and although it can work in this way, using it this way may produce unusual results.

N.B. There are also some restrictions to using Property Binding that make usage a little complicated.

The first problem is that widgets do not hold external references to property binding sources. This means that is it possible to use property binding within the hierarchy of a widget but not with an external reference to a “style screen”. To get around this restriction widgets can be duplicated using copy and paste or the duplicate action instead of being dragged from the widget inspector. Using Cut and Paste will maintain the external references for the widget.

The second problem is that Property Binding does not work across documents meaning that it is only a solution within a single document. It is possible to use Property Binding in combination with widgets that are shared across documents using a widget library but such a workflow is not for the faint hearted.

This post is part of a series of posts about how Antetype helps reduce the tedious work, read more about No More Pixel Pushing.

You can download a free 30 day trial of Antetype from our website.

Leave a Reply