This is guest post by Christian Kaspari who is a Senior User Experience Designer at Ergosign with his points of view about the way he starts designing prototypes using Antetype.
How I design a new prototype from scratch with Antetype
My first steps with Antetype are essentially the same – no matter if I rebuild an existing design or create a new one from scratch.
First of all, I set the dimensions for my screen (e.g. 1024 x 768 pixels)
Then, I try to abstract the UI into different zones (e.g. Header, Toolbar, Left Navigation, Content Area, Footer) to set up my screen layout.
I do this by:
Setting the screen content layout to Vertical.
Adding a cell for each zone that I have identified, e.g. the Header zone and set their widths to 100% and the height to 100px.
Then I’ll add a new cell for the content area which is placed directly underneath the previous cell due to the vertical layout of the screen and set it’s dimensions to 100% width and height.
Then I’ll add another cell for the footer with a width of 100% and a height of 30 px
In that way, I can setup the foundations for the layout (resizing) behaviour of my screen step by step until I end up with my required structure
So I can also check, which panels resize if I change the dimensions of my screen ( width of the left navigation panel in comparison to the Content zone)
Then I usually start and colourise the different areas which might already take some CD aspects into account (not in this example ;)), but this depends on what I actually need the screen for – wireframe vs. visual design
With this procedure I can now continuously add the layout behaviour I want for each part of the application. I am able to arrive at a screen layout, which adapts to layout changes the way I would expect it to do.
Here it’s quite important to avoid unnecessary cells as this makes it later more complex to find the correct cell which – for example – you used to define a margin (e.g. between the toolbar items). There it’s quite important to find and follow a procedure in the course of the project (e.g. add margins to the toolbar items and NOT to the inner elements like the label).
In the ‘end’, the necessary elements are placed on the screen – either created by yourself or with the help of the widget gallery and you can then:
For this example my final screen is detailed below with the structure displayed from the Screen Inspector on the left.
To help explain the structure you can download and review the file that was created for this post.
How do you start your Antetype projects?
Is it a similar approach?
Would you be interested to write a guest post on a subject related to Antetype? – please contact us at email@example.com if you would.
The fifth episode of our video podcast explains the interaction fetaures of Antetype. Learn how to switch screens, change states and show/hide elements in presentation mode and web viewer.
This video podcast describes how to make visually detailed and interactive UI designs with Antetype. Each episode shows a different part of Antetype and explains how to use unique features like dynamic layout or the widget system. We will upload new episodes on a regular basis, so subscribe to stay up-to-date! The current series shows the design process of a Cookbook app for the iPad.
Don’t forget to grab the Antetype file created in the video.
We have just released to our Early Access Program (EAP) members a new build of Antetype with a set of bug fixes and a couple of small enhancements in preparation for a release of 1.2.1.
If you have not yet signed up for our Early Access Program – please do so.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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 firstname.lastname@example.org if you would.
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.
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:
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
This post will focus on the scaffolding and a follow up next week will look at the components.
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:
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 email@example.com.
UPDATE: Don’t miss our new post with Bootstrap Components