Free and Easy Wireframing with

wireframe mobile

Maybe we should start with what wireframing is! Wireframing is a means for designers to rapidly prototype a skeletal layout to a page. Wireframes display the objects on the page and their relationship to one another, they don’t do not display the literal graphic design incorporated. If you really want to make your designer happy, provide them with a wireframe of your request!

Folks use everything from pen and paper, to Microsoft Word, to advanced collaboration wireframing applications to design and share their wireframes. We’re always on the lookout for great tools and it seems our developer, Stephen Coley, found a great minimal one that’s free to use –

wireframe-cc has the following features

  • Click and drag to draw – Creating elements of your wireframe couldn’t be easier. All you have to do is draw a rectangle on the canvas and select the stencil type that will be inserted there. You can do that by dragging your mouse across canvas and selecting an option from a pop-up menu. If you need to edit anything just double-click it.
  • Super-minimal interface – Instead of countless toolbars and icons that we all know from other tools and apps offers a clutter-free environment. You can now focus on your ideas and easily sketch them before they fade away.
  • Annotate with ease – If you want to be sure that your message gets through you can always comment on your wireframe. Annotations are created the same way as any other objects on the canvas and they can be turned on and off.
  • Limited palette – If you want your wireframes to be crisp and clear you should keep them simple. can help you achieve that by offering a very limited palette of options. That applies to color palette and the number of stencils that you can choose from. This way the essence of your idea will never be lost in unnecessary decorations and fancy styles. Instead you will get a wireframe with a clarity of a hand-drawn sketch.
  • Smart is trying to guess what you intend to draw. If you started drawing a wide and thin element it is more likely to be a headline rather than a vertical scrollbar or a circle.Therefore, the pop-up menu will contain only icons of the elements that can take this shape. The same goes for editing – you are presented only with options that are applicable for a given element. That means different icons in a toolbar for editing a paragraph and different for a simple rectangle.
  • Wireframe websites and mobile apps – You can choose from two templates: a browser window and a mobile phone. The mobile version comes in vertical and landscape orientations. To switch between the templates you can use the icon in the top left corner or simply resize the canvas using handle in its bottom right corner.
  • Easy to share and modify – Each wireframe that you save gets a unique URL that you can bookmark or share. You will be able to resume working on your design any time in the future. Every element of your wireframe can be edited or even transformed into something else (e.g. a box can be turned into a paragraph).

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.