Multi-Device Layout Patterns

April 30th, 2012

Multi-Device Layout Patterns
Multi-Device Layout Patterns is a short compilation of a few common layout patterns by Luke Wroblowski after he has gone through the Media Queries site. The article contains 5 high level layout considerations that could work for when dealing with responsive wireframes. A great inspirational read for those who like to respect flexible screen widths.

Credits: Luke Wroblewski

Job Postings

April 25th, 2012

Putting my commercial hat on I’ve just started a Jobs section experiment on this blog. Why not? To start off and populate a few listings, the first five posts will be free. So if you have a job you would wish to advertise, please email me: the company name, job title, link to job description and a location and I’ll post it. Cheers. Jakub

Justinmind Prototyper FREE 1.0 and PRO 4.5

April 24th, 2012


The other month, Justinmind Prototyper went ahead and split their pricing plans into two, with a paid pro and a free version. As a refresher, this is an advanced prototyping tool allowing for such things as rich interactions, data simulation, variable based and conditional rules (for both Mac OSX & Windows). They have also shared a few of their prototype examples online.

The Free edition is slightly lighter but still should be able to satisfy many designers’ needs. It comes with access to a wide library of iPhone, iPad, Android and web based widgets. Some useful widgets include: buttons, phone icons, date and time pickers, switches, status bars and keyboards. If those are not enough, users can also create their own libraries. Prototyper also allows the running of an interactive simulation after screens have been linked up. Other beneficial features might include grid controls, snap to grid and resolution guides. Finally, the Free edition also works with the subscription based Usernote online platform (for a monthly fee) which has now also officially left beta. The Justinmind Usernote service lets users publish, share, run tests and obtain feedback on their work in a collaborative way.

As for the latest and the greatest in the 4.5 Pro version, there have been some usability improvements as well as a few new features. For one, Prototyper now allows designers to organize work in layers (Photoshop hide and show style). Furthermore, the latest version also now allows multiple users to work on the same file together. In other words, these guys have built in support for performing file splits and merges. Pretty cool.

That’s the latest and greatest from this company. Download Justinmind Prototyper and give it a spin.

15 Dribbble UI Sketching Designers

April 23rd, 2012

Dribbble UI Sketching Designers
There are those who design, and then there are those who design in the open – enter dribbble.com. Although sharing a 300 by 400px image perhaps might work if you want to show off a shiny button style, maybe it isn’t always the best constraint for interaction type of work (flows, multiple screens, scenarios and stuff in between the screens). Nevertheless the other day I was looking through dribbble.com out of curiosity for some designers who might be doing a bit of UI sketching type of work. I guess I always find it interesting to look at how others sketch. Here is a bit of a list (including myself at the bottom) for those who might be interested. :)


Interface Origami

April 16th, 2012

Interface Origami
Juan has been recently playing with paper in order to explore some possibly new interactions. This person is trying to pinch, tear, flip, curl, fold, and peel UI’s in new ways just for kicks without the limitations of pixels. In a way this kind of stuff resembles paper prototyping a bit but probably focuses more on discovering new gestures. Either way, it’s an awesome way to think outside the box in my opinion, as tactile play breads creativity. Thanks for sharing!

In Juan’s own words:

In a previous post, I mentioned a way of thinking about interactions and interface within a framework of depth and space. The ideas were centered around the digital space, but as a designer I find it’s important to remove myself from that space and explore solutions that can originate in physical space.

One of the easiest ways to do this is to break out scissors and paper. With paper you can remove the constraints of working in pixels to fold, tear, flip, curl and manipulate the medium to discover solutions that may have otherwise been missed.

To illustrate this, I created a few examples based on some familiar apps and others based on former concepts I’ve played around with in the past.

Credits: Juan Sanchez

Foundation

April 10th, 2012


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

InVisionApp: Starter Plan Now Live (1 Free Project)

April 3rd, 2012

InVisionApp: Starter Plan
The InVisionApp team over in NY just readjusted their pricing model to now allow the awesome Starter Plan. This little plan now includes one free active project, unlimited screens, and unlimited collaborators. A pretty cool way to give designers an opportunity to feel out the app for more than 30 days.

As a short reminder, for those who might not know what InVision is, I’ve written up a quick review of their prototyping app a few months ago. It’s a great tool for gathering feedback on sets of linked up screens. Enjoy!

Give the Starter Plan a try right here.

Speech Bubble User Flow

March 29th, 2012


The Speech Bubble User Flow by Barnabas, is a hybrid representation that combines a sitemap, persona and user flow all into one. The idea starts off by overlaying simple and short comments made by a persona in the form speech bubbles on top of a structured sitemap. More so, the speech bubbles are ordered chronologically and so flow through one by one. In the built Axure Demo that has been generated, the sitemap pages are also linked to the wireframes which makes it easier to switch from the generic to the specific. Barnabas has been exploring Personas that “could talk” in a few other forms as well, as the Complex Speech Bubble Persona and the Commented Sitemaps show.

My take on this deliverable would be that Personas can sometimes get lost once a project builds momentum. Possibly what Barnabas is doing is helping the Persona to live a little bit longer and inspire the team a bit more as the Persona’s comments pop up throughout the project. One thing I do wonder about is how this would work though if there was a second or third scenario for the same user type, as sometimes I feel that interactive projects are composed of many little separate user stories and not just one. Either way, good stuff and thanks for sharing!

If you would like to tweak the deliverable, the author has been kind enough to share the actual source Axure file as a downloadable template.

Credits: Barnabas Nagy

Axutopia – Axure UI widgets

March 21st, 2012

Axutopia
From the maker of Keynotopia, now comes Axutopia. This is a wide collection of Axure widgets and icons that can be used for prototyping, wireframing and UI design purposes. The whole thing can be purchased as a bundle, or libraries are also broken up individually. Sets are available to style: iPhones, iPads, Windows 7, Mac OSX, Web 2.0, Facebook, Blackberries, Android, and Windows Phones. Here are the details:

  • 3,000+ Axure widgets
  • 100% Royalty-free icons
  • Fully editable text labels
  • Pixel-perfect PNG groups
  • Preserved corners with transparency
  • Comes in .rp and .rplib formats

Get It Now

Credits: Amir Khella

Proto.io V2 – Silly-fast mobile prototyping

March 15th, 2012


Proto.io V2 is here. Since the last review, within a few short months these guys managed to release the next version pretty quickly. The new release has a newer UI with some improvements (ex: bigger and clearer buttons for the 3 core sections: Screens, Templates & Containers). The supported mobile devices have also been expanded to accommodate for the Android platform, and now include the following:

  • iPhone 3/3GS/4/4S (320×480)
  • iPhone 4/4S (640×960)
  • iPad 1 and 2 (768×1024)
  • Android Smartphone (480×800)
  • Android Tablet (800×1280)

More importantly, version 2 now also allows HTML exporting. So considering some developers use PhoneGap which takes in HTML as input, it’s now easier then ever to create standalone and deployable prototype apps. Cool stuff!

Decided to embed their awesome promo Vimeo video for a quick high level overview. :)

Visit proto.io to give it a try.