This article was published on February 23, 2011

ForeUI: A Mac app for designing website and UI mock-ups


ForeUI: A Mac app for designing website and UI mock-ups

ForeUI is an app for creating mock-ups, bringing your ideas to life through a wide range of design elements.

Whether its a user interface, a website or a mobile application, ForeUI can assist users in quickly pulling off an impressive preliminary sketch. The designs are also interactive and can be used to create working simulations.

ForeUI

ForeUI Content

There’s a large bank of items such as widget calenders, check boxes and tabs, but ForeUI also providers users with downloadable content created by the ForeUI community. As an example, users can download skins for the iPhone and can create app designs within a mock-up of the device. And, libraries even include tools like the iPhone’s native keyboard so users can quickly throw their app ideas together. Contributing your own designs is possible as well by uploading to the community resources within the app.

While moving around the content, the app enables you to easily straighten and line-up elements with a rule that’s overlaid on the screen. Aside from the guided positioning, users have a great deal of control over aesthetics. Each element provides a floating toolbar that offers property changes like background colours , opacity, layers and actions. We should note that these options will vary depending on the type of element.

iphonemockups

ForeUI Themes

Users can use various themes that will change the appearance of the overall project. The themes can give your project a hand drawn look which turns the content into rough pencil sketches. For designers developing software, there are additional themes including Windows (XP,7) and Mac OSX that will transform the look of the project to match the desired operating system. Wireframe, is the default theme and sports flat, thin grey lines and boxes.

Making a Mock-up

ForeUI’s user interface is extremely straight-forward and works by a simple drag and drop process. Thumbnail previews of the content or design elements we mentioned earlier, sits to the left of the screen readily available to drag into the project. Its user interface allows users to start creating immediately, and I was really impressed with the process and the myriad of design goodies.

For users that require working simulations, the actions are defined as events with the action editor. Let’s us say you envisioned a sexy widget for your site. Using the action editor, without any prior programming knowledge, events can be added to your widget.

Event types include the option to send messages upon a click, or trigger custom actions or links. Basically, users tell the editor what type of things the simulation should do (add action) when a user interacts with the element (add event).

After a few events have been added users can run a simulation to see the content in action. The pages, widgets and custom elements within a project will display the functionality of the events that were set within a browser.

ForeUI

Exporting Projects

To finalize the mock-up, the project can be exported as an image, a PDF document or as DHTML, an option that bundles your actions (javascript), images and CSS into one “clickable” package. The DHTML feature is the way to go, if you want to export your project with the working elements intact.

The Bottom Line:

ForeUI is easy to master and it’s a cool solution for quickly capturing ideas. If you’re a designer we can’t say this app will replace your current method, but coming from no experience with UI mock-up software, I personally found it user-friendly and I was surprised with the amount of content available, including the downloadable elements.

ForeUI is available for Mac OS X, Windows and Linux, and has a price tag of $99 for a an individual user. If you’d like to try it out, ForeUI offers a free 15 day trial.

Get the TNW newsletter

Get the most important tech news in your inbox each week.

Published
Back to top