What do you get when you merge a pretty cool web based prototyping tool with some sketching capability? You got it – InVisionApp. These guys from NY have just launched a Sketch Commenting feature in their latest build. This now allows designers to express themselves more easily as words and pictures are more powerful together. They’re already awesome so no need to write anything else … “design on my friends” as they say. :)

Sign up for an account and give this tool a try (1 project always free).

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

InVision 2.0 is now out. Clark and his team have been hard at work redesigning and redeveloping the next iteration of this awesome web based prototyping tool. At the time of writing, this smooth thing has 77k active projects going on strong and some good reasons for picking up on its popularity recently.

Very Strong Team Focus

With 4.4 million comments left since its beginning, InVision takes design collaboration pretty seriously. This is definitely seen in version 2.0 and the team really understands that no one designs in a vacuum. Take the new project pulse view for example. This project dashboard so to say, gives collaborators a way to understand who has commented, what new screens were changed, what screens were added, and who viewed what recently. This awesome project glimpse can be contextualized in a flexible time scale of today, the recent 7 days, 30 days, 90 days or since the beginning. For those who prefer to understand when a project has been the most active, the same data can be viewed as a time graph under the project stats tab. The visibility of team behavior here, definitely helps to build a collaborative feel.

Each project also very clearly shows its team members in the top right. The faces of the people you are working with on a given project are now visible which humanizes the sometimes distant remote design process. Each person also has a dedicated profile view with their project and a corresponding activity stream. Score!

Care about comments? The new comments tab lists a chronological discussion view of all the things that have been discussed, with the comments contextualized nearby little visual snippets – context is king and a picture is worth a thousand words. What’s more is that these comments are also keyword searchable and actionable. The comment-email integration is thought through giving users the ability to reply to them (and interact with the team) directly from within their email clients.

Smooth Performance

Although I haven’t noticed a difference, the InVision team claims that everything on the front end has been rewritten with the intention of speeding things up. I always thought it was pretty quick anyways and never had any delays with it. 2.0 is smooth as smooth can be.

Other 2.0 Goodies

The change-log of the latest version also indicates that a few extra hot things have made it through as well. These new features include: bulk actions, device staging, anonymous sharing, user testing mode, dev notes for hand off, and real time pushing. Overall a solid release in my view!

Have some work that needs to be shared with a team, or need to build an awesome web prototype mockup? Then give InVision 2.0 a shot. Yup, the first project is always free!

PowerStory 2.0 for Powerpoint has just come out. For those of you not familiar with PowerStory, it is a plugin for PowerPoint that merges use cases, wireframes and storyboards into what is called a “Use Case Storyboard”. The interesting approach to the tool is its intent to bring agility to these traditional deliverables by combining them into one integrated deliverable, which also looks like it improves requirements communication and collaboration. Oh and one cool feature is that it also generates test cases which not only saves you some testing budget, but would support iterative and agile development teams.

The main advancement with PowerStory 2.0 over 1.0 (which I reviewed here) is the addition of a UI Library of 250 standard controls that cover the web, mobile and desktop applications. This new library is also extendible allowing you to create your own custom controls along with import and exporting sharing capabilities. This means you are not limited in the UI/UX look and feel you are after, and could also create a standard library of UI Controls for your project if needed. The move should now make it a much easier for UI designers when making Wireframes using PowerPoint. The nice thing about using PowerPoint is that everyone knows how to use it and it is good for walkthroughs. There are some nice features within PowerStory that make it easier to walkthrough your storyboards by giving you context of where you are. You could use this tool to create traditional linear presentations or take advantage of its “use case” based storyboards which essentially allow you to create alternate flows. This should help reduce the duplication of UI Wireframes across storyboards.

In terms of the test case generation, this is rather unique and a great time saver. The test cases generated can be exported into MS Word, MS Excel and MS Team Foundation Server.

Are you a BA, UI, or UX designer? Give PowerStory 2.0 a try.

Credits: Martin Crisp

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

Tired of Lorem Ipsum content phrases? Here comes BLOKK font to help you out. It replaces all text with blocks to suggest generic text. Designed in Norway by Tom. Simply awesome. Available in TTF and web fonts.

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Update: also check out the related Redacted Font project by Christian Naths.

Credits: Tom Arne Bakkemoen

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)

Indigo Studio, a new interaction design tool, has been released just over a month ago by the Infragistics team on both MAC and Windows. The first version is completely free and there is no catch (future versions 2 and on will be paid). It has some interesting aspects to it:

Storyboarding

The tool itself is interesting in that it has two modes of working: screen and storyboard. The screen mode allows designers to express the position and layout of typical interface elements in a traditional sense – pretty standard for a modern UI prototyping tool. Storyboarding mode however allows designers to work at a higher level of abstraction and see the bigger picture with multiple screens in view. Here the designer is given the opportunity to think bigger than just screens as the links between them come into view. Additionally, stepping beyond just screens, Indigo Studio comes preloaded with helpful sketched out real world “scenes” of people using various devices in various context. This sets the tone to think beyond just the UI.

Interactions

Once elements are laid out, Indigo Studio allows designers to express a set of interactions or events that tie screens together into a clickable prototype. Interactions can be attached to various elements or plain hotspots (helpful if you simply wish to upload JPGs or sketches from another application). Typical interactions include such things as when a user: focuses, double clicks, focuses, changes a field, or right clicks.

Screen States & Transitions

Screens in Indigo Studio have been elaborated to include multiple states that offer a helpful way to reuse elements across a more complex situation. For example, placing an element (or making changes to it) on the first state of a screen will automatically duplicate the element (or changes) across all of its states. Of course secondary states can also be modified to incorporate unique changes as a result of interactions. All screens and screen states can also be tied with handy transitions whose delays and durations can be defined as well.

Sharing and Feedback

Additionally, all prototypes in Indigo Studio can also be shared online for further comments and feedback. Sharing a prototype generates a useful link which can be sent to the team.

Indigo Studio looks pretty solid for a first release and I’m curious what future versions might bring. Ready to see if it works for you? Give it a try.

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