Archive for the ‘Software & Tools’ Category

When creating wireframes offline, papers with grids help a lot to create outputs that look better.

Dotted Paper is just a free PDF file which makes wireframing/designing easier with the horizontal and vertical grid it has.

Although that is a simple resource and can be created with not much effort, it is very handy as it is ready to download : ).

Dotted Paper

Radi is a complete visual design application targeting web with 100% standard and human-readable HTML + JavaScript code.

It has built-in tools for creating/editing graphics (they can be imported too) and generating animations with <canvas> output that work in all modern browsers including mobile.

There are ready-to-use filters + effects and you can always add your own code to create more customized stuff.


The application is also pretty powerful in rendering video. It can even -very quickly- convert a web animation into a HTML5 video.

Radi has a very short learning curve as it is like a mixture of well-known image editing and animation tools but with the friendliness of web technologies.

While working on responsive websites, we quickly want to see how the layout reacts to different screen sizes.

Viewport Resizer is a very useful bookmarklet for responsive-layout-testing with few clicks.

Once clicked, it shows a list of popular screen sizes and we can see the websites in those sizes by simply pressing them.

Viewport Resizer

Its page allows us to create a customized bookmarklet that includes the sizes we want.

The orientations of various sizes are already set but there is also an option to manually change the orientation.

There is support for media queries and it is touch-friendly.

In the past, "few resources for sketching websites on paper with ease" was shared at WRD.

Here is a new one –Responsive Sketchsheets– that fulfills the need of sketching responsive website layouts by ZURB.

Responsive Sketchsheets

The download pack includes a single PDF file with multiple scenarios: "only mobile", "mobile and desktop", "tablet (with orientation)".

Also, another package is provided which includes the standard sketchsheets by the same company.

When designing websites and/or apps, sketching ideas can help thinking on ideas visually and ease discussing on them.

Interface Sketch is a pack of free browser sketch sheets for web, mobile and tablet.

They are available as PDF files, provided in 2 sizes: A4 + US letter and includes the most popular devices like iPad, iPhone 4-5, Nexus Tablet, Android Phone or Windows 8.

Interface Sketch