We are proud to announce the release of Antetype 1.6.1. The release is a simultaneous…
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.
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.
Element D is a container element with A,B & C nested inside element D.
In addition to an elements place in the hierarchy, the following properties are also used to automatically calculate layout changes.
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.
A, B & C all have fixed sizes as the container D changes size.
B is now set to stretch horizontally to into the space created as D increases in size.
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.
B has a maximum width of 60px, when B no longer stretches
B now has a minimum width of 60px, when B no longer reduces in size
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.
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.
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:
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.
You can download a free 30 day trial of Antetype from our website.