Replacing Fireworks
Adobe this week announced that they will not proceed further Fireworks development. This will lead many designers to look for a replacement tool. We think that Antetype is a great alternative to the aging software that never got much attention from Adobe. It offers features tailored to support the UX design workflow from wireframing to specification. Here are some Antetype highlights for Fireworks users:
Widgets and Look and Feels
Widgets are more flexible than in Fireworks and can be stored in different appearances. Widgets can contain other widgets and therefore be used to create complex master pages. Antetype widgets can be updated at any time on multiple screens and even multiple projects.
Vector-Based Visual Design
Antetype provides all the tools you need to design hi-fi prototypes. If at all, you will only need to switch to other apps for creating complex branding graphics or icons. Editing elements in 3rd party apps is straightforward. Open from Antetype save and go back. All instances of the graphic will be updated. For everything else, Antetype gives you all the visual design features like multi-color gradient, drop-shadow, inner shadow, text shadow, rounded corners, border styles, etc.
Dynamic Layout
Antetype goes beyond the known concept of static design tools like Fireworks or Photoshop. We offer a range of layout modes that allow you to create highly flexible and dynamic layouts. You will never have to nudge objects manually over and over again. Dynamic layout makes you much more productive and lets you try out different screen sizes without any extra work.
Copy CSS and Export Graphics
You can copy CSS code for any element designed in Antetype and paste it to your text-editor. This is especially useful for gradients and shadows. Or export elements as a graphic, even with multi-selection. Thanks to the vector graphics you can export different resolutions for Retina screens and other resolutions. We made the new Antetype website this way and it is a huge time saver.
More features
The latest release of Antetype added easy specification generation and property bindings. This makes UI specification quicker and more precise. Furthermore, Antetype lets you manage graphical assets used in you project. For example you can just import all needed icons at the beginning and update them later. You just have to replace the file once to change all instances.
We are aware that Fireworks users will miss certain features – like bezier shapes or grids – because they are either not yet implemented or handled differently. Some of these features are planned for future releases. Make sure to watch the tutorial videos and look at the example files to better understand Antetype’s unique concepts.
We want to make Antetype the best design tool available and provide the best alternative for Fireworks.
If you haven’t yet – please download the 30 day trial of Antetype, and contact us with any questions.
Bootstrap Part II – components
In response to a recent tweet we have previously posted some ways that bootstrap grid / responsive layouts can be achieved in Antetype.
We have now created some interactive bootstrap components in an example file that can be used to design a bootstrap based website or web app using Antetype.
The file contains buttons, button dropdowns and split button dropdowns and button groups:
Progress bars and pills:
Labels, badges, nav bars & fields:
These components are just highlights there are others in the file, please download it now, try out the components and give us any feedback in the comments below or on our support site.
Providing your email address in Crash Reports
In the crash reports for Antetype there is an option to include your email address when reporting a Crash in Antetype.
We would really encourage everyone to pass on their email address when reporting a crash as this enables us firstly to ask follow up questions about the cause of a crash, but also to tell you when the cause of the crash has been identified, fixed and when the fix is released.
Antetype can automatically fill in your email address using the My Card setup in Contacts.
If you do not already have setup in Contacts you can select the card you would like to use and then choose “Make this my card” from the Card menu.
To access this card Antetype needs permission to access your contacts, Antetype may have already asked for this permission but it was denied as it was not clear why Antetype needed to access your address book.
If you have denied permission for Antetype to access your contacts you can update this from System Preferences -> Security & Privacy -> Privacy. On this tab you can ensure that Antetype has permission to access your contacts.
Guest Post: Photoshop is not a page layout tool
The following is a guest post, written by Ben Dansby, with his point of view on using photoshop to design and layout apps. You can follow ben on twitter @bendansby.
Photoshop is not a page layout app
I recently presented Antetype to a group of coworkers who have been using Photoshop exclusively for our web site and app designs. After they had picked their jaws up off the floor, one of them came to me and said that after seeing Antetype, and hearing me liken it to a UI design equivalent of Adobe’s InDesign, designing a web site in Photoshop seemed as crazy as laying out a book in Photoshop.
Really, who would do that? Make a book in Photoshop, it’s insane! You use InDesign for that. It’s got multiple pages, and master pages, and table of content generation, and a million other things that are either absolutely necessary or really helpful for making a book. Actually, you could make a book in Photoshop with layer comps and text areas. And then when your editor deletes a paragraph from your prologue, you could re-do every subsequent block of text in each layer comp. And you could change every single page number in every layer comp when you decide to add a quote to the beginning of the book. But that would be insane. Instead, you use a tool like InDesign specifically made for page layout.
And yet, so many designers find themselves using Photoshop for UI and web design, instead of an app made specifically for those tasks. It’s easy to understand why. Photoshop is ubiquitous, it’s reliable, and most importantly, there simply haven’t been any good apps for screen design (Before you say Fireworks, note that I said “good” screen design apps).
Antetype changes that, in a big way. It’s been specifically created for UI and web design, and it features a radically different approach to design and layout than a graphics app like Photoshop. Despite all the “smart” features that Adobe has crammed into its flagship app over the years, the contents of a PSD are still essentially dumb. Objects in a Photoshop document don’t have any awareness of what they are beyond pixels at certain coordinates. Which makes perfect sense, given Photoshop’s origins as a photo editing app.
But user interfaces are dynamic, contextual, and most definitely not photographs, so they need to be designed in an app that allows objects to be aware of themselves and each other, to behave as they would when they’re real live apps and sites. That’s what Antetype offers, and I want to give you four examples of common frustrations in Photoshop that result from its “pixels on a screen” graphics app approach, and how Antetype addresses each. I’ll start small then work my way up.
Rounded corners
When I draw a rounded rectangle in Photoshop, I’m merely laying down a series of vector points that happen to form a rounded rectangle. The path has no semantic information about being a rectangle or having corners. This means that I cannot change the radius of its corners after the fact, nor can I set the radius on a corner-by-corner basis. Instead I have to manually edit vector points to achieve the result I want. Even worse, if I squash or stretch the rectangle, its corners squash and stretch as well. In Antetype, any of a rectangle’s corners can be any radius at any time, because Antetype knows what a rectangle is and what a corner is. And if I make my rectangle wider, Antetype knows to increase just the width of the rectilinear parts, and leave the corners as is.
Images
In Photoshop, an image is just a floating block of pixels. If I want to replace an image with another image, I have to paste in the new image, move it to the same place in the hierarchy, move it to the same location on the canvas, resize it, apply any layer styles that were applied to the original image, and then delete the old image. In contrast, Antetype treats images as properties of an object. So by simply pointing a rectangle to reference a different image, I can swap out one image for another and Antetype preserves the same location and attributes as the previous image. Even better, I can instantly replace an old version of an image with a new one, wherever that image exists in my document, because Antetype knows about and keeps track of the image file, and uses it to fill my rectangles with the image.
Styles
Unless you’re making a Geocities page, your design has a consistent theme, with elements styled a certain way across multiple pages. Photoshop lets you save a set of attributes to apply them to objects, so that you can more quickly carry the theme across your design. Except, in keeping with our thesis of Photoshop not being smart, applying a style is essentially a script or macro. It will apply the attributes you have saved, but your object bears no connection to the style you applied. Two buttons with the same style applied just happen to be two rounded rectangle vector paths that have the same styling attributes. If you want to change the color of all your buttons with that style, you have to create a new style and apply it to all your buttons all over again. This is a nightmare.
In contrast, Antetype’s widget system allows you to use the same style button throughout your design, and then change the style of every instance of that button whenever you like. All instances of a widget maintain a connection to each other, so that if one changes, Antetype knows about it, and lets you perpetuate those changes to the other instances or keep the change confined to a single button.
Layout
This is the big daddy for me. The first thing you learn if you take a web development course is to not absolutely position things. It’s such a tempting prospect, just drag things where you want them (as Dreamweaver originally presented absolute positioning, even calling AP divs “layers”), and you’ve got your web site! Except that it’s almost always a mistake to absolutely position things, because web pages are constantly changing, bound by web engine rendering rules, and variable in width. By designing in Photoshop, you’re essentially positioning everything this way. Not only is this unrealistic for development, it’s horrendous for the designer as well!
Let’s say you have a lengthy form composed of dozens of fields stretching down several page lengths. Your client calls you and says that they need to add a Middle Initial field right after First Name. You now have to select every single field below First Name, move it down the exact height of another field, its label, and the margin between two fields, grab the footer and move it down, and then manually select the vector points comprising the bottom of your content container object and move them down, before duplicating the First Name field, and moving it down, all the while making sure you’re keeping those margins consistent. I know you’ve had to do something like this many times. To Photoshop, it’s all just layers on a page. The fact that several objects occur in vertical sequence does not concern Photoshop one bit. Such are the follies of using a graphics application to do interface design. To accomplish the same task in Antetype I would select my First Name field and label container object, and hit command-D. That’s it.
I could go on for several more pages about the wonders of using Antetype’s dynamic layout tools (really, don’t get me started on margin and padding), but suffice it to say they will save you a lot of time and frustration. If Antetype had all its other features except the layout tools, it would still be a great app. But the layout tools elevate it to “heavens parting, trumpets sounding” territory.
Time for a Change
Those are just four features of Antetype, and I’ve really only touched on facets of those four features. But hopefully I’ve given you a taste of the difference between doing screen design with an app that understands only pixels and doing screen design with an app that understands interfaces. Just as you wouldn’t use Word to make a spreadsheet, or use Illustrator to edit a photo, it doesn’t make a whole lot of sense to use Photoshop to design an interface. Up until Antetype, our other options were limited or fraught with downsides. But take it from me, a former fellow frustrated screen designer, there is now a better way.
—
What is your opinion?
Would you be interested to write a guest post on a subject related to Antetype? – please contact us at info@antetype.com if you would.
Updates to our support portal – logins to track case progress and history
Our new support portal is only a few weeks old, but we are happy to announce a requested update:
You can now login to see your history of questions and cases, re-open cases and interact with use directly for private and public cases.
The login feature should also save you bit of time when post questions, problems and ideas because you will no longer need to provide your email address and name every time.
You can login using twitter, facebook or setup an email address and password to use just with the support portal. There is link to login at the top of all support centre pages.
We hope this encourages more feedback and helps you track all your contacts with us.
New website – feedback welcome
To coincide with the release of the 1.2.0 version of Antetype and our new support site we have released a set of updates to our website.
The aim of the changes is to communicate better what Antetype does and how it will improve the working day of a UX designer.
We have updated our home page to better emphasis the benefits of using Antetype and explain some of the features more clearly.
We have created a gallery to showcase some designs that have been created with Antetype.
We have merged the examples and tutorials into a new learn page.
We are keen for any feedback, but here are some questions to start with:
- Can you identify your usage of Antetype with the benefits that we have outlined?
- Have we missed any benefits?
- Are we promoting the correct features?
- What else should we include?
- Is there anything we should not include?
- Ideas for videos that might better explain the benefits of Antetype to visitors of website.
Grid layouts & bootstrap
Following a tweet last week about bootstrap I have done a little investigation into the various aspects of bootstrap and how we could support bootstrap better.
@antetypeHello! We need Bootstrap support in Antetype. Will you make it and when?
— Nick (@nmatuhin) 8. April 2013
After some quick analysis it seems there are two major aspects of bootstrap that it would be useful to have in Antetype: the scaffolding and the components.
This post will focus on the scaffolding and a follow up next week will look at the components.
Bootstrap scaffolding
The scaffolding is a responsive grid for building layouts. Grid based layouts have not previously been supported in Antetype because they generally clash with our aim to be able to resize and relayout screens based on rules.
After some experimentation with the property binding features added in 1 .2.0 we are now able to offer a responsive grid template, based on columns.
The template is based on a 12 column grid. As can be seen from the image above using this grid we have columns that are 2,3,4,5 or 6 columns wide, those rows that have evenly spaced column groupings could easily be achieved prior to Antetype 1.2, but with Antetype 1.2 it is now possible to use property binding to make rows that have more complex structure such as 2,3,5,2 etc.
The design can then be stretched horizontally in both directions to keep the correct ratios:
To use this in the real world some of the reference rows that are needed to get data binding to work would have to be hidden or collapsed.
Fluidity and flow
Although Antetype can now support a grid based layout it is not currently possible for us to fluidly move to a single column per row as the bootstrap grid does at small widths, but this is something will tackle in the future.
Antetype can however have percentage based layouts that resize matching those in the Bootstrap scaffolding documentation, click on the images below to see examples.
We have put together a small example / template file that can be downloaded to try out grid / column layouts as used in bootstrap:
Download bootstrap scaffolding example file
Is this of use to you? Would you like more examples related to bootstrap or grids or column based layouts? Tell us in the comments or contact us directly at support@antetype.com.
UPDATE: Don’t miss our new post with Bootstrap Components
Feedback always welcome – helping us improve Antetype
Now that Antetype 1.2.0 is out of the door we are beginning the development work on version 1.3 (more information on this soon), but we are also starting to plan what will come in Antetype 1.4.
Would you help us improve Antetype and complete our quick survey (should not be more than 5 minutes):
https://www.surveymonkey.com/s/ZBDLMDC
If you have longer form feedback or suggestions then please email us at:
Or take part in the discussions on our support centre:
Or even just leave a comment below – we just want to know what you think could improve Antetype however big or small.
Supporting things differently: support.antetype.com
With the launch of Antetype 1.2.0 we are also updating the way we provide support for our users.
We have previously offered support mostly via our pages at getsatisfaction.com, but we would like to now introduce a new support site that is more than just a forum:
From this site you are able to search not only the wealth of discussions from the getsatisfaction forum, but also we are adding the help documentation to the site and will add articles related to common questions and issues too.
We would like to encourage all new discussions to happen on support.antetype.com because behind the scenes we have enhanced tools to manage and track any questions and make sure that requests, bugs and questions are followed up.
In addition to the site we also have a new support email address:
Emails sent to this address are also tracked to ensure that we follow up on requests.
When you have a question, bug report, idea or problem you now have three options to contact us you can either:
- Ask the community – this is a public question and is open for all to comment on, but will also be answered by one of us.
- Contact Us – this is a private question and can have attachments but will only be visible by the Antetype team.
- Email us at support@antetype.com – this is the same as using the contact Us for from above.
Comments made that include @antetype on twitter or comments made on our facebook profile are also tracked in our support system so there are many ways that you can contact us and know that we will get back to you.
Please tell us what you think of this approach and use the site to help us improve Antetype and our support.
Announcing ANTETYPE 1.2.0
Finally we are proud to announce the release of Antetype 1.2.0. This new release contains many changes which are outlined in this blog post.
At the start of the development phase for 1.2.0 we outlined the two use cases that we wanted to enhance with 1.2.0 namely:
- Editing resources in 3rd party software
- Creation of style guides and specifications
We are happy with the solutions we have put in place to enhance these workflows and hope you are too, you can find out more in these preview posts:
- Editing resources in 3rd party software – 1.2.0 Preview
- Generating a specification for a widget – 1.2.0 Preview
- Markup a screen, present notes – 1.2.0 Preview
As a result of these changes there have been a couple of new features that have been introduced as “by-products”:
A selection of videos have been made regarding these changes you can find them all on our vimeo pages. Here is the video about property binding:
We have also responded to a number of enhancement requests in 1.2.0 namely:
- Add search field to the screen inspector
- Set clipping off as default for groups
- The Color Picker now works continuously, but only in sRGB
- The interaction selector window retains the position it was previously in and is not always centred
- Change interaction types and keep the same target
- Add a search field to the interaction selector
- Added @2x option to export dialogs – always export at 72 DPI, @2x images at 144 DPI and twice as big
- Trial licences will automatically be extended by 15 days for each new release
- Cut and Paste now working with MS Office apps
And the release includes many bug fixes of which here is a selection:
- horizontal layout is triggered after circle border change
- made sure paint-above-all honors parent visibility
- widget with triangle in different states unusable
- Web viewer interaction: mouse move changes screen
- Duplicating Screen does not work if a cell is selected
- Drag and drop inside a widget was making basic cells
You can read more about the bug fixes in the release notes.
To enjoy 1.2.0 you can let Antetype autoupdate next time you start it or you can manually download it from the download page.