Do you find you’re sometimes designing or building out pages and wish you could start off with a template that has a proven conversion track record? Here is something for you. GoodUI Fastforward is a set of our best performing UI page templates with a sharp focus on conversion.

Now keep in mind that we’re continuously striving towards making the templates better as we learn from running a/b tests on an ongoing basis. When it comes to conversion, we continuously tweak and improve and therefore the pages within contain a change history on the second page of the PDF.

Of course we also understand that one size does not fit all and so we also offer each page type in flexible and editable formats such as: Balsamiq, Illustrator and Axure.

Speed up your design process and get GoodUI Fastforward where you’ll receive a full year’s worth of updates to all current and future page types. We have coherent pages which help you raise metrics such as: sales, trials, quotes, etc.

Get GoodUI Fastforward

Credits: Jakub Linowski

What if you could create a complete set of amazing wireframes in just a few hours? What if you could make these wireframes behave like an actual app so that users can click through them? And what if you could not only click through them, but also simulate touch and swipe gestures, page transitions and test how a mobile app reacts when the user tilts or turns their phone or changes their location?

Berlin-based Pidoco has just released a set of new features which allow designers, analysts and UX folk to prototype a vast range of interactions in their wireframes in order to simulate realistic interactive behavior of future applications. Pidoco’s “Extended Interactions” work on both stationary PCs and mobile devices like tablets and smartphones and thus allow designers and developers to test drive applications in a realistic setting at an early stage.

Wireframes are built in the web browser, but can be simulated on iOS and Android devices using the Pidoco App. Users need no programming knowledge to use Extended Interactions, since you can define them easily via a convenient “Interaction Dialog”. All you need to do is select from a variety of options a trigger (e.g. swipe, pinch, click, hover, device flip) and the corresponding reaction (e.g. show a new page, display a pop-up, slide in a new screen, play a sound or even place a call).

A screen section called “My Interactions” allows users to manage interactions, which makes it easy to copy an interaction to other elements or find elements that share the same interaction.

In addition, Pidoco offers a number of other features which make it a great tool to work with, such as real-time collaboration à la Google Docs, a commenting and discussion feature, different types of templates including so-called “global layers” that work like layers in Photoshop, an automatic specification document generator, various export options, a wide selection of UI elements and icons that you can expand by uploading your own images, versioning, an issue tracker, an API against which you can write your own code, and much more.

In light of its latest release, Pidoco is offering a special deal to all Wireframes Magazine readers. You can now sign up for a free trial and get 50% off on all annual Pidoco plans purchased before August 15, 2014, using the promotion code wm2014.

pentotype is a new drawing software that lets you create clickable wireframes on your iPad or on your desktop with a graphics tablet. Since drawing sets virtually no limits, you can create any interface that you want, be it a website, a game, or a regular application with a custom UI. You can quickly share ideas with your team and see how the user will walk through your app.

Drawing

When you start a new project in pentotype, you’ll get an empty, infinite canvas. After inserting a new screen, either by selecting it from the side bar or just by drawing a rectangle, you can go ahead and draw your design. The features are simple so as to keep it low-fidelity: 5 colors for the pen, 3 font sizes for text. All elements of your drawing can be moved, deleted, copied, or saved as a stencil, so pentotype makes it very easy to create wireframes and apply changes. Available wireframe types are phone, tablet, and website.

Screenflows

By inserting more screens to the document, you can create a whole screenflow. Along with drawing the UI of the screens, you also draw the interaction between them: Just draw a line between an element and another screen, and you have immediately created a link. The kind of transition is automatically recognized (e.g. a slide transition between neighboring screens) but can also be changed.

Simulations

After you have drawn your wireframe, it can immediately be tested with functional links, transitions, and scrolling (in website wireframes) – just hit the “simulate” button. In order to send the simulation to your phone and view it there, just scan the QR-code. To get an idea of what this can look like, try out the example appointment app.

Collaboration and Feedback

By adding team members to your account, you can work on projects together. By sharing the link of a project with people (even without a pentotype account), they can immediately give you feedback by writing comments directly in the wireframe.

Try it for 30 days

Credits: Johannes Dörr

Keynotopia Mockup Templates is a little Freebie from Amir – one tweet required. Hand drawn sketches of UI components for Keynote & PPT. Thanks Amir for sharing!

Keynotopia Mockup Templates enable you to sketch user interfaces using Apple Keynote or Microsoft PowerPoint, without having to draw each component by hand!

All components are hand-drawn vector shapes created from scratch in Keynote and PowerPoint, and can be edited and customized directly, without needing additional design tools.

When your mockups look like simple hand-drawn screens, it’s easier to get feedback on layout and structure, without getting distracted by the detail.

And creating Keynote and PowerPoint sketches is better than drawing them by hand, because you can iterate and modify them quickly without having to redraw them from scratch.

Other cool products from the same author include: GUI Toolkits, Keynotopia & Axutopia. Enjoy :)

Visual Website Optimizer is an awesome A/B testing tool and I still have a few coupon codes remaining for a 25% discount on the first month of a subscription. They are valid for just one more week until Nov 15th. I received them for a GoodUI promotion and didn’t want them to go to waste. To make use of a code, do enter it upon purchase after you sign up (if someone else didn’t grab it already). So if you’re interested in split testing, here they are:

GOODUI-K8R50
GOODUI-MANXK
GOODUI-UPT1E
GOODUI-Y96TJ
GOODUI-40N3U
GOODUI-03Y8G
GOODUI-5EVOF
GOODUI-XJ1VG
GOODUI-KC8GU
GOODUI-W00SQ


Happy Testing. :)

As a side note, here is a little story how I’ve used VWO to increase the conversion rate on Wireframes Magazine from 1.4% to 4.7%.
Cheers,
Jakub

Less than two years ago Proto.io introduced to the public the first release of its popular mobile app protyping platform. Today, Proto.io introduces the 5th and most powerful release Proto.io 5.

The new release promises to help designers and developers to unleash their creative freedom and create unique user experiences even faster than before. Among various enhancements, Proto.io 5 takes prototyping a step further by adding animation states, timelines, draggable functionality and variables. Check out the new features and demos.

Proto.io continues its full HTML5 and cross ­device, cross ­browser support that allows prototyping for virtually any device including smartphones, tables, Smart TVs, game consoles and more. Prototypes can run in any web and mobile browser (on the actual device) making the testing experience as realistic as possible.

Proto.io 5 Highlights

As listed on their website the most important new features in version 5 include:

Animation States + Timelines

Proto.io 5 introduces Animation States and Timelines, a fast and intuitive way to build HTML5 interactive animations. Easily create different states of the same screen and intuitively define the tween transitions, animations and interactions between each state using the powerful new timelines to create animations in a better, faster and easier way.

Drag & Rotate

Making any item on the screen draggable or rotatable is now just a checkbox away. You can now enable drag functionality for any UI element on the canvas, set various properties to define how drag behaves, and interact with various drag callback events to do sophisticated interactions.

Variables and Item property interactions

Start capturing user input, record user events and calculate data from interaction callbacks. Variables can be used to set and get values to and from UI elements, do math calculations, and modify text and other properties on the fly. You can easily combine variables with any touch events and interactions to create interactive content that changes based on user input.

New touch events

More mobile events like touch, release and pinch have been added to the long list of touch and mouse events to enhance user interaction. All events are compatible with mobile and web, thus
allowing the development of multi platform experience with no hustle.

Sign up for free or Try it for 15 days

AppSeed is a KickStarter project that intends to blur the lines between sketching and prototyping. Actually, that’s real world sketching and digital prototyping we’re talking about here. Imagine pencils merging with pixels. Anyhow, it’s a few more weeks till it can get funded and probably still needs a nudge to make it happen. Hence sharing it here for those interested in backing this interesting project. It’s from Toronto as well and I like sketching, so here it is. :)

Credits: Greg Goralski

Less than a year has passed since the Infragistics team released their first version of their awesome prototyping application. Here is Indigo Studio v2.0. Amongst a bunch of improvements, the new version promises to help designers bring in the customer into the process even sooner by allowing you to iterate quicker. George Abraham, the product manager behind this app, did a pretty good introductory video outlining the clear vision of this tool – one of which is to “help you tell and experience stories”. I personally think with and design using stories and this mental model definitely resonates with how I work.

The other big thing behind the new release is support for Mobile and specifically iOS Phones. There is another screencast video which really shows how you can work with mobile viewports, canvas size, as well as easily adding in interactivity using their precanned iOS controls. A pretty slick way of defining what is viewable, scrollable and how you can pan. :) The new version also comes with touch gestures to drive your prototypes. You can see one demo prototype for mobile that was built using this app.

So What Else Is New Since 1.0

As listed on their website, some of the changes since the first release include:

Sharing to your own servers – this enables two important scenarios for Indigo users–privately sharing prototypes behind firewalls, controlling when and if your prototype is removed, and being able to “update in place” so that you don’t get new URLs for each update.

Improved Exporting – along with more sharing options, we added more control (and a better UX) around exporting, including exporting selective parts of a project for others to work on, as well as a new “Quick Snapshot” global feature to quickly grab an image of what you are working on.

More Options for Preview/Run – you can now choose to run from your prototype home, the current screen’s Start state, current state, and “try interaction” to start at prior state in order to quickly try the interaction you are designing.

New PasswordBox – adding a password input box is as easy as a drag and drop now.

Distribute/Space Out Elements – you can now easily evenly distribute/space out selected elements.

Storyboard Enhancements – we made it much easier for you to quickly bang out stories by dropping in images, and then you can simply double click to start new screens based on them, which is great for making literal sketches interactive.

Lots of other little tweaks, enhancements, and bug fixes, but by far, the biggest enhancement we made to V1 was the new HTML5 viewer, so you can now share and run your prototypes on any modern device. That’s a big deal, and it was especially important because it paved the way for us to add even more mobile design deliciousness to Indigo.

Try it for 30 days

Download and give it a try to see if it works for you.

Just learned that there is a cool new sketching font out there. It’s called Sketchnote designed by Mike Rhode. He has used it extensively in his sketchnoting book as well. Looks pretty solid to me and could be beneficial alongside any electronic sketches. Enjoy. Cheers.
Credits: Mike Rohde

So it turns that Jono, a UX designer at Nutmeg, has picked up some Moleskin Storyboarding Sketchbooks and set himself a goal of explaining something in sketch form each day. Hence Sketchplanations was born. Oh and beware, as these are all first time sketches, 100% authentic, with no corrections whatsoever. A great little inspirational project. Thanks Jon!

Credits: Jono Hey (@jonohey)