Take Me Home

Enterface: UI Design Tool 2012

image desc

Enterface is an app for creating polished, production ready, pixel-perfect, multi-page, multi-state mockups of user interfaces. It attempts to bring the best features of apps like OmniGraffle, Fireworks, Illustrator, InDesign, Sketch, Keynote, and Antetype together into one cohesive app specifically designed for creating user interfaces.

image desc image desc image desc image desc

Dynamic Layouts

With Enterface, you can quickly create a page full of elements that fit and flow together, rather than manually positioning each object. For example, you can take a bunch of form fields and stack them automatically by creating a vertical group. Then you can easily change the margin between each form field.

Here's another example. You have a container element, and two sub-containers. The sub-containers are inside the container, and the container has padding of 10 pixels, so the sub-containers are automatically inset 10 pixels. You can make the height of these sub-containers to be 100% of the space available inside the container, so when you change the height of the container, the sub-containers change height too. The width of the left container is set at 200 pixels and the right container is set to 100% of the remaining space. If you want to check out what the layout would look like without the left container, you can just collapse it, and see the results. The right sub-container fills in the newly vacated space.

Clones

Related to dynamic layouts are clones. You can take an object and then clone it any number of times, up, down, left, or right. Each clone is an individual object, but remains aware of its connection to the "parent". So you can make a table row, then clone it down ten times, and you've got a table. Then you can decrease the height of the parent, and the clones follow suit. Or you can edit a clone's fill to show the rollover state for a row. It's all possible thanks to the miracle of cloning.

Styling

Every shape and vector object in Enterface can be fully and non-destructively edited. You can fill objects with a solid color, a gradient, or an image. And then you can overlay a texture if you wish. No masking required! Enterface comes with built-in modules for creating common textures like stripes, noise, and polka dots. You can also use an image. The texture's opacity and blending mode can be set separately from the fill.

Enterface lets you edit the border of each side of shapes independently. You can make borders thick and thin, solid, dashed and dotted, and change their opacity too.

Corner roundness can be set on a per corner basis.

Oh, and we've got drop shadows and inner shadows, too.

Presets

If you make a shadow (or a fill or anything else) that you like and know you'll be using again, you can make a preset. You can then apply that preset to any object you want. No need to ever make a 1-pixel bevel again!

Colors

Colors are cool in Enterface. When you click a color swatch, you get a generous complement of swatches. You can select one or you can use Apple's color picker to get really specific. Either way, once you use a color in your document, it gets added to the document's colors library. You can then edit the colors if you wish. So if you're using a certain purple in links, in buttons, in gradients, and the client decides they want to go with indigo instead, you can just change that color, and all your objects and motifs are updated instantly.

Modules

Modules are basically reusable groups of elements (though they can be just one element, too). You could make a module of a dropdown menu, for example. With Enterface's dynamic layout tools, the module can be made so that you can squash and stretch the menu, and the triangle is always right aligned. Let's say you've added dozens of menus throughout your document, and then you decide you want to change the triangle to a chevron. Just edit the module and all its instances update throughout the document. You can also edit the styling of elements in instances of modules without breaking the link to the module.

States

Everything in an Enterface document can have states. States are things like "rolled over", "clicked", "disabled", et cetera. You can make as many as you need and name them whatever you want. You can view an entire page in a different state, or set individual modules and motifs to be a certain state.

Pages

Documents in Enterface can have multiple pages. Pages can be grouped in folders, rearranged, and renamed. Each page can be an island unto itself, or it can share layers with other pages. Speaking of which...

Layers

Pages are composed of layers. Each layer is an independently operating collection of objects. So you can have your interface layer stacked on top of a background layer, and put a layer of client notes on top of everything. And if you want to use the same background layer throughout your document's pages, you can share it. Now the layer is viewable and editable from every page you selected.

When you click on an element in the hierarchy, it doesn't select the object on the canvas. That way, you can manipulate the hierarchy without affecting your work area. If you want to select the object proper, you just click its selection icon. You can also lock layers and objects, so they can't be selected. You can hide or collapse an object from here, too. And finally, you can view layers or objects in Isolation Mode.

Flyout Tool

We've all been there. The 10 pixel square you want to edit is nestled deep among a bunch of other objects and layers. The Flyout tool is here for you. Just select the tool on the toolbar or hit F. Then click in the general vicinity of the object you want to edit. Every object in a 100 pixel radius will "fly out", allowing you to easily grab the object you want. Once you select the object, you enter Isolation Mode, so you don't have to worry about losing it again.

Columns and Guides

With Enterface, columns and guides are just like any other object. You can add a column object, and then it set to fill, say 100% of the canvas, allowing for the canvas's padding of course. Then you can edit the number of columns and make them horizontal if you wish. And since columns and guides are just like regular objects (except they can only be selected with the Columns tool), you can put a bunch of them on a layer, then share that layer to all your pages.

Export

With Enterface, you get a lot of options for exporting. You can export your pages, or individual graphics. With pages, you can select which pages you'd like to export. You can export vector files or pixel files. You can export at a different scale, so you can instantly creating retina (or standard resolution) ready graphics. And you can export each page in a different state.

You can also export images, which spits out all your vector shapes, all your icons, all your linked images, all your layered fills. Between the CSS that Enterface provides, and the option to export images, you're good to go when it comes time for development.

Take Me Home