Pidoco Special Offer: 50% Off Until August 15th

July 29th, 2014

Pidoco
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).

Pidoco’s Interaction Dialog allows users to easily define advanced interactions

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.

Simulation of an interactive Pidoco prototype in scribble mode

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.

Get It Now

pentotype

July 15th, 2014


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

Axure Flat UI Kit

June 13th, 2014


Although I don’t use Axure for prototyping, and I might have some particular views on flat design, this new Axure Flat UI Kit does look pretty slick at first glance. The controls within the template definitely seem to behave a lot smoother since I last remember how Axure looked over a year ago. Nice work.

The UI Kit includes over 310+ interactive and beautifully crafted page elements, modules and complete templates. The UI Kit uses Axure’s powerful widget library. Create complex and interactive wire frames with a snap. Icons included.

Have a look inside

Credits: Marc-Oliver Gern

GoodUI DATASTORIES – Now Live

May 2nd, 2014


Ok, it’s finally live. We’re proud to announce that the wait is now over and the first issue of Datastories is here! We made sure to have the opening issue also be reflective of the first conversion test we ever did. We hope you’ll like it and can learn from it. What’s inside? Each month we’ll release one issue which will discuss:

  • Repeatable Insights
  • High Quality Results Data
  • Test Setup With Code
  • GoodUI Idea References
  • Key Learnings

Learn from our conversion optimization tests and use our insights on your projects to increase various metrics.

Learn More About The Datastories Subscription

Credits: Jakub Linowski

My Sketchbook Color Coding

April 11th, 2014


What, it’s been two years already? That’s how long it took me to fill in my dotted Leuchtturm notebook (German engineering at its finest) front to back. Since I’m starting a new one, I thought to devise a bit of a color coding system for my upcoming notes and just share it here. The colors I typically use to underline the very first page title. Here are the colors:

Light Grey For Thoughts & Inspirations

Sometimes I’ll hear or read something of interest from a podcast, article, or book and it gets coded this way. My own free-form personal random thoughts across various disciplines get placed here as well.

Medium Grey For Project Ideas

For the more solid, practical and actionable thoughts or sketches. These are both new project ideas or adjustments to existing ones and are often accompanies by sketched out screens.

Black For Business Strategies

These are the most strict, closest and firm action points which are tied to my business initiatives. They are very high level for the most part and act as strategic todo’s of sorts.

Red For Contacts

If I meet someone or a company of interest, they will get placed here. This section might also be some residue from a conversation with someone over a cup of coffee.

Blue For UI Patterns

Here come the user interface patterns – both good and dark. Be it existing patterns seen somewhere or envisioned ones, they both land here.

Yellow For Content

I write and rely heavily for content marketing for much of my business. Specific content ideas for existing projects get placed here. Oh, and in the example listed you can actually see that I’ve started scribbling down some content points for the GoodUI Datastories promotions. :)

Was this helpful? How do you structure your notebooks or sketchbooks?

Credits: Jakub Linowski

8 Awesome Business & Entrepreneurial Podcasts

February 2nd, 2014


Well, this surely is a bit away from traditional wireframing and sketching, but I just needed to share these inspirational business podcasts somehow. Fact is, I’ve been listening to these for quite some time now and they have been driving a big chunk of my thinking recently. They are all very entrepreneurial and startup oriented in nature while highly motivational as well. Personally, I found them as a nice way to complement the morning commute while stirring lots of business thinking. The list goes on starting from my favorite at the top:

The Business of Freelancing Podcast

Brennan Dunn is pretty solid with the content and advice. There are only 10 episodes or so, but they are packed with advice from pricing to qualifying leads and moving prospects along the sales pipeline. Wish there was more.

Eventual Millionaire

Jaime interviews millionaires each week who share tons of advice on their successes and failures. She speaks to a diverse range of business people and while listening to each person’s story, common patterns begin emerging. Great content!

Smart Passive Income Podcast

Pat Flynn shares a ton of goodness each week on blogging, affiliates, content marketing, video, email marketing, and just starting businesses online. Easy going and light weight, but still inspirational.

Email Marketing Podcast

John, “The Autoresponder Guy”, knows a thing or two about copy-writing as well as email marketing. He interviews many others with a lean on how to make the most out email for the purchase of building customer relationships.

Product People

Although at a bit of a standstill, Justin has been interviewing quite a few entrepreneurial minds and start ups. New episodes might appear here and there, but no promises.

Entrepreneur on Fire

John is on fire in this motivational and daily podcasts. The interviews are with all sorts of business owners who have decided to leave their day jobs and pursue their business passions. Sometimes a bit corny or sugary, but still a nice way to learn about what drives people to start their own things.

Giant Robots Smashing into other Giant Robots

Just started listening to this, and it also looks like it has some good content on the business of software development and design.

Startups for the Rest of Us

Mike and Rob discuss software development with a twist on the business side.
Typically they start off with 5-10 minutes or so on some technical problem first though.


Did I miss anything?

One more thing. Typically I find that during or right after listening to an episode from this list, the ideas for courses of action start brewing very rapidly. It’s highly recommended to have an output such as a notebook or sketchbook ready nearby in order to jot down ideas or key insights.

Enjoy.

Credits: Jakub Linowski

UseYourInterface.com

January 15th, 2014


UseYourInterface.com is another collection of interface patterns mostly dealing with animations. Lots of moving parts and inspirational stuff. Definitely liked the submit button + onsubmit progress bar combination.

Credits: Josh Davey

RoundIcons

January 4th, 2014


RoundIcons.com brings you a juicy set of 1000 hand crafted, flat, round, professional looking vector icons. Can’t go wrong with these easy to customize, designed to convert and a 30 day money back guarantee. Quoting their site:

Made with attention to details and designed to provide you with the ultimate resource for whatever project you would work on. Give a unique and clean feel to your website, prints, infographics or applications using our complete set. Ready to use icons weather you are a regular user or a designer you will find our Collection very friendly and extremely easy to use.

Purchase & Download

Streamline – 1640 Vector Icons

December 13th, 2013


Streamline, by Vincent, is a new vector icon pack that is packed with goodness, extremely flexible, and designed with love. Here is what the new set contains:

A Quite Broad Set

There are 1640 icons inside that have been carefully designed. That’s iOS7 and Android icons spanning such themes as: alerts, gestures, people, business, weather, and on and on.

Super Flexible

These icons have also been designed on a variety of grids ranging from: 24px, 30px, 36px, 48px to 60px. More so, these all assets being done in vector form (EPS and AI), are all ready for additional modification in various ways. Need a drop shadow, color change, or line thickness adjustments? All that can be done easily.

Other great products by the same author with a solid track record on delivering quality work, include: Minicons and Vectorian. Hope they are useful. :)

Purchase & Download

Credits: Vincent Le Moign

Free Keynote & PowerPoint Mockup Templates

November 24th, 2013


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 :)