Fries (github) is a prototyping tool for Android devices. I think it allows you to spit out Android styled UIs just using HTML, JavaScript and CSS. Yes, it apparently plays nice with PhoneGap …

Description pulled from Github:

Fries is an awesome mobile development framework (yes, not just for prototyping!) for Android apps using just HTML, CSS, and Javascript and was inspired by Ratchet. We all know that you can find loads of iOS development tools out there, so this time let’s give some love to Android.

Credits: Jaune Sarmiento

RWD Wireframes (github) is a small scale, browser based wireframing tool for responsive layouts. The tool allows you to define a few containers and then determine their size, placement, layer order, and visibility for various screen widths (which of course may also be manipulated). Apparently once an account is created you may also share your work in the form of links. Oh and it’s open source as well so you may fork it and tweak it github style. Thanks Hao for sharing this innovative project and pushing some boundaries on version 0.0.1!

Credits: Hao Luo

Framer (github) is a modern prototyping tool. More concretely, it’s a lightweight Javacript based framework for creating and prototyping complex interactions (with animations) on various mobile devices. I haven’t tried it on a mobile device yet, but in Chrome at least (doesn’t work in the Firefox browser), the transition and animations do look pretty smooth as the author claims to rely on the GPU directly. So if performance matters to you and you’re up for some transition prototyping fun, why not give this opensource tool a try.

In Koen’s own words:

Many people already prototype in the browser. It’s simple and quick. But while html/js/css/jquery gets a lot done it has some downsides:

• It can get pretty complicated mixing all the different technologies
• It can be hard to get the pixel perfect control you want
• It’s not always performant, especially on mobile
• It’s pretty far from how it will be actually implemented if you prototype for native

Framer tries to solve some of these problems by providing a very lightweight framework modeled after larger application frameworks. The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.

Credits: Koen Bok

jKit is a new toolkit for jQuery, built by Fredi Bach from Switzerland, that I think has much to offer for those with HTML prototyping needs (the way prototyping is ought to be done I believe). :) The toolkit contains quite a few widgets, interactions and behaviors that help to enhance the UI while at the same time lowering the programming barrier to entry. Some of the many things that the toolkit allows for includes: a carousel, tooltips, form validation, zooming interactions on images, list cycling for styling, auto scrolling, etc, etc, etc. Anyhow, there is a lot more to it so have a look at the awesome examples and see if you it fits your needs for the next prototype you decide to build. Thanks Fredi for releasing it under an MIT license! Rock on!

In Fredi’s own words:

jKit was born in the summer of 2012. After developing almost two dozen jQuery plugins over the past years, some for myself and some for client projects at the company I work (deep AG), it was time to create something bigger and better, especially as we needed a frontend library at our company that was easy to use for our publishers and had the features we needed. But only after implementing the first few features, I started to see the real potential for this toolkit. With only about 1k per command, the plugin could add quite a lot of useful features without getting to big in size. It would meen for us that we could add this toolkit together with jQuery onto all our new client projects and easily have all the features we needed in 95% of all cases, with the benefit, that the API was easy to use and consistent. And now we’re here, with a really feature rich UI toolkit that meets our needs and gets better almost every day, mainly because we actually use it and hopefully because of the input you can give is for perfecting it more and more. I really hope you like jKit as much as I do, because at the end of the day we can all benefit from the knowledge and experiences of each others, getting this baby somewhere not even I imagine right now.

Credits: Fredi Bach (Twitter)

Design inspiration cards have been around for a while in various shapes and sizes with the intention to challenge and help us break out of our routines. Duncan, a product designer in the Netherlands, made a concepting card deck called Iterations which he released under a Creative Commons license. He also describes his process of building them in a blog post.

Iterations is interesting in that it focuses on the early ideation phase when designers are “concept sketching”. The cards have small tactical actions that inject some randomness into a design process, which might say “SHUFFLE Disorder components”, “LOOP Repeat last Iteration”, or “COMPRESS Remove excessive space” as an example. Most cards are clear and understandable, even if some are a bit abstract, such as “POSSESS Imbibe iteration with the spirit of a personal hero.” :)

Either way, a pretty interesting project I think even though it cannot be bought. You can still make it yourself if you read and respect the CC license.

Updated: Duncan informed me that there is also a free online version. :)

Credits: Duncan McKean

Blocks (github) is a HTML prototyping tool brought to you by EightShapes – the company that’s all about modular components. The JavaScript toolkit allows designers (code literate ones that is) to tag pages or the components within, for purposes of presentation and reuse. Such tagged HTML page prototypes then become listed in a table of contents so to say, along with all of the unique components on the side. Blocks is a presentation layer tool that sits on top of the prototype and can be turned on or off. The other core benefit or idea behind this is that instead of duplicating HTML over and over again, the toolkit instead also allows to reference HTML code and reuse it across multiple pages. Being pure JavaScript, it also looks pretty simple to implement.

One thing which I don’t see and think would still be nice to have is a way to tell stories across these listed pages and components. Right now, all of these assets are very much fragmented and require the designer to do the magic of tying it all together into a flow or narrative. I wonder how the toolkit would feel if there was a layer of visible use cases, scenarios or non-linear flows that could be attached over on top.

Nathan also shares an interesting article which compares HTML prototyping to other tools like Axure. I’d have to agree with Nathan on this one that working with HTML (and JavaScript) for prototyping has the definite benefit of being closer to the medium as opposed to abstracting it. Even if writing JavaScript functions is too much for a designer (although it can be learned), that also opens up a perfect opportunity to collaborate on the prototype with a developer. For me personally, prototyping is less about setting up clicks between all of the screens, as is more about being able to get to the right richness of interaction, data, or visual representation for a narrower set of screens. With HTML and JavaScript there is simply more potential to get to the highest level of detail possible in order to feel out a risky part of the product. That’s not to say, that more often than not, just the “clicks” are adequate and so many other “abstracting tools” work for a lot of people. Thoughts?

Either way grab and fork it from github. There is also a good video where Nathan describes the approach.

In his own words:

EightShapes Blocks is a toolkit for user experience designers to modularize, communicate, and deliver annotated HTML prototypes.

Credits: Nathan Curtis

Wirefy has been recently released by Christopher over at github. It’s a collection of functional responsive HTML snippets and templates which scale as you resize the browser (hence across devices). Hopefully beneficial to those who build HTML prototypes. Good work. Thanks a thousand for sharing.

From the website description:

Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don’t get hung up on colours, fonts, other design elements. It’s meant to be another tool for your development kit that provides the most basic styles as a foundation.

Credits: Chris Da Sie

A number of tools have recently sprung up with the aim of generating and maintaining one’s own CSS Pattern Libraries or CSS Style Guides. Living front-end CSS style guides can especially be quite powerful if done right. Guides help to decrease the amount of UI waste that is generated by minimizing the need for detailing similar screens over and over and relying instead on reusable elements. Detailed visual mockups still make sense for a few initial stylistic explorations. However, when teams over rely on detailed screens to communicate UI ideas, things start to duplicate, fragment and slow down. Living CSS guides are tools that could potentially work with wireframes, by placing common emerging UI elements and patterns into one shared place.

Here are a few interesting and emerging tools which I found that might help with starting your own CSS Pattern Library:

1. Pea.rs by Dan Cederholm (github) – a WordPress theme that basically turns your blog entries into interface pattern pairs of HTML & CSS. It comes with a few default patterns and the UI looks slick. The one disadvantage is that people would still have to transform the pattern library from WordPress into a real workable common.css file that could be used on a real project. So for maintainability, the pattern library and the actual CSS is a bit disconnected.
2. Knyle Style Sheets by Kyle Neath (github) – a documentation standard for writing more understandable CSS which auto generates a style guide. You start off by writing your CSS and then with some Ruby on Rails help, the CSS file can be automatically turned into a guide.
3. Pattern Response by Luke Brooker (github) – a PHP script that takes patterns defined from folders and generates a style guide. Each pattern can be composed of HTML, CSS and a potential description.
4. Pattern-Primer by Jeremy Keith (github) – also a PHP script which automatically generates CSS patterns.
5. Kalei Style Guide by Thomas Davis (github) – this project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks.

Credits: Dan Cederholm, Kyle Neath, Luke Brooker, Jeremy Keith and Thomas Davis

Foundation looks like an interesting open framework for building HTML, CSS and Javascript prototypes. It offers a quicker way to build prototypes as it comes loaded with code for grids, buttons, alerts, forms and error states, sliders (Orbit), and modals (Reveal). The project also feels like it has some github momentum. The makers of Foundation have also shown a few examples of their prototypes.

Have a look and see if it’s for yourself.

Credits: ZURB

PJ recently took another stab at making gesture icons more comprehensible and released Cue under Creative Commons. It’s a proposed system for representing gestures more clearly that makes use of thumb like icons. He explains his motivation for the project in a blog post as well. The icons come in PNG (4 sizes), SVG, Omnigraffle and InDesign formats. Awesome. It’s always great to see explorations in visual language. Thanks PJ!

Here is how he puts it:

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

Credits: PJ Onori