The end of nudging

Nudge, nudge, wink, wink - say no more - Monty Python TV Sketch

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.

Element D is a container with A,B & C nested inside Element D is a container with A,B & C nested inside
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.

Layout Direction

D has horizontal layout - A,B & C align horizontally
Element D horizontally lays out nested elements A, B & C.

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

Fixed size elements

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

Stretching elements

B has a width that stretches
B is now set to stretch horizontally to into the space created as D increases in size.

Shrinking elements

The element shrinks to the content
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
B has a maximum width of 60px, when B no longer stretches

Minimum sizes

B has a minimum width of 60px
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.

Automatic layout with many elements
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.

Re-arrange on-the-fly

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.

 

2 Responses to The end of nudging

Leave a Reply