Antetype 1.3 comes with a set of predefined templates and widget sets.
When creating a new document in Antetype 1.3 the only route is via the Template Chooser. When starting Antetype or by choosing new from the file menu (CMD N) you will see the Template Chooser.
Templates within the template chooser are split into categories based on platforms or other logical groupings.
We provide templates for the following platforms:
When starting a new design you may want to keep an eye on our community site where you can find inspiration from many different designs uploaded by Antetype users.
The new screen button in the Antetype toolbar has bee
n update in version 1.3 to be a menu so that new screens can be based on templates.
The set of screens in the menu come from the template that the document was originally created from.
When a new screen type is added to a document the new screen will also add any required resources or widget that it needs. If the document already contains versions of these widgets or resources it will use the existing versions of the widgets and resources and therefore will incorporate the latest changes to those widgets and resources.
You may notice in some templates that there are prompts to add elements to a container. These content placeholders disappear as soon as new elements are added to the container.
Placeholders do not show in exported images or in presentations they are only visible in design mode. If you do not require placeholders in your design you can hide all placeholders using the view menu – Show Placeholders option.
As an aside it is probably useful to note that Antetype 1.3 no longer contains widget sets by default. Previously widgets sets were bundled with Antetype inside the Shared Library. We have decided to change the distribution method for widget sets in Antetype 1.3 and widgets are now bundled inside the templates for each platform.
One consequence of this change is that widgets from different platforms can now easily be included in a single project and moved from project to project using copy and paste.
This post is part of a series of posts about Antetype 1.3.
A status bar has been added to the editing window in Antetype 1.3 to provide at-a-glance information about the design, but it offers other ways to speed up your workflow.
This post explains all the functions of the new status bar and uncovers a non-obvious functions.
A key aim of Antetype 1.3 has been to enable designers to maintain focus on their design and reduce the need to move to other windows to review and change details of a design. The status bar has been added to provide at a glance information about the current selected element and its place in the hierarchy of the document.
From the icons in the above status bar we can see the following:
If the names of elements in the status bar do not directly mean anything to you, you can use the ⌥ modifier while performing a mouse-over on the status bar to highlight the parent elements in the hierarchy.
The status bar can also be used to navigate the hierarchy of your document.
Simply ctrl-click on any of the elements in the status bar to see a list of the child elements, as you mouse over the child elements they are highlighted in the document.
Selecting an element from the list will then change the selection to that element.
The same technique can also be used to navigate screens too. If you ctrl click on the screen name you will see a list of the screens in the document – choosing a screen from this list will then navigate to the selected screen.
The status bar can also be used to rename an element – simply double click on the element in the status bar and you can edit the name of the element.
In addition to the hierarchy, navigation and renaming options provided by the status bar on the right of the bar is a zoom control.
This control offers all the options that were previously available but also supports two new options:
This post is part of a series of posts about Antetype 1.3.
In Antetype 1.3 we have added two the ways in which you can edit and interact with your screen designs using only your mouse.
Prior to Antetype 1.3 re-arranging the order of elements in a container required the user to shift their focus from the design canvas in the main window to the screen inspector.
A key aim of 1.3 has been to remove the need for the user to shift their focus to the screen inspector and to allow them to keep their attention and focus purely on the design canvas.
With Smart Dragging a user can easily re-arrange elements within a container directly on the canvas, by simply clicking on the item and dragging it to the preferred ordering position.
This works for vertical, horizontal and stacked layouts in free layouts the ordering of elements is not important.
Moving an element to a new place in the hierarchy in Antetype 1.2 involved using either the screen inspector or enabling “Nest mode”. Nest Mode was enabled using a button on the toolbar or a modifier key while selecting elements.
In Antetype 1.3 nest mode no longer exists, changing the parent container of an element can be done either using the screen inspector or via Smart Dragging.
Just as Smart Dragging can be used to alter the order of elements in a container an element can also be moved between containers. Simply drag an element out of the container it is currently in and place it over the container you would like to add it to. Do not yet let go of the mouse, the new parent container needs to become the target for the drop and while this is happening you will see the target flash blue. Once the new parent container is set as the target you will see that it has a blue outline to indicate as much, you can now let go of the mouse.
Changing the ordering of elements in a container or moving an element from one container to another will often have an impact on the layout of a screen. This is highly relevant when a container is set to shrink to fit its contents or a element is set to stretch to the size of its container. As an element is dragged using Smart Dragging these changes are reflected immediately in the design, even before you let go of the mouse and commit to the change.
Should you change your mind in the middle of a drag and decide not to re-order or change the parent container of an element – then just press ESC and everything will snap back to how it was before the drag started.
This post is part of a series of posts about Antetype 1.3.
After 6 months of development we are proud to release Antetype 1.3.0.
Antetype 1.3 contains many new enhancements and bug fixes and is available now as a free upgrade. You can download it directly – or use Check For Updates… in the Antetype menu.
This post serves as an overview of the changes – in the coming days we will post more details for you about the details of each of the changes. We will update this post with relevant links to other as they are added.
The first noticeable change when starting Antetype 1.3 is the Template Chooser that is presented to help you start a new document, load a recent document or open an existing document.
There are a number of categories and within each category a number of templates – expect new templates in future release but do keep an eye on our community site for more inspiration.
The first template presented to new users is the Getting Started template which we have designed to give a quick (less than 5 minutes) introduction to the key concepts of Antetype.
It is hard to demonstrate in a static image – you’ll need to try it yourself, but smart dragging reduces the time taken to re-order your hierarchy, add new items to the hierarchy and play with different layout ideas.
Read more about Smart Dragging.
To further speed up the process of designing a screen we have added two alternatives to the Style Inspector that are available under the normal Toolbar. These are the style bar and text bar.
With a glance you can review the key styling information about a selected item. Pop-up windows appear to enable you to focus on editing styling aspects of your design, and disappear when you want to review your changes.
At the bottom of the screen we have also added a status bar. This is the new home of the zoom control, but also holds a path component to provide information about the current selection and its parent components in the hierarchy.
The path control can also be used to change the current selection (select a parent or try a ctrl-click), highlight objects (⌥), change screen (ctrl-click on screen name) or rename the selected item (double click).
Read more about the Status Bar.
When Present In-Place is started a new tool is enabled by default that allows you to interact with your screen as if it was in a Full Screen Presentation. For example when the mouse moves over a widget you can see the mouse-over state, when a click happens you can see the pressed state. During an In-Place presentation you can change to normal selection mode to edit your design while it is in the altered state.
We have decided to change how we distribute widgets and rather than include them in a shared library for each release we will now provide them in separate templates or via our community site . This means Antetype now ships with an empty shared library, containing a single Look & Feel called Antetype.
By default the ability to use the Shared Library and the Look & Feel Selector is now switched off in Antetype. This can be enabled again via a preference panel.
There are a host of other changes that have been included in Antetype 1.3, but to keep this post as short as possible we will only list them for now – look to other posts to expand on the details.
This post is part of a series of posts about Antetype 1.3.
We have been getting consistent feedback that the community tools provided by our support portal are not good enough to encourage proper discussion.
The three main complaints have been:
Our Support Portal is provided via salesforce.com via their desk.com service and these restrictions are general restrictions from the desk.com service and not something we are able to control.
We have given specific feedback to desk.com around these issues but they are unable to commit to making any changes currently so we have decided to change things ourselves and for the moment move community discussions back to getsatisfaction.com.
If you visit the support portal now you will find a link “Ask Community” on the right of every page above the link to “Email Us”. This link is to the post new topic page on Get Satisfaction.
We would encourage users to still initially use the search box on http://support.antetype.com when searching for a topic as this searches our help files, FAQs, announcements, previous desk.com posts and get satisfaction.
As ever we welcome feedback on how we can better serve our community of users in discussing Antetype together and with the Antetype team.
After 4 months of development we have implemented the major changes that are key to Antetype 1.3. These include:
Note: you need to be a member of the Antetype Early Access Program to try out the EAP build, you can sign up here.
We previously explained out our high-level aims for version 1.3,:
We have tackled these two use cases with a set of new features to make it quicker and easier to get started on new designs and make common changes for both new users and existing users.
In this post I will introduce the new features, there will be follow up posts with more details on some of the larger features, but this is a long post so grab a drink and give your self about 10 minutes to get through it all.
If you are already a member of our Early Access Program you should find that you are prompted to update your EAP version the next time your start it – if not just manually update from the Antetype menu.
If you are not a member yet – please sign up.
We have added an entry to the File Menu ‘New from Template Chooser…’ (⇧⌘N) which allows a user to choose a base template for their new file. This menu will eventually replace the New option in the File Menu in the final version of 1.3.
When you open the Template Chooser you can choose from an array of provided templates to start your design with. In the EAP release these templates are at an early stage so expect more changes as development continues.
The templates are also user editable – we will post a follow-up post with exact details of how to do this.
N.B. Those who are too curious or impatient to wait for more details may find some inspiration from the directory ‘~/Library/Application Support/Antetype EAP/Templates’. Each Category is a directory and you should examine the plist files to understand how a category and the templates are built. Those categories/ folders that are installed by Antetype are reserved and should not be modified as they may be overridden with future templates.
We have overhauled the way that Antetype enables elements to be moved around a screen design. Any element can be moved to a different part of a screen’s hierarchy visually by just dragging the element. While the dragging is in progress Antetype previews the effect of the change based on the layout rules that are in the document.
When a new widget is dragged onto a screen Antetype will preview the impact of dropping the widget at the chosen place within the screen.
This change is quite difficult to explain and makes more sense once experienced. Our aim has been to make adding and moving widgets to a screen a much smoother and quicker experience.
We will post more details about this feature along with some videos to more clearly explain how it works, in the meantime we suggest just trying it out.
We are very keen to receive feedback on this feature and any associated logic and rules that could be implemented to improve the way it works.
At the top of the Antetype design screen we have added two new quick access bars to enable common tasks to be done more quickly without needing to use the Style Inspector.
The main quick access bar enables a user to view and edit the following information:
The font quick access bar is only visible when a selected element has text, but it enables the following to be edited:
The quick access bars are intended to speed up editing documents and present the information about selected cells without making the style inspector visible. The style inspector remains as in version 1.2 so that you are able to revert to the style inspector should bugs or limitations be found in the quick access bars.
The quick access bars have changed many times during the development of 1.3 and are likely to continue to do so as development continues. Feedback is very welcome on how to optimise the editing experience with the quick access bars or better present information in a concise way.
A follow up blog post will go into more detail about the quick access bars. For the curious try using your arrow keys and scroll wheel / two finger drag in any of the number input fields.
A status bar has been added to the design screen that outlines the hierarchy of the currently selected element. The path element enables a designer to easily view the hierarchy above the currently selected element without needing to use the screen inspector.
A mouse over on the path of parent elements from the hierarchy will highlight those elements on the screen.
Clicking on an element name in the status bar will change the selection to match that element.
The status bar can also be used to navigate the hierarchy with a secondary click (crtl-click or right-click) on each of the levels:
In addition to the hierarchy path and the zoom control the status bar contains a drop down that can be used to change the screen size through a set of predefined sizes. The sizes are currently hard-coded within Antetype but these will become user editable in a later EAP release.
The aim of this feature is to enable designers to easily see how a design resizes and behaves with different screen sizes.
Just as with status bar hierarchy path element, when you mouse over any element in the screen inspector it will be highlighted on the screen.
With the addition of the new quick access bars we have fixed a bug in the toolbar that was stopping it from shrinking in size when smaller icons were used. With smaller icons slightly more of the design screen can remain visible.
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:
After the feedback from the EAP releases that we provided for the 1.2 release we have made a couple of changes to the EAP release.
A key piece of feedback we received was that people did not use the EAP build in real projects because the resulting files could not be opened with non-EAP versions of Antetype and therefore could not be shared. To fix this we have added an option to the file menu in the EAP build to ‘Save As Non EAP Version…’ this option will save a version of the current file in a format that can be read by the normal version of Antetype.
To encourage usage of the EAP version we use separate versions of the shared library for the EAP and normal versions. This means that you can run the EAP and normal versions along side each other and that the EAP will no longer update the library for the normal version.
Under the Application Support folder (‘~/Library/Application Support’) there are now two folders ‘Antetype’ and ‘Antetype EAP’ that hold the shared library and templates for the different builds of Antetype.
The About dialog now indicates if you are running an EAP build or a normal build. For EAP builds the letters EAP are displayed after the build number, for normal builds only build number is displayed.
The EAP build includes features that are not currently on a path to being released but we would like some feedback on at this early stage. The first of these features is something we are currently calling the Run Tool.
We will provide a follow up post to explain the purpose of the Run Tool and how it works.
For the curious and impatient the run tool can be found in the selection mode drop down on the toolbar. The tool enables a designer to interact with the screen as if in presentation mode clicking and mouse-overing to change visibility and collapse elements. When you go back to direct selection the state of the screen remains as it was with the Run Tool, but it is then possible to edit properties.
N.B. Changes in visibility made with the run tool are only temporary and will revert when reloading the screen by entering and leaving presentation mode or switching screens.
We would now like feedback on these features as we complete the development to make sure the final versions are as good as possible.
Do you think we have added the right features to hit our aims for 1.3? What else could we do to speed up starting a design or speed up editing a design?
Our development team is focused on Antetype 1.3 at the moment but we have just released an minor update to 1.2 which contains bug fixes and a couple of enhancements.
The bug fix with the most impact will probably be the fix for scrolling problems that have been addressed in this release.
Any problems or questions – please head over to our Support Centre:
With version 1.2 of ANTETYPE released into the wild, we are now beavering away at two new releases: 1.2.1 and 1.3.0.
1.2.1 is a bug fix release for reported issues with 1.2.0 and will be available in a few weeks (already previewed if you are in the Early Access Program).
Development of version 1.3 is ongoing so this post does not provide details but an overview of the use cases that are the focus of our development.
Listening to our users and feedback from people who have tried Antetype we have found that getting started with Antetype can be confusing. We are aiming to improve the following use cases in 1.3 to make things simpler for users when starting a new project:
Currently when starting a new project within Antetype a user always begins with a blank document. To add widgets to that document a user must either use the shared library or cut and paste widgets from previous documents or an example document from our website.
To drag widgets into a document is currently difficult if you are using a hierarchy that has cells with horizontal or vertical layouts. It is easiest currently to drag the widget on to the document and then place it in the correct place in the hierarchy using the Screen Inspector. If you are using a Free layout this is easier, but if there is a hierarchy in place you may still need to use the Screen Inspector to get the exact placement.
We think we can make this experience better, although we don’t have a complete solution for this use case yet, we think we can improve how widgets are added to a document and hierarchy and perhaps provide templates to make the start of a project easier.
What do you think we could do to make starting a project easier?
Currently the style inspector includes many options for changing the properties of a cell. The options are grouped, and the groups can be expanded or collapsed to ease navigation of the options but the list can be exhausting to navigate.
Some of the properties that are commonly changed are in different places within the Style Inspector and often the Style Inspector must be scrolled to jump from one change to the next, especially if you are not using a large display.
We think that we can better support users making common changes to their documents by making common options easier to access and reduce the number of clicks and scrolls required to make changes.
What are the common properties you change? How could we improve the experience of making common modifications?
We are happy to provide a comprehensive widget set for making iOS 7 UI designs. You’ll also find complete screen templates for Mail, Messages and Settings.
So now download the widgets and send the new iOS 7 Look and Feel that is included in the file to your shared library to use it in all of your projects.
UPDATED 27/6/2013: Incorrect links replaced
A lot has been written about Adobe discontinuing Fireworks and how to fill the gap. What can be used to replace Fireworks? Photoshop, Sketch, Acorn, Pixelmator or Antetype? We think Fireworks was a good tool for web and UI designers, but it also had many drawbacks and it was not cared for by Adobe after the acquisition from Macromedia. Most importantly some big features that UI designers would benefit from were missing. I’m talking about automatic and dynamic layout and (really) reusable components. Of course, Fireworks is not the only tool, basically all design tools are missing these features.
But why? Everybody is talking about responsive design and the layout is such an essential part of a UI. Just think about all the screen sizes and resolutions we have to design for today. Most, if not all UIs are NOT designed for one fixed screen resolution, but the existing design tools do not support UI designers in any way in this crucial area.
Most development tools like Interface Builder or Expression Blend include tools to define the layout of an app in detail and you can of course specify it with CSS in HTML projects, but there is nothing on the market for UI designers (not developers). How do UI designers communicate their layout ideas to developers so that they can build the app as it was intended? You’re right, they often write big specification documents and assemble many screens in different resolutions and if one small thing changes, all screens have to be adapted. This often doesn’t happened because it is too time consuming. In the end developers are left alone and they have to guess how the layout should be implemented and this is most often not what the UI designer had in mind.
With Antetype we want to provide new tools to make UI designers more productive, improve the designer-developer workflow and in the end, enhance the quality of the final application.
Dynamic layout is the one of the most important features in Antetype. UI designers love it, because it saves a tremendous amount of time. You won’t believe it if you haven’t tried it. Just imagine that you have designed your screen in Fireworks and now the size of the left navigation has to be increased. This means all parts within the navigation and many elements in other areas have to be rearranged. It’s a very tedious and uncreative job. A more simple example: In a toolbar, all buttons are placed side by side and they all have labels. You nudged them carefully so that every icon is placed in the correct distance to the other. Now you have to switch button 2 and 6 and found a typo in two labels, so their lengths change. Ugh, this means another ten minutes lost. And now you have to do it on 25 screens. I know all UI designers have often run into this problem, because there is just not a workaround.
Antetype not only introduces dynamic layout but also a feature-rich widget system. For example, if you change the text-shadow of a button that is used 134 times in your project, you will only have to do this once. And if you use the button in other projects you can even propagate the changes to all other projects the button is used in. Really, all your projects will always be up-to-date. It goes far beyond the Master concept of fireworks. You have full control and can define the properties you want to update. You don’t have to update everything at once or at all. You can just keep the modifications for a single instance. You can even store widgets within widgets and build complex templates. It gives you many possibilities to be creative and refine your UI design step by step without stealing your precious time.
We think there are many great design apps out there, especially Mac-only tools that are really well made. The problem is that they are meant for graphic artists and visual designers, not for UI designers who work on many screens with lots and lots of iterations every day. Antetype solves these problems and even lets you create a beautiful visual design, without leaving the app.
We are aware that there are missing features in Antetype, but be aware that we are just staring and upcoming releases will be packed with features made especially for UI designers. We want to take UI design one step further and not just replace an retired tool.
“It’s just the beginning of a UI designer’s dream tool!”
Sebastian Scheerer, Co-founder and UI designer @6Wunderkinder (Wunderlist)
Check out the tutorials and examples on antetype.com/learn and digg into a new UI design era.