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.
In Antetype 1.3 the Antetype Color Picker right is embedded directly within Antetype. Color Picking is done within the main Antetype window, without a floating panel, and color information is presented alongside other styling information in the Style Editors.
This post goes through our reasons for making the color picker inline and look at some of the benefits now we have done so.
The OS X Color Panel lets all apps provide a single consistent interface for selecting and editing colors in OS X. This brings a great benefit to user’s in that color picker techniques and workflows can be used across apps. For developers the work needed to add a consistent UI is minimal and so in general it seems that the OS X Color Panel is a win-win for developers and users.
Not only does the Color Panel work in any OS X app, it can also be extended and 3rd parties can develop alternate interfaces for picking colors. Using this feature we developed the free Antetype Color picker for OS X to add our own user interface to the OS X Color Panel and therefore users can pick colors the Antetype way in other apps.
The OS X Color Panel is configurable only as a floating panel. The floating panel is the same in look across applications and a single panel can be used for all aspects of color picking within an app depending on the selection.
In Antetype the OS X Color Panel is used with the Style Inspector with Borders, Background Color, Text Color and Shadows. Clicking wherever a there is an option to select a color results in either the OS X Color Panel becoming visible or becoming the key window. The changes made in the OS X Color Panel are then reflected in the Style Inspector and subsequently the document.
This approach has some downsides for the user.
The first is that when editing a color the user’s focus flows from the design canvas to the Style Inspector to the OS Color Panel and then back to the document to check the change. The Color Panel opens in the same place it was last closed and this can result in searching for the panel especially with a multi-screen setup.
When trying out various colors on a unique undo item is created for each color value that is tried.
Another problem is that switching between documents can result in the OS Color Panel not being paired with the correct color control, which can be frustrating and confusing.
One of our aims for Antetype 1.3 has been to increase the productivity of our users by enabling them to focus more on their content and not on the process of editing the content. We have written already about the new task focused Style Editors which have been designed to pop-up right next to the content to be styled when a designer needs them. It was clear with the Style Editors that having to set colors in the OS X Color Panel was going to be country to our aims so we decide to create an embedded version of the Antetype Color Picker.
The embedded Color Picker is now used in the following Style Editors:
The embedded Antetype Color Picker no longer creates a huge set of undo entries as the user plays with different colors, only a single entry is created when the relevant Style Editor is closed.
The embodied Antetype Color Picker also allows you to “scrub” through values using your scroll wheel or two fingers on track pad and has the same features as all Style Editor controls.
During the EAP we received a lot of positive feedback with regard to the new in-line Color Picker. The consistent negative feedback we received was that people would still need to use the OS X Color Panel because of the ability to store palettes.
So we have provided access to the OS X Palettes from the in-line color picker too.
Support for the OS X Palettes is only read-only so it is only possible to choose colors that have already been setup in an OS X Color Panel, we will write more about how to do this in a separate post.
The keyboard short cuts for all of the various color pickers are covered in the Style Editor post.
For those users who still need to access the OS X Color Panel this is still possible via the Style Inspector.
This post is part of a series of posts about Antetype 1.3.
In Antetype 1.3 we have updated the ways that you interact with and navigate documents.
This post reviews the updates to navigation in Antetype 1.3 and reveals some hidden features that can speed up productivity.
One of the most noticeable changes in Antetype for long time users is that the default state selection has changed.
Prior to 1.3 each time a selection was changed Antetype would re-select all the states of a widget. This meant that changes to properties would be applied to all the states of the widget. This was confusing because on the design canvas only a single state of the widget is shown, but changes were being applied to all the hidden states too. The majority of the time a user normally works on a single state but Antetype was always changing the selection back to all states. The default to all states was frustrating, especially if the user hasn’t noticed the change and then applied a change to multiple states by mistake.
To improve the experience, especially for new users, we have changed the default selection to be the active state of the widget. When you want to modify all states of a widget you can change the selection using the state control in Style bar or the States selector in the Style Inspector.
For some operations it makes sense to work on all states of a widget we have identified the following operations:
These operations can all be performed directly on the design canvas and when performed on the canvas the changes will be applied to all states of a widget regardless of the active state of the widget.
Should you have reason to make changes to any of these properties on a state by state basis this is possible from the Style inspector.
Another change to navigation in Antetype 1.3 is that the Spacebar can now be used to pan the canvas.
Two finger scrolling with a trackpad is also supported.
Two new zoom options have been added in Antetype 1.3 to enable you to zoom to the width or full screen size. These options can be accessed from the View Menu > Zoom or from the zoom drop down in the status bar.
Another change in Antetype 1.3 is that you can now use the two finger pinch gesture on a trackpad to zoom. When you zoom with a trackpad the focus of the zoom will be the position of the mouse pointer.
Keyboard zooming works with the same shortcuts as before (⌘+ & ⌘-) the only change now is that the zooming will now be centred around the selected element(s).
All of the changes to zooming that have been outlined in this document are also available in presentation mode.
Presentation mode will now remember across screens your preference for zooming, so if you choose fit to width – all screens will fit to width or if you choose 134% then all screens will be at 134%.
This post is part of a series of posts about Antetype 1.3.