We are pleased to announce that Antetype is now available in the Mac App Store.
The version released in the App Store matches exactly the standard version of Antetype and going forward we will simultaneously release our standard and App Store versions at the same time.
This release has been in BETA for nearly two months and we feel it is ready for prime-time!
The first feature is that containers can now be configured so that their contents will wrap onto a new line when there is not enough space. This works in a way very similar to text wrapping.
The second feature enables designers to setup design breakpoints for their documents. This means that at certain widths the designer can trigger changes to happen to the design. The style changes are applied using special breakpoint states that can be enabled for each widget on the screen. This approach means that any style property can be changed at a particular width. We recommend watching the new tutorial on responsive designs
You can read more about the responsive features in the preview post from March.
Easier to Learn
Antetype 1.5 has updated tutorial files in the getting started section. Each tutorial is now accompanied by video, text and images to help you get up to speed with Antetype.
The tutorials released with Antetype 1.5 are:
As a by product of the changes we have made for responsive designs we have also included the ability to select multiple screens. This is useful not only to change the size of multiple screens but also to copy, paste and delete multiple screens.
As you can see in the release notes below we have also included many bug fixes in this release.
~/Library/Application Support/com.antetypedirectory – copy old licence, widget categories and shared library files into the new directory from
UPDATED: Antetype 1.5 has been released with all these features and more.
Antetype already includes layout features that allow elements to react to the size of the screen, but in Antetype 1.5
(sign up for beta access) we have added design breakpoints and content wrapping so that Antetype fully supports responsive designs.
Website and web app designs must work well on mobile phones, tablets and desktops. Websites are often built using responsive techniques so that the content adapts to the size of the screen / viewport. Responsive techniques have reduced the cost and complexity of developing and maintaining websites for multiple viewports.
Before the work to generate the responsive website code is started, multiple mockups must be created, one for each of the screens at different viewport widths.
Antetype already includes features to make elements respond to the size of other elements.
An element configured with horizontal layout will ensure that child elements are placed in a row and the alignment of the elements in the row specified.
[insert image of pop-up editor – screen-horizontal and screen-vertical]
Elements can dynamically calculate their dimensions based on the size of their contents or on the size of their parent element.
Using these options content in a design can respond to changes in the size of a screen but these changes are minimal and do not allow hiding of content or alterations of other properties.
When designing a screen it is useful to be able to easily see how the content will look at various widths and this is easily done in Antetype while designing and also while presenting.
Building on horizontal and vertical layouts in Anetype 1.5 we have added a new styling property so that child elements flow onto a new row / column as the width / height decreases.
When the new wrapping property is enabled, reducing the width of a parent element causes the child elements to flow on to a new row in the parent element and the height of the parent element increases.
Child elements can have a fixed size or use stretch / shrink sizing in combination with the minimum and maximum size values to control when they will flow to the next row.
An Antetype document now holds a set of user defined breakpoints, which can be viewed in status bar.
Selecting a breakpoint from the list changes the width of the screen to the value of the breakpoint. This enables quick switching between breakpoints while designing.
Once you have added some breakpoints to your document, the widgets in a document can be configured to have different appearance at different breakpoints.
This is achieved by adding a new state to a widget – if we have added a breakpoint called “mobile” then we get a new option on the add state menu to add a breakpoint called “mobile – Normal”.
Any properties can be changed for the new state: size, color, margins, padding, line heights, text etc. The sub components of a widget can be hidden, collapsed or shown and in turn all of their style properties can also be changed.
As you resize your document you will see that it automatically changes the widget from one state to another.
Using the new wrapping and breakpoint features in Antetype 1.5 speeds up the design process because designers can create and maintain a single design that will work across multiple viewport sizes. The way a screen will look at different sizes can be seen during design and a designer can pass the details of how they expect a design to behave along to a developer.
Designers can save even more time using Antetype 1.5 and are better able to communicate the intentions and vision of their designs to their clients and developers.
These functions are currently only available in the beta version of Antetype – please sign up for the beta to try them out.
A new version of the Antetype Color Picker has been released that fixes a crash when colours are selected that do not contain ColorSpace information. Version 1.4.1 can be downloaded at the bottom of this post.
Note on 32 bit support:
The Antetype Color Picker no longer works from 32 bit applications, for example Pages 09, Numbers 09 or Keynote 09, only the latest versions of these apps are 64 bit. If you rely on the Antetype Color Picker in these apps then we would suggest you remain with version 1.2.0.
You first need to download the zip file that contains the Color Picker.
To install the color picker, first extract the zip file.
Then copy the extracted
file to the folder:
N.B. To navigate to your Library folder hold down the option key when viewing the Go menu in Finder.
As ever please post any feedback.
Antetype 1.4.1 was released today it contains bug fixes and two minor enhancements, you can download the release from within the Antetype using “Check for Updates…” or you can download it fully from:
* AT-1928 Create / Edit Widget Group – Disable Save field unless at least one tag is present
* AT-1924 not possible to search for multiple tags – use space or comma to separate tags
* AT-1919 Crash in style inspector
* AT-1843 Crash when container is a GDCompositeFigure
* AT-1922 Bug Width/Height attribute in big files – improved performance
* AT-1854 non sRGB colours cause Color Picker Palettes to not work.
* AT-1917 Crash in drawing style bar – checking now for invalid selections
* AT-1919 Crash in style inspector
* AT-1918 Crash while using widget tag-editor
* Changed Type to Name in edit widget sheet
The 1.4 release of Antetype has been focused on one theme – Widgets. In Antetype 1.3 the groundwork was laid to overhaul the way widgets are managed and in 1.4 we have overhauled the standard widgets, widget inspector and widget organisation.
The most noticeable change in Antetype 1.4 is the new Widget Inspector. All areas of this inspector have been redesigned to make working with widgets faster and more intuitive.
At the top of the inspector we have moved the filters and to a menu. The top of the inspector switches between two views of the widgets:
At the bottom of the new widget inspector you can now change the background color for the inspector (using the Antetype Color Editor) and resize widget previews. Resizing of widgets no longer results in a blank space left to the right of the widget previews.
The preview that is displayed for each widget in the inspector have been updated to focus on the visual aspects of the widget.
The aspect ratio of the previews has been change to a rectangle because we have seen that most widgets used in Antetype tend to be wider than they are tall. This change optimises the space per widget and more widgets can now be shown within the widget inspector.
Another change to the previews is that the name of the widget been removed from the preview by default and only shows upon mouse over.
The dot that displayed the status of the widget in prior versions of Antetype has been updated. The red dot that was visible on widgets that did not match the widget library version, has been replaced with a new (non-red) sync icon. Clicking on this icon brings up the context menu for the widget preview.
If a widget matches the version in the widget library then only when the mouse is over a widget does a circle icon appear for the context menu.
In Antetype 1.4 it is possible to add tags to widgets.
All widgets in the standard widget library are setup with a set of predefined tags, but any tag can be applied to a widget. When tagging a widget, autocomplete will prompt the user with the details of similar tags.
Now that widgets can be tagged we have added new widget groups to the widget inspector. Each widget group can be setup to group widget that contain specific tags. For example a widget group can be created to show only widgets tagged ios7 and tablet. When Antetype 1.4 is first installed the default widgets groups compliment the standard widgets in the widget library.
N.B. Empty widget groups are hidden by default – but this can be changed in the widget inspector menu.
We have chosen tagging as the organisation solution for widgets because tags provide an open ended and flexible way for designers to organise their widgets. With our standard widgets we have chosen to organise by platform and control type, but widgets can be organised in any way. For example you might want to organise by project, client, year or even widget status (draft, in-review, approved etc) the choice is now yours.
N.B. Widget groups are configured and stored locally for each computer, if you would like to copy widget groups to other computer please see the file:
The filters are now available in the menu for the Widget Inspector:
An oft requested feature for Antetype has been to be able to remove unused widgets in a way similar to the resource inspector’s remove unused resources. This is now possible from the widget inspector menu – “Remove unused from Project”
Antetype 1.4 no longer allows the creation of new Look & Feels. This change is part of our plan to eventually remove the Look & Feel functionality within Antetype. Existing documents that have multiple Look & Feels will continue to work, but newly created documents can not contain multiple Look & Feels.
All the standard widgets from Antetype 1.3 are in a single Look & Feel. Using a single Look & Feel for all our widgets means that it is now possible to use widgets from different platforms in a single Antetype document. For example screens for iOS and Android can now be created in a single document and not two separate documents with alternate Look & Feels.
It is our plan to remove all Look & Feel support in a future version of Antetype and we making these changes to the functionality over a series of releases to make the change easier. If you are currently using Look & Feels in your documents and would like to influence our future plans – please contact us so that we can understand how best to support your needs.
A more minor change in Antetype 1.4 is that some items within Antetype have now been renamed and relabelled to remove confusion about their purpose.
In Antetype 1.4 the Shared Library is no more and has become the Widget Library. We have made this change to remove any confusion about the sharing of widgets. Widgets stored in the widget library can only be used across projects on the same computer and we believe this is more easily understood with the new name.
In the new widget inspector we have also updated the terms used when using the widget library. The terms update and revert have been replaced with “Send Changes to Widget Library” and “Get Widget Library Version”.
All new standard widgets have been redesigned in a single Look & Feel. This has meant each widget can have a reduced number of elements because the element hierarchy for each widget no longer requires styling elements for flexibility across different Look & Feels.
We recreated all of our standard widgets in Antetype 1.3, but the widgets were contained within the templates for each platform. In Antetype 1.4 the provided widget library contains all of the new standard widgets so that they are accessible without opening a template from a specific platform.
We let our focus on widgets in Antetype 1.4 slip for one single bonus feature. This feature is that the upgrade process for files has been greatly improved and users of larger files should notice that files are converted to the new format in seconds rather than minutes.
Version 1.4.0 (201402110820)
Antetype 1.3.2 was released today it contains only bug fixes, you can download the release from within the Antetype using “Check for Updates…” or you can download it fully from:
Bugs fixed in this release:
At Ergosign (our parent company and full of avid Antetype users) the biggest boost to productivity from Antetype 1.3 has been the new In-Place Presentation mode and accompanying interaction tool.
In this post we will explain more about how In-Place presentation mode and the interaction tool can significantly speed up your workflow when working with interactions.
Once a project contains a few interactions the interactions need to be tested and it is useful to also debug those interactions so that they work as expected when different interaction paths are used.
Interactions are often used to show hidden or collapsed elements in a screen elements and prior to 1.3 these elements would appear in Full Screen Presentation Mode only. When a designer returned to editing mode it would take them a while to locate the hidden elements, which would then have to be made visible, edited and again hidden before returning to presentation mode to test again.
In projects with many screens starting presentation mode can take a while because Antetype builds all of the screens upfront so that screen changes in presentation mode can happen quickly.
The original idea for In-Place presentation mode came from a conversation between Felix (one of the developers) and one of our Ergosign users. The conversation started around the frustrations regarding updating and testing interactions and soon the idea of the run mode was born.
Felix realised that with some quick changes to Antetype he could create a feature that enabled users to switch into a presentation mode without going full screen and without loading all the other screens. This test build was tried by our team and the original user and some changes were then made so that editing was possible.
The basic In-Place presentation mode was added into an EAP build for 1.3 and via our regular EAP webinars we gathered feedback about how useful the feature what problems there were.
From the feedback it became clear that the usage of In-Place presentation was confusing people so we discussed ways to make it simpler and a new feature was born.
In Antetype 1.3 there is no longer a need to start the Full Screen Presentation Mode to test and debug interactions. Instead of a full screen presentation a designer can choose to start an In-Place Presentation.
The first advantage of the In-Place Presentation is that it starts much quicker than a Full Screen Presentation because it doesn’t build all the other screens for a project.
The next advantage of the In-Place Presentation is that once hidden or collapsed elements are revealed Via interactions the user can change their selection tool to Direct Selection and the elements will stay revealed for them to edit.
This is not only relevant to hidden or collapsed cells, but also the hidden states of a widget that can be revealed and edited without having to reset the active state of a cell.
Usage of the In-Place Presentation will speed up the building, testing and debugging of interactions in a project. I hope it now clear to see why our colleagues at Ergosign found this feature to be the most beneficial in Antetype 1.3.
This post is part of a series of posts about Antetype 1.3.
We are pleased to announce the release on Antetype 1.3.1.
This is a bug fix release only, we have a separate post which details the larger changes in Antetype 1.3.0.
You can download this version from http://antetype.com/download or check for updates in your app.
Our recent posts have highlighted a lot of larger changes in Antetype 1.3, but there have been a lot smaller changes too. This post covers some of the smaller changes like JPEG export, re-set presentation mode, screen numbering on export and more.
One change that has been often requested is to export assets in the JPEG format so we have gone ahead and added it to all export dialogs as valid format.
We have reordered and reorganised the context menu in Antetype 1.3 to make it quicker to find the functions that you need.
When you have a widget selected the list starts with the states of the widget.
Next come the Style Editors with the most common on the main list and the others in the More Styles sub menu. N.B.all single letter keyboard shortcuts for the Style Editors are shown in this menu.
Next come the pasteboard operations.
Then sub-menus for Group and Arrange.
Styles can be copied and pasted or copy the CSS text to style with CSS like the current selection.
Export will export the current selection as an image.
Create Specification is only active when widgets are selected and will create a specification screen for the selected widget.
The final entries should be self explanatory some have been grouped into sub-menus to reduce the menu size.
The View menu in the application has been altered to reduce the height of the menu now the new Style Editors have been introduced. The changes are not large, but some of the shortcuts (especially for the inspectors) have changed.
The default toolbar has been reorganised and now contains some new buttons.
A significant change is that the present button is now on the left and is a menu with two options now. There are new buttons for widgets and text and the screens button is now a menu that works with Screen Templates.
The status bar has been introduced in 1.3 and using this with the alt key elements can be highlighted on the canvas as the mouse moves over the element names in the status bar.
This facility has also been added to the screen inspector so that when alt is pressed and the mouse passes over an element in the screen inspector it is highlighted on the screen.
When presenting in Full Screen the state of the prototype is changed as various interactions trigger changes in the User Interface. When presenting it can be useful to revert the entire prototype to the state it was to begin with and restart a user journey through the prototype.
This is now possible from the View Menu – Refresh Prototype (⇧⌘P). This causes the entire presentation to reset to the start, back to the original screen and rebuilds all screens.
An often requested feature has now been added to the screen export dialog.
It is possible for the names of exported screen images to be prefixed with a number indicating the order they are in the document.
In the example above the screens would be exported as:
A few performance updates have been included in Antetype 1.3 including:
Antetype 1.3 is now using the fading OS X scroll bar on the main canvas so that the scroll bars do not take up any space when they are not needed.
Scroll positions are now accurately remembered when you switch between screens so that you should be able to jump between two screens and retain your position in each screen.
This post is part of a series of posts about Antetype 1.3.