Please note: If you used the first beta, delete the old scripts folder ~/Library/Application Support/com.antetype.Antetype-BETA/Scripts

New Interaction Inspector

This beta gives a first preview of the new interactions inspector. Actions are now much more flexible and new events were added.

New Events

For one element, multiple events can be defined. In addition to the known events, new ones have been added:

Load and Unload Screen

Right Mouse-Click

Key Press

Stop Propagation: This is not really an event. If this option is defined for one element, underlying elements will no longer receive events. Imagine you want to show a pop-up dialog with light box and you don’t want the elements below to fire actions on mouse events. Now, this is possible.

Repeat: Also not an event, but the name says it all. You can start and stop repetition via a new corresponding action. Things like slide shows or progress bars can now be easily realized.

Action Sets

Within one event, you can call multiple action sets. An action set consists of one or more cells that will be affected by one or more actions, triggered by the event.

Within one action set, you can also refer to other elements, like siblings, children or parents. Action sets will reduce the number of actions dramatically.

This example shows that you now only need a few actions to create an interactive tabbed pane by making use of the new action sets.

New Actions

Change Property: Some properties can now be changed via an action, reducing the need to add a too many states. Currently, this is limited to numeric values, but we plan to extend this to all properties. As with states, property changes can also be animated.

Start/Stop Repeat: If Repeat is defined for an element. You can start and stop repetition via this action.

Copy Actions: Finally, you can copy and paste actions to other elements.

Plugins

Great news: you no longer need to learn F-Script! Antetype now supports scripting via JavaScript. In addition to single script files, a plugin can be a bundle of multiple scripts and resources like e.g. images. As an example we added a content generation plugin. The plugin searches for cell names (e.g. FIRSTNAME) and fills in text and images stored in the plugin. All you have to take care of is to name the cells correctly.

Go, check it out and build your own. (To view the contents of the bundle file, right-click the file and choose “Show Package Contents”).

Like previously, plugins are located in your Application Support folder. You can open this folder via the Plugins menu. New scripts have to be copied here and can then be executed from the menu.

As already mentioned above, you can also call scripts via actions in presentation mode. You can do all kinds of things with that. In our example we replace an Antetype widget with a native Cocoa entry field an thus can edit text in presentation mode.

In another example we embed a web view and load an URL.

Scrolling

You can now turn on scrolling for any cell in in-place presentation mode. Currently, no scrollbars are shown, but trackpads and scroll wheels are supported.

Known Issues

New features currently only work in in-place presentation mode.

Web Viewer is not supported.

Some rendering problems of Beta 1 are still present in in-place presentation mode.

Animations might not work with some styling options applied.

If scrolling is turned on, it might cause problems with some styling options applied.

“Ogres are like onions – they stink? Nooo, they have layers…”

This shortened citation from the first Shrek movie gives you an indication on why we didn’t release a lot of updates recently as you have been used to before.

And no, it wasn’t because we watched the Shrek trilogy over and over again ;)

For our big update for version 2.0 introducing UI Animations, we wanted to take the opportunity to make Antetype more future proof. The main thing has been so far, to completely re-write our drawing algorithms for objects in Antetype – a change, that will hopefully not be visible at all ;)

This has however a couple of advantages for us, especially regarding the performance of re-drawing elements when we animate properties of a cell or change dimensions of a screen. This will also enable us in the future to have some more cool options with our objects (e.g. blur effects on cell level and many more to come).

User Interface Animations

Our cool new feature for version 2.0 will be UI Animations and a rework of the interactions within Antetype – within this beta version, you’ll find a first glimpse of the possibilities you can do with it.

Within this first beta version, you can basically define for every state change of a widget, how this change can be animated. For example, let’s imagine you have a drawer menu in a mobile app and you want it to slide from left to right when opening it. This is how you can achieve this in the new beta version of Antetype:

Setting the States

In our example file, the drawer menu has two states – ‘Collapsed’ and ‘Normal’. In collapsed mode, the widget uses the width property of zero pixel and in the normal mode, it uses the width of 279 pixels (Please note: try to use the size property set to zero instead of the collapsed property as this might not give you an expected result within the beta version).

If you need more information on how to build a drawer menu in Antetype, please refer to the following tutorial:

Define the Animation

As soon as the states for a widget are defined, you can switch to the interaction tab to define whether and how this state change should be animated.

Here you will find the states listed for the widget and you can enable or disable them via the checkbox in the front and the following elements allow you to define the type and duration of the animation.

Set the interaction triggering the state change

What is missing for our drawer menu to be animated now, is to set an interaction to any object on the screen to trigger the state change of our drawer menu widget. I our case, we want to place the trigger on the little ‘burger’ icon in the top left part of the main screen.

And that’s it because Antetype does the rest for you. It now creates a tween animation between the two different states you created within the steps above. To check out the animation, just go to the in-place presentation mode and click on the little ‘burger’ icon.

Example file

The above example is only a little excerpt from our little example file. We’ve added the file to our Antetype Community Cotype so that you can give the file a try and see how we created the animations within the file. Opening the file in the In-Place Presentation Mode should give you an overview of the possible things you can do.

Known limitations for the beta version

Within this beta version, there are a couple of limitations for using the animations. Find them listed here:

Not available in fullscreen presentation mode, iOS or web viewer yet

There is a slight colour discrepancy when switching into in-place presentation mode when a calibrated second monitor is connected.

smaller animation errors regarding borders

If you use the “Direct” cursor in the In-Place Presentation mode to edit your file, all changes to objects will be animated as well and they might behave a bit quirky

… and as for every beta version, there might be more ;)

We are really looking forward to your feedback on our animations! Please do get in contact if you have questions via support@antetype.com

Since the beginning of Antetype we had a scripting-language embedded, which was mainly used for developing or help out with actions which did not get a real UI so far. In 1.7 we made the decision to make this functionality available. To use it, you have to first enable the Develop-Menu in the Preferences:

First of all: sorry for the messiness of the menu, blame it on me :) Just a quick overview about the various items:

F-Script contains a simple UI to write own scripts using F-Script. A later blog-post will explain it in more detail. If you can’t wait just contact me or post in our forums.

Export HTML/CSS Prototype exports the project as a pure HTML/CSS-prototype. Unlike the Web Viewer, which renders the screen in JavaScript in a canvas-tag, this one builds real HTML which might be reused. This is not finished, just try it on your documents.

Colorvision contains some script which simulate various forms of color blindness.

Elwoods HTML Export this script was idea from Elwood (hence the name). Yet another way to export an Antetype project for the web. It exports one image per screen and generates an image map for “Goto Screen-Actions”.

Force Update Widget the selected widget instance is updated with the changes, all others are reverted. All others will look the same (apart from individual properties/content)

Open Scripts Folder just opens the folder containing the scripts in the Finder

Replace Colors allows to replace color values. For now a very crude UI, you have to use CSS-hex-colors

Replace Font Family allows you to replace font families. (Currently works only for plain text)

Replace Text a simple way to replace text (case sensitive)

Screen Statistics display some statistics about the current screen

Used Colors opens a page in the browser with all used colors in the Antetype document

Quiet a long list, hopefully I did not miss one. We will continue to expand this more. We created a github repository: https://github.com/Antetype/Scripts which will get updates over time. If you have ideas for scripts, don’t hesitate to contact us. We will try to add them.

we are happy to announce Antetype 1.7. The update is available today. The App Store-version has to wait a few days until Apple approves it.

The main focus of this release is the improved exchange of prototypes with other people, who not necessarily use a mac (and could use our Antetype Viewer). We addressed the main difficulties with our existing web viewer:

Performance

The web viewer always supported the same layout/interactive features of the main application, but due to a lack of performance it was not always possible to for example show the layout changes while the window size changes. The performance is greatly improved in this versi0n.

Support for Web fonts

Antetype now converts all used fonts into a format usable in the web browser. If a font can not converted automatically, the user can supply his own web-font or use an CSS-fallback:

Usable without a web server

No need to upload the web viewer on a web server. It is now runnable locally on Chrome, Safari and Internet Explorer.

Apart from the improved web viewer this release includes a bunch of other fixes and enhancements. See the announcement for the whole list of changes.

The focus of the development of Antetype 1.6.2 has been improving the compatibility of Antetype with OS X 10.10 (Yosemite). The changes required were mostly visual updates as can be seen in the list below.

This release is not a simultaneous release for the standalone version and the app store version, so those who have purchased from the App Store will have to wait (an additional 10 days maybe?) while Apple approves this version.

New icons

The biggest change in this release are the new icons in the toolbar and the Screen Inspector.

New Toolbar:

New Screen Inspector and status bar icons:

Consistently Green

Since the introduction of the Style Bar in Antetype 1.3, there have been two colors associated with the update / revert indicators. In the Style bar the color was green but in the Style Inspector the color was red when there was a changed property.

In version 1.6.2 of Antetype we have updated the Style Inspector so that all changed properties are now show with green dots.

This also applies to hierarchy changes in the Screen Inspector:

Shared / Individual Indicator

Antetype 1.6.2 has also introduced a new indicator to the Style Inspector.

At a glance it is now possible to see if a property is shared or individual for a widget. Individual properties are no longer shown as circle outline, but as a filled circle.

Bug fixes

Many big fixes and crashes have been addressed in this release – please review the release notes for more details.

Documentation update

Over the next week we will update the online documentation so that the images reflect the new icons.

Release notes

You can find the full release notes for Antetype 1.6.2 on our support site

Experimenting with design choices is highly desirable in the design process. As a design evolves via multiple design iterations and as fidelity increases the time it takes to experiment and try out different design ideas also increases. This is not the case for designers that use Antetype.

Several features of Antetype such as Smart Dragging, Automatic Layout and Widgets all enable designers to experiment with different ideas for a design without having to do lots of work.

Smart Dragging provides immediate feedback as the designer makes changes by immediately updating the design while objects are dragged around the design.

Smart Dragging is only possible because of the advanced Automatic Layout system in Antetype. If you would like to read more about how Antetype reduces the time spent working on tedious jobs please read “The end of Nudging” to find out more about Automatic Layout.

Widgets also allow designers to experiment and immediately see how changes impact an entire screen.

Widgets are a key feature of Antetype, enabling reusability and consistency with little effort. If you would to read more about widgets in Antetype please read “Consistency, Consiztency, Consitency…”.

Having the freedom to rapidly experiment and “play” with a design encourages a designer to quickly and more deeply understand the various options that are available. Antetype enables faster iterations and more experimentation because it is designed from the ground up to be a unique UI design tool build specially for UI designers.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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”.

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.

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.

Nothing is more frustrating than the process of making sure everything is correctly aligned within a screen design. OK, there is something more frustrating: Having to change a screen that you have only just perfectly aligned and then having to re-align everything to fit around the change.

With Antetype these frustrations do not exist.

Antetype has an advanced automatic layout system that re-calculates the layout of the elements in a design immediately or even “on-the-fly”. When adding, removing or rearranging items the design flows around the changes making or removing space as required.

N.B. Click on the image to see the animation at the correct scale.

To utilise Automatic Layout designers just need to include some rules within their designs about how elements should behave when a layout is calculated. These rules are simple but when combined together enable Antetype to make complex layout decisions without requiring any input from the designer.

Antetype’s layout rules mostly rely on the chosen hierarchy of each screen, but also use properties from each element in the hierarchy.

Read on to find out more about how Antetype can end nudging for you – while you are reading why not start a download of our free 30 day trial in the background.

Hierarchy

A design built in Antetype is more than just shapes arranged in layers on a canvas. An Antetype document consists of a number of screens. Each screen then has a number of design elements arranged in a hierarchy which is similar to the HTML DOM.

Nesting the design elements in a hierarchy allows Antetype to infer the relationships between design elements, using this information when calculating layout changes.

In addition to an elements place in the hierarchy, the following properties are also used to automatically calculate layout changes.

Layout Direction

Element D horizontally lays out nested elements A, B & C.

Changing the layout mode of D to vertical results in a new layout of A, B & C.

Fixed size elements

A, B & C all have fixed sizes as the container D changes size.

Stretching elements

B is now set to stretch horizontally to into the space created as D increases in size.

Shrinking elements

When the text inside the element changes, then the size of the element adapts to the text. This applies to all content, such as nested elements, within a container.

Maximum sizes

B has a maximum width of 60px, when B no longer stretches

Minimum sizes

B now has a minimum width of 60px, when B no longer reduces in size

Margin

All elements have a margin set between them and other elements in the same container or from the sides of a container element (D in this case).In the images above A,B and C all have margins of 3px on each side.

Padding

All elements have a padding between their sides and any content (nested elements or text).In all the images above D has a padding of 17px.

Putting it all together

For the sake of simplicity the examples above focus on changes in the horizontal direction, but the same is possible vertically too. It is even possible (and typical) to combine different rules both horizontally and vertically in elements.

As containers are combined and different rules added, designs become more complex in how they respond to changes. In the animated example below many rules are being used to control how the design reacts to the changes as element K is resized.

Here is quick explanation of the layout rules used:

The main container (K) uses a vertical layout, within K there are 3 nested containers (D,G & J) all the nested containers stretch to the width of K.

Container D should be familiar from the above example with B stretching to fill space.

Container G is stretching vertically to fill the space created as K expands.

Elements E & F are stretching both horizontally and vertically.

Container J is no different from D except that it contains only a single element J

Re-arranging on-the-fly without nudging

Making changes to the layout of an Antetype design is easy because nothing has to be manually nudged as a result of the changes. This makes experimentation much quicker.

In this example all the elements in the screen automatically re-arrange as element C is dragged around the design. When C is eventually nested inside container J and next to H the design fully re-calculates the layout.

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