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

Posts Tagged ‘Prototype’

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 »

Let’s consider an equation, where A is success and B is your freelance enterprise or small business. Then: A – B represents everything that’s currently going wrong with your company.

For designers who just started a small agency, most of the issues turn out to be of an administrative nature. Creative people just aren’t very skilled at tackling the managerial challenges that arise when they’re launching their first business.

Here’s how you keep a healthy company: you recruit web apps that help you manage time + finances + projects, and which boost your e-mail marketing campaigns, form building, and file sharing.

Invoicing and Financial Apps


Everybody wants to get to the very top, but not all entrepreneurs are willing to find out exactly what that entails, and then put in the effort to get closer to their goal, inch by inch. In a sense, that explains why some small companies register big financial losses instead of making profit. That being said, there are several cloud-based apps that can sort out your accounting issues.
Read the rest of this entry »

  • Tags:
  • Filed under: Tools
  • Marvel is a free, web-based tool for creating prototypes for any device: desktop, tablet, mobile and more.

    The app works by synchronizing with your Dropbox account which simplifies updates (as local file updates are instantly reflected to the Marvel-powered prototypes).

    It accepts both images + PSDs and prototypes can be shared with unique URLs, SMS or QR codes.

    Marvel Prototyping App

    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.

    Framer is an open source framework for easily building and testing complex interactions + rich animations for desktop and mobile layouts.

    It is built with web technologies and works by simply editing a JavaScript file with the functions provided.


    The layouts created are structured with views (like layers), there are animations provided and everything can be styled with either JavaScript or CSS.

    And, for the interactions, there are events to the rescue (like click, dblclick, mouseover, mouseout, keydown or touch events).

    Ratchet is an open source toolkit for easily prototyping iPhone apps using web technologies (HTML, CSS and JavaScript).

    It has lots of iOS-looking components like buttons, forms, bars, lists, toggles, sliders, etc. that can be inserted to the prototypes with few lines of code.


    The download package is just the template files and the components library. Creating layouts is very easy and their look can be customized with CSS.

    Ratchet is very well-documented and has lots of new features to arrive in the future.

    EZ-CSS is a lightweight (only 1kb) CSS framework for easily creating table-less layouts.

    The framework enables you to create multiple columns of any width, with or without gutters of any width.

    EZ-CSS Framework

    EZ-CSS is very flexible:

    • each module or layout contains a width-less container which prevents rounding issues or rounding errors.
    • it creates self-clearing containers which means every box will contain floats.

    As EZ-CSS has a very small footprint, it can be fully inserted into any stylesheet or a style element which would make it compatible with every other CSS framework too. is the most widely used add-on for the Prototype JavaScript Framework with the features like animations, drag'n drop, Ajax control & more.

    Its second version, renamed as Scripty2, is out with a complete rewrite. It is lightweight (5kb compressed), flexible & works faster.


    The library is currently in alpha status & there are still parts that need to be developed or improved. On the other hand, it is very promising & already being used by several big projects.

    And, besides the Scripty2 homepage itself, the demos show how it will be empowering Prototype JS.

    ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.

    The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.

    Multilevel Hover Menu

    The hover class used & delay effect of the menus can be customized with ease.

    It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.

    For demos with various number of of levels & delay effects, click here.

    JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser.

    It is implemented totally in JavaScript and uses SVG and VML.

    JSXGraph - JavaScript Charts

    A graphic can be created via:

    It supports many, basic to advanced, mathematical functions that make creating complex visualizations easier.

    P.S. JSXGraph requires Prototype JS library to run.

    Uptime Robot