Beyond Tellerrand 2014

We are just back from 2 days in Düsseldorf at the Beyond Tellerrand conference where we received a fantastic response for Antetype.

Version 1.5 is focused on responsive designs and Beyond Tellerand is primarily a web design conference so we used the occasion of our sponsorship of the conference to launch version 1.5 of Antetype, which had been released on Friday.

The feedback we received was overwhelming – our new responsive features went down very well, but as most people had not seen the product before they were also impressed by other features such as the widget system and specification generation.

Most of the speakers also popped over to our stand to have a look at Antetype and all that did gave us a good thumbs up. We were encouraged by kind words from Ethan Marcotte, Stephen Hay and Vasilis van Gemert.

We were really complimented by the time given over to us by Erik Spiekermann who sat with us for over an hour providing feedback and his thoughts on Antetype.
 

If you want to see what the people at Beyond Tellerrand saw –  please check out the 50 minutes of tutorials we have updated for the new responsive features.

Antetype now in the Mac App Store

We are pleased to announce that Antetype is now available in the Mac App Store.

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.

Antetype 1.5 – Responsive

We are proud to announce the release of Antetype 1.5.

This release has been in BETA for nearly two months and we feel it is ready for prime-time!

Responsive

The headline features for the 1.5 release relate to responsive design. We have added two new features to properly support designing responsive prototypes.resizing

Layout wrapping

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.

Design Breakpoints

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:

  • Getting Started – concepts used in Antetype
  • Layout – how to layout a mobile website
  • Widgets – create and re-use a widget
  • Interactions – add interactions to our mobile website
  • Responsive – make our mobile website respond to changes in width

Multi Screen Select

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.

Many Bugs fixes

As you can see in the release notes below we have also included many bug fixes in this release.

Release Notes

Enhancements

  • Multi Screen Select
  • AT-1940 Design Breakpoints: Setup breakpoints for a project and add states to widgets for automatic transitions across breakpoints.
  • AT-412 Wrap Property: Responsive flow layout for cells using horizontal or vertical layouts
  • AT-1960 new templates and widget library – merge option now available again for widget library changes.
  • AT-1956 select all states option in edit menu and in context menu
  • AT-1969 – Updated specification screens to include breakpoint states
  • AT-1980 – Have a setting to resize all screens in edit & presentation mode
  • AT-1948 – warning dialog before upgrading file format.
  • Moved to HockeyApp Crash reporter in new builds
  • AT-1921 – Remove Antetype Color Picker Installer – autoupdated still supported
  • AT-1976 – Move to ~/Library/Application Support/com.antetype directory – copy old licence, widget categories and shared library files into the new directory from ~/Library/Application Support/Antetype

Bug fixes

  • Problems with widgets after second save of document
  • AT-2010 Crash with Style bar – fill button
  • AT-2011 Crash with Border Button
  • AT-2012 Crash with unto in Text Tool
  • AT-1983 – Inspectors are always shown after relaunch
  • AT-1990 – possible to nest a widget into a widget of the same type – should not be!
  • AT-1992 – Exception causes canvas not to update
  • AT-1993 – Update Widget converts a widget from the same type in a shared-content-cell a basic cell
  • AT-1989 – Beach ball when selecting some elements
  • AT-1982 – States list jumps if a new state is activated
  • AT-1937 – Crash while saving in widget tag-editor
  • AT-2000 – exception while reverting a widget to shared library version
  • AT-1163 – fixes for multi screen export
  • AT-2004 – added cells not always visible on screen – need to scroll
  • AT-2002 – Style Inspector states bugs (missing selection for inner widget cells)
  • AT-1987 – Crash after ESC in Text selection – also fixed cursor flashing issue
  • AT-1986 – Crash on undo delete multiple cells
  • AT-1952 – Wrong behaviour when making a property shared
  • AT-1962 – red dot remains after revert
  • AT-1967 – Crash in validating menu in style inspector
  • AT-1968 – Crash opening file
  • AT-1971 – Resizing screen from the left hand side causes screen wierdness
  • AT-1975 – exception in create widget
  • AT-1951 Auto update the Antetype Color Picker to version 1.5.0 to fix tagging crashes.
  • AT-1927 Crash with text tool
  • AT-1947 Crash when using color lists in style bar color editors
  • AT-1926 Crash in toolbar validation
  • AT-1945 Improved window placement when starting Antetype for the first time
  • AT-1944 Problems after undo “create widget” resulting in file no longer saving.

Responsive Designs with Antetype

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.

Making designs responsive

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.


xkicker-mobile xkicker-medium-123 xkicker-desktop
This results in a set of documents for each viewport width; when modifications need to be made to a design the modifications must be applied to each separate design. The overhead of maintaining all the different designs often results in designs that only cater to two specific widths and little thought about what should happen at the points between the narrowest width and the largest width.

Responsive features since Antetype 1.4

Antetype already includes features to make elements respond to the size of other elements.

Horizontal & vertical layouts

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]

screen-vertical  screen-horizontal

Stretch and shrink sizes

Elements can dynamically calculate their dimensions based on the size of their contents or on the size of their parent element.

  • An element stretches to the full width / height of the parent element
  • An element stretches to a percentage width / height of the parent element.
  • An element shrinks to the size of the child elements.

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.

Resizing the screen in design and presentation modes

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.

Wrapping / Flowing

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.

wrapping-squares

Breakpoints

An Antetype document now holds a set of user defined breakpoints, which can be viewed in status bar.

Fullscreen_21_03_2014_08_07

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.

Responsive widgets

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

Screenshot 2014-03-21 08.11.45

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.

resizing

Single design for all screen sizes

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.

Updated Antetype Color Picker: 1.4.1

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.

Antetype Color Picker

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.

Installation

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

AntetypeColorPicker.colorPicker 

file to the folder:

“~/Library/ColorPickers”

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

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:

http://antetype.com/download

Enhancements

* 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

Bug fixes

* 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

Antetype 1.4.0

We are pleased to announce the release of Antetype 1.4.0.

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.

New Widget Inspector

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.

Widget Inspector - Antetype 1.4Widget Inspector - Antetype 1.4

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:

  • Widgets in the project
  • Widgets in widget library

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.

Widget Previews – no more red dots…

The preview that is displayed for each widget in the inspector have been updated to focus on the visual aspects of the widget.

 

Widget_Inspector-9

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.

 

Widget_Inspector-10

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.

 

Widget_Inspector-11The 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.

Organisation – Tags and Groups

In Antetype 1.4 it is possible to add tags to widgets.

Screenshot 2014-02-11 14.28.23

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.

Screenshot 2014-02-11 14.30.37

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:

~/Library/Application Support/Antetype/widgetCategories.plist

Filters

The filters are now available in the menu for the Widget Inspector:

Screenshot 2014-02-11 14.35.18

Remove unused widgets

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”

Look & Feel – reduced functions

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.

Widget Library not Shared Library

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

Over 400 new widgets

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.

Bonus Feature: Faster upgrades of existing files

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.

Release notes (including bug fixes)

Version 1.4.0 (201402110820)

Enhancements

  • Updated Shared Library & Templates
  • AT-1913 widget search field should use tags in search too
  • AT-1904 web viewer hides Look & Feels when only 1
  • Updated web viewer with clearer message about compatibility
  • AT-1850 Widget inspector select background using AT Color Well
  • AT-1880 widget group expansion state is now saved across application sessions
  • AT-1881 templates auto expand widget groups that match set of tags
  • AT-1882 various visual changes to the widget inspector
  • AT-1848 New data model that includes tags for widgets and faster upgrades from previous versions
  • AT-1850 Updated Widget inspector – with groups, new layout, two views for project and widget library widgets.
  • Removed ability to add look and feels
  • AT-1848 Add tags to widgets

Bug fixes

  • AT-1912 States in Style bar are shown incorrectly after All States used
  • AT-1897 Meta data and undo issues with templates
  • AT-1908 crash after delete widget, change app and press OK
  • AT-1892 Crash while updating widget library
  • AT-1856 Inspectors go missing in OS X 10.9 – inspectors auto sense if they are not visible and correct the situation
  • AT-1865 System locks with too many threads when comparing shared library upon opening a document
  • AT-1869 Visibility command was not working with undo correctly
  • AT-1610 auto-extend a trial if a new version is installed
  • AT-1853 undo / redo broken is template screen is used or when starting from a template
  • AT-1885 icons of previews are not correct
  • AT-1855 corrupt screen cache / templates directory causes a crash
  • AT-1857 nesting problem

Antetype 1.3.2 released

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:

http://antetype.com/download

Bugs fixed in this release:

  • AT–1630 different angle conversion for webkit
  • AT–1846 size popover doesn’t open for multiple states
  • AT–1847 multiple widgets with different state combinations break style inspector and style bar
  • AT–1844 range out of bounds exception
  • AT–1845 up / down arrows and mouse wheel value changes do not respect non-editable fields in color editor
  • AT–1842 multi-select exceptions
  • AT–1841 max and min width in style bar should not be enabled
  • AT–1830 moving objects to just over the edge of the canvas results in sudden jumps in the canvas.
  • AT–1833 stetted screens did not revert correct after in-place presentations
  • AT–1835 duplicate command is now deactivated for table cells and rows – selecting a row in the screen inspector now selects the children
  • AT–1834 Style bar should now allow the layout of table to be set
  • AT–1836 Tables can not be dragged because selection happens on mouse down – selection is now on mouse up and tables can be easily dragged
  • AT–1837 Style bar fill – paste option not always enabled
  • AT–1838 Shrink resizing has been disabled for Free layouts – group command for free layouts now uses manual resizing and calculates first values

Speed up interaction editing with Antetype 1.3

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.

Testing and debugging interactions prior to 1.3

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.

An idea, some tests and a new feature was born.

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.

Speeding it all up…

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.

in-place-presentation-take2

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.

in-place-states

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.

Related Posts


This post is part of a series of posts about Antetype 1.3.

Antetype 1.3.1 released

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.

Bug Fixes:

  • AT–1823 Export Selected Cell not working for nested cells without clipping
  • AT–1824 Drag an inspector from the inspector dock and it disappears
  • AT–1826 Stretch height % in Size Style Editor would take minimum value when that was larger than current value – results in invalid %
  • AT–1827 Antetype window lost focus when color picker takes color from another app & Color Picker gives Black screen in OS X10.7.5
  • Fixed various bugs in templates
  • AT–1828 Combo box in text bar should not open the window upon first click
  • AT–1826 Zoom to width doesn’t centre the screen if the screen is not selected.

You can download this version from http://antetype.com/download or check for updates in your app.

← Older posts Newer posts →

Archives