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.

 


Summary

Antetype is a rapid prototyping app that offers a range of layout modes that allow you to create highly flexible and dynamic layouts.

8
  • B30

    Nice price tag, huh!

  • Guy Einy

    I have actually found Adobe Muse to be a wonderful tool for wireframing, prototyping, and some cases even development.
    You do not create a prototype, or a wireframe – you create an actual working HTML site, with amazing ease and comfort.
    The plan view is priceless.
    I recommend you give it a try.

    • josepsgk

      I agree with you. The problem with muse is that is based on AIR. This means that you don’t get the feeling of a native App… it feels slow.
      For prototyping Antetype is faster and more stable.
      And it’s very easy to change between flavours soy you prototype once and get the feeling on OSX, iOS, Android, Windows…
      The advantage of MUSE is you can recycle some code (not many).

  • http://techinch.com/ Matthew Guay

    And here, based on the icon, I thought it would be a CAD tool for rapid prototyping of physical objects. That’d at least make the price seem a bit more reasonable…

  • Tim

    Fireworks is also a good tool for wire framing/prototyping, as well. Its symbol libraries make updating elements really easy.

  • Oisin Daly

    With respect to them, they do offer an Educational License for US$49 (I’m surprised that wasn’t mentioned in the article). So if you qualify (and I most certainly do), it sure beats paying the full price.

    http://www.antetype.com/store-apply-educational.php

  • http://www.chungliwen.com Matt

    I actually use Keynotopia, it’s cheap and good for my needs, and I can demo it on my iPhone/iPad too. My boss was amazed when she thought I coded the thing myself :p

  • Pingback: Design After Fireworks « The EchoUser Experience | Thoughts and stories from our work and otherwise. Enjoy.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow