Connect With WRD
feed via e-mail
feed via e-mail

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.

Lorem Ipsum is the most standard placeholder text used in mock-ups and wireframes.

It helps to not distract the user with content but focus more on the design and/or layout.


BLOKK, which comes as a font, is a nice alternative to Lorem Ipsum. It has no letters but generates (colored) blocks instead.

Such blocks definitely helps concentrating on the layout more and makes more sense for websites with non-Latin characters.

As a web designer/developer, I strongly believe in creating wireframes in the beginning of any web project rather than directly starting to work on the real output.

This not only helps understanding that you are on the right track with the customer but also usually pops out new questions regarding functionality which would normally be a problem if such questions had appeared after the project was built.

Artist Ideaboard

The Ideaboard is a non-virtual whiteboard that is not big in size so that we can carry it with ease (to meetings, parks, etc.) but also not that small so that we have enough space to work on.

And, there is a mini-version that requires less space and can fit into a laptop bag.

Besides the standard clean sheet, there are various templates offered:

  • website design template pack – includes browser and 2 browsers side-by-side (both use 960px grid), a grid-only one and a monthly calendar
  • blogger template pack – brainstorming sheet, to-do-list sheet, monthly and 2 months editorial calendars
  • whiteboard deluxe template pack – monthly calendar, 960px grid, brainstorming + to-do-list sheets 

The Ideaboard - Opened

There are also transparent overlays other than these sheets which are handy for working/discussing on the details of the layouts in those sheets. They are simply overlayed to those sheets and anything can be written + drawn over them or erased.

How to join the giveaway?

A mini ideaboard with ready-to-use sheets + transparency overlays and another pack of bigger-sized templates + transparency overlays is being given away to WRD readers so that you can get a chance to use the product.

P.S. For the winners, US shipping is included and international shipping belongs to the winners.

Creating wireframes in the beginning of any design process can help creating an output without any surprises.

Sneakpeekit is a website providing high-quality PDF sketch sheets for web designers.

Web Design Sketch Sheets

The sheets are compatible with the most popular grid systems like Less Framework 4, 978 grid system, 1140 css grid, The Semantic grid system, Bootstrap from Twitter, etc.

And, they are not only for the desktop browsers but there are versions for tablets and mobile as well.

If you are a web designer/developer who first creates wireframes for a web project, Wirefy will help you a lot.

It is a CSS-JS framework for creating responsive and cross-browser wireframe layouts very quickly.


Wirefy is style-agnostic so that clients won't get hung up on the look or colors but just the layout and -maybe- functionality.

The framework includes styles for all major web design elements like typography, grid, tables, images, forms, buttons, pagination,slideshow and more.

As the popularity of Android rises and more applications are being built for the platform every day, the number of development-related questions increase as well.

Android Patterns is a website which aims to bring a solution to the design-related questions by sharing widely-accepted answers (patterns) for them.

Android Patterns

The patterns are demonstrated in a wireframe and provided with descriptions of when and when not to use them, the pros/cons and screenshot examples.

There are main categories like "Dealing With Data" or "Navigation" and many sub-categories (questions under each).

P.S. If you have patterns that you want to share with others, it is possible to submit them as well.

Uptime Robot