Create Stellar Prototypes with Antetype

There are so many among us with a ton of ideas for the next Facebook, Twitter or Instagram. But, ideas are practically worthless unless you have at least a prototype in place. If you think it would be a good idea to entrust someone to make your vision for the app to come true, you are definitely mistaken.

If you are a designer by profession, then you already know the importance of a prototype. Prototypes help build a minimum viable product quickly and lock the user interface down without any ambiguity. Antetype is one of the market leaders in Mac prototyping apps and after the break let us check out how to make it a valuable part of your design workflow.

Overview

Antetype is a rapid prototyping app that offers a range of layout modes that allow you to create highly flexible and dynamic layouts. The widget library included with the app provides you with a complete set of ready-to-use widgets to get you started quickly with your prototypes.

User Interface

User Interface

User Interface

Antetype comes with a split window interface. The canvas to the right is larger and the all powerful widget library is located to the left. The layout is clean and even with so many design elements, it doesn’t overwhelm the user at first glance or while designing a prototype. You can resize and close out each of these windows as you please.

Antetype is fullscreen capable and in this mode the canvas fills up the entire screen with the widget library floating to the left of the screen.

Getting Started

Design Templates

Design Templates

To make things easier, Antetype comes loaded with templates for the popular design platforms – Android, iOS, Windows 7, Mac OS or a regular wireframe. Each of this template has all the design elements in the style that is signature to the platform. You are not restricted to these templates alone.

You can easily create a new template from scratch and mix and match widgets of your choice. I decided to try my hand at creating a iOS app prototype for this review.

Creating a Prototype

Creating a Menubar

Creating a Menubar

To start building an iPad app we need two main elements – a toolbar at the top and a menubar at the bottom. Both these elements had a couple of buttons already to make things further easier for us. In the case of the menubar, I tried to copy and paste the menubar button multiple times. I was successful at creating duplicates of the menubar buttons, but wasn’t able to space them out as I wished.

I dragged and dropped a single menubar button from the widget library and was glad to see that I was able to place it wherever I pleased. The icon and text of the buttons can be changed by double clicking on them.

Customizing the Menubar

Customizing the Menubar

From background texture to buttons, sliders and labels, I played around with almost every aspect of iPad design and I was able to put together a prototype (a rather ugly one, I agree!) within a few minutes. I loved how the buttons and labels wrapped around if the text spilled from the original size.

Style Inspector

Style Inspector

Every single pixel of the design can be customized from the Style Inspector. And once you chisel a widget to your tastes, you can lock the design and alter the gradients as whole. For those working on complex designs, the stacked layout mode will help overlay your elements on top of each other and lets you control their alignment to boot.

Sharing the Prototype

A Sample Prototype

A Sample Prototype

Sharing the prototype with team members or clients for feedback is a vital part of the design workflow and Antetype offers a few brilliant choices. In addition to letting you export the design in PNG format, the app assists you to create the web viewer version of the design for people who don’t own a Mac.

Export Options

Export Options

The presentation mode is perfect if you plan to showcase the design fullscreen via a screencast or a projector. All elements of the design work together in tandem like a real world app in this mode.

Final Thoughts

I am not a designer by trade. But, I do have a few ideas (worthy and otherwise) for both mobile apps and the web. It would absolutely suck for a design novice like me to give exact instructions to a professional designer. Even if I did, I’m sure I’ll land on this blog, for so many pointless suggestions! When I had the chance to review Antetype, I decided to evaluate the app based on how easy it is for a design illiterate like myself.

Based on their short video demo and the clearly explained descriptions in the homepage, I was confident that Antetype won’t be very difficult to use. And after a couple of hours not only did I get a grasp of the functionality, but also really enjoyed creating mockups just for fun. Since it takes very little time even for a newbie to start cracking, I have no doubt experienced designers would find their productivity increase exponentially with Antetype.

The one thing that I could point out as a shortcoming is the price. At $289, the app isn’t cheap but the full featured demo version should help you determine if the app is worth the price or not.

 

Leave a Reply

Your email address will not be published. Required fields are marked *