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

Visual Website Optimizer: 25% Off The First Month

November 7th, 2013

VWO
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

Introducing Proto.io 5

October 7th, 2013

Proto.io
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 – KickStartIt!

September 23rd, 2013

AppSeed
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

Indigo Studio v2.0

September 19th, 2013

Indigo Studio
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.