Posts Tagged ‘Wireframe’

Not every designer loves prototyping but it is a huge part of the creative process. Learning how to prototype on paper can be a great start, but it’s not always the easiest method. Software and webapps have been created to make the process easier for wireframing interfaces and drafting prototypes or storyboards digitally.

Take a look at these tools and see if anything catches your attention. Getting started with prototyping is much easier than you would think! Just like any skill it requires patience and lots of practice. Some of these products are free while others offer a free demo/trial account. But even if you don’t like prototyping on a computer you can always go back to drafting on paper.

Frame Box

framebox lightweight wireframing tool

Read the rest of this entry »

Responsive Wireframes is a free and web-based tool for quickly creating wirefames for any project.

It enables us to insert elements, style them (color, opacity), add text and also resize if wanted.

Responsive Wireframes

These elements can be re-positioned with drag ‘n drops and the work can be saved for future reuse.

The tool is focused on responsive layouts as we can define multiple viewports and decide how each element will look on different viewports.

This again work by positioning + resizing each element for each viewport and simplifies the sharing of “responsive ideas” a lot.

Indigo Studio is a free tool for quickly creating prototypes of web, mobile or desktop apps.

The application works on both Windows + Mac OS X and not only capable of generating static outputs but also supports interactions (links, animations, etc.).

Usually, prototypes can look plain and customers can have difficulty in imagining how things would look in real life. Indigo Studio solves this by providing lots of storyboard scenes with people, places and various devices to create a more realistic look.

Indigo Studio

It is also possible to import hand-drawn sketches into the application and adding interactivity to them.

Indigo Studio is a pro quality yet free application and only requires a free membership to the site.

Few days ago, a post at WRD had featured BLOKK (a font as blocks) and here is a similar resource with a difference.

Redacted Font is an open source font which is inspired from BLOKK but has a script version besides the block.

The script version is available as regular + bold and the project is so useful when wireframing.

Redacted Font

When working on web and mobile designs or wireframes, anything that can ease creating these layouts are highly welcomed.

GUI Toolkits is a very large collection of user interface components that has sets from mobile to desktop apps.

GUI Toolkits

There are 9 toolkits offered: iPhone, iPad, Android, BlackBerry, Facebook, Web 2.0, Mac, Windows and Windows Mobile apps.

Each of them consists of hundreds of vector shapes and icons that empower anyone (with or without design skills) to create mock-ups and clickable prototypes.

Every toolkit has versions for wireframing + production and, once purchased, any upgrades are free for lifetime.

GUI Toolkits Wireframing

And, GUI Toolkits come with the file format anyone get used to work with as there are versions for Illustrator, Fireworks, Visio, PowerPoint, OmniGraffle, Axure RP Pro and Apple Keynote.

Each toolkit can be purchased separately or a bundle that consists of all the items exists for a good price (which is handy for anyone regularly performing web design tasks).

GUI Toolkits iOS

In order to create faster, get your toolkit at GUI Toolkits now.

How to join the giveaway?

There are 3 bundles (includes all 9 toolkits) being given away and winners will be able to choose the file format they prefer.

In order to join, you can do one or both of the following to increase the chances:

  • leave a comment stating the toolkit of choice and the platform (Illustrator, Keynote, etc.)
  • share this tweet about GUI Toolkits
Winners will be selected a week later (20 Feb 2013) and announced in this post. Good luck to all.