Archive for the ‘Inspirations’ Category

My Sketchbook Color Coding

Friday, 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

Sunday, 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

Wednesday, 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

Skeu It!

Thursday, May 23rd, 2013

Skeu It!
Skeu It! – and perhaps here is the reason why people went flat with their design styles. :) It’s a parody tumblr collection of some weird looking interfaces with coffee switches, jean pockets and lots of wooden clipboards. The site is now closed off, but definitely proved a point of how ridiculous (or skewed) a UI can get when pushed to the other extreme.

Credits: Justin Maxwell (@303)

SIX UX

Monday, May 13th, 2013

SIX UX
SixUX.com is a collection of six second long Vine snippets of all sorts of transitions and animations (yup recorded by hand). Some inspiring short videos if you’re into moving pixel patterns. :) Overall I think transitions can be great if used wisely. Often they can lower the cognitive strain by helping people to understand what happens between two distinct UI states.

Anyhow, if you’re browser starts choking from so much video running all at once, there is also a tumblr blog as well. Nice work Andreas!

Credits: Andreas (@ThisisSIXUX)

Calling Bull$#!%: On Flat Design

Wednesday, May 1st, 2013

Calling BS
As the flat design trend has been recently surfacing in popularity it made enemies with a few good old friends of mine, some of which include: shadows, gradients, and textures. Taken literally, under the flimsy banner of honesty, flat design has ventured out against interfaces which resemble anything three dimensional or portray depth on a two dimensional screen. I’m calling bullshit on this for a number of reasons.

Please Don’t Steal My Design Elements

Back to basics from the time when I was still a graphic design student, I remember there were some fundamental design elements given to us to make use of. Armed with such primal elements as color, line and shape, we were one step closer on the road to respecting human perception above following ephemeral styles. We were learning how people see so that we could setup good visual hierarchies and differentiate between the more important and less important things on a page or screen. By not making everything look equal, but instead by making things larger or smaller, closer or farther, we could begin to guide the eye while grabbing people’s attention in different degrees.

Come today, two of these elements that are being attacked by flat design are texture and space (or depth). If this new awesome trend is now taking them away, then it’s ripping pages out of my graphic design text book and actually making me poorer as a designer. Not cool. As visual communicators we are stronger with more tools and techniques at our disposal, not less. I therefore respect the fact that human beings can see depth and there is nothing wrong with making a primary call to action large, shiny, and three dimensional. I am placing my bets that an embossed depth loaded button will be noticed more often than some ideologically restricted flat blob. From a business stand point, my clients will also be happier with a stronger conversion rate and a better ROI. From a usability standpoint, people will sweat less while trying to determine what is clickable and what is not (Bokardo seems to agree).

How Memorable is Flat?

One last other undesirable side effect of flat design (and any other minimalist, modernist, reductionist, clean or simple styles which have come and gone) is its potential to undermine human memory. Some time ago, in the context of charts and bar graphs, we were taught that chart junk is bad and we should keep our data-ink ratios in check while not succumbing to evil décor. But is this so? We have been warned that a purely simple and clean approach comes at the cost of making it harder to recall the information later on. Let this be a warning that extreme simplicity might not be the silver bullet after all if we’re striving for higher memory recall rates.

The fundamental thing about flat design is that it is a restrictive trend that ought to be questioned. Perhaps it’s cheaper to develop, design or maintain, but if taken in its literal interpretation it could result in a lower quality user interface. I believe that being respectful of people’s perception, attention, memory and the human ability to register depth, wins at the end of the day over following any stylistic fad. The answer probably lies within a more balanced approach and therefore – I choose not to design with one of my hands tied behind my back.

Credits: Jakub Linowski (@jlinowski)

Since more and more bullshit has been surfacing to the top lately, I’ve created a new bullshit tag to keep track of it. :)

GoodUI.org

Wednesday, April 10th, 2013

GoodUI
Good User Interface is my latest project with the intention of collecting and sharing UI design ideas in the form of a newsletter. It is also a running list of tactical tips for making a UI easier to use as well as increasing conversion rates. The project will reflect that a good UI is nice to both the business side as well as the people using it. As an experimental piece to the GoodUI project, I’ve also setup a Quora tag in case it stirs up any question-answer style discussions (started debating Prompts vs. Undos a few weeks back already).

As always, any feedback is more than welcome. Particularly, if anyone has any conversion ideas which they’d like to share, I’d love to have a look. Please reach out to me. Even better yet, if you could provide any metrics from A/B tests.

So would you like to receive ideas for making your UI better sent directly to your inbox? Sign up for the monthly GoodUI Newsletter today. :)

Credits: Jakub Linowski (Twitter)

Lean Sketching Tips: Flexible Fidelity & Cutting Corners

Friday, March 8th, 2013

Lean Mean Sketching 101
Here is some lean UI sketching advice – let the level of detail be a variable in your design process that which you control. Staying conscious of and knowing when to cut a corner or when to spend additional time detailing an interaction, screen or flow is a healthy thing. All sorts of design tools impose certain fidelities on to us the second we pick them up. Take on Axure RP for example and before you know it you’re sucked into aligning stuff at a pixel level whether you like it or not. Load up Adobe Fireworks too quickly and subconsciously you begin writing actual copy, comparing pixels, and choosing RGB color values. The tools which we use, just as Donald Norman said of the artifacts we design, also come with affordances – do stay aware of how much detail they ask of us.

Surely everyone by now knows that sketching tends to be low fidelity in nature as it’s often quick and dirty. However when it comes to its fidelity I think there is more to it. Sketching in particular is a lot more flexible than we think comparatively to other tools out there. I believe that sketching allows designers to work at a wider and therefore more flexible range of detail. On one hand it may be super quick, yet at the same time it also allows us to slow down and elaborate. Here are a couple of examples of what I mean:

Scribbles vs. Real Text

Scribble Text
Consider the text we show and indicate in our work. Sometimes it’s rightfully fine to just ignore detail and save time by showing it as a bunch of scribbled lines. At other times of course we may imbue our concepts with more detail and show the actual text. After all, copy has a clear connection to experience, usability, and understanding. Nevertheless, choose wisely.

Outlines vs. Depth with Contrasts

Outlines
What about outlines – they are a quick way of suggesting an area. These of course can be elaborated with depth or contrast in order to convey element priority. Lighter backgrounds can give way to darker ones when it comes to showing importance.

Partials vs. Full Screens

Partials
I love how useful partial screen sketches can be! They cut through time and effort like a knife through butter (and also save you additional time when you later have to update your working documents). Why design a full screen if all that matters is the top navigation? Sketching in this way allows the designer to emphasize by leaving other elements out, literally. Of course, at other times full screens are the way to go. Be in control!

Placeholders vs. Detailed Components

Placeholders
Placeholders abstract a component by describing what it contains with the byproduct of spare time. It’s a good way of cutting a corner. Alternatively spend additional design time on the same component and turn it into a higher fidelity object.

Approximate vs. Precise Alignment

Approximate
As mentioned previously, aligning elements to the pixel can be a time sink. Sometimes an approximate position is just as fine. Similarly, the same rule applies to how straight or crooked we draw our lines. Decide what works for you and when.

Taken together, being in greater control of a design process does matter with the level of detail being one such variable. When corners are decidedly cut however, some clear benefits do arise. The additional spare time which is brought on can then be allocated to other and more important areas instead. One beneficial use of effort early on in a process is on widening the scope for example and thinking through broader interactions as opposed to just a few screens. Another valuable benefit of cutting corners is for designing alternatives and generating more ideas for the same screen, interaction or user story. Of course as a project unfolds and more knowledge along with deeper consensus is generated, don’t forget to start raising your level of fidelity. After all, the devil is in the details. The important thing here is that you (and not the tool which you use) are in charge when the detailing begins to happen.

Credits: Jakub Linowski

Form Follows Function

Monday, February 25th, 2013

FFF
If you haven’t already heard of the Form Follows Function site, it’s definitely worth a peak at. The site showcases a bunch of interesting CSS and HTML5 experiments by Jongmin Kim, that stretch our understanding of what is possible with modern browsers. As an example, here is a CSS transform Flip Clock. The project has quite a few examples that somewhat remind me of what Joshua Davis was doing back in the early days of Flash. So if you’re tired of those bland boxes and arrows, here is how one individual has pushed HTML to its limits. Definitely inspirational.

Credits: Jongmin Kim

Calling Bull$#!%: The Best Interface Is No Interface

Friday, December 28th, 2012

Calling Your BS
A thoughtful article by Golden Krishna of Cooper came out a few months back which has picked up some steam recently. Its title reads “The best interface is no interface” which I think is one sided, flawed and so here are a few of my thoughts on it out in the open.

Reductionism and minimalism do not guarantee a good interaction. The author seems to advocate a 3 step process for most user tasks. On the other hand however, Zoltán Gócza writing the UX Myths blog has challenged the 3 click rule sometime in the past already, advocating for ease of navigation and a scent of information instead. Then again, I have to admit that I do value simplicity just as Golden Krishna. Lowering unnecessary cognitive workloads must be a good thing as opposed to lengthy and manual labour intensive tasks. I also do believe that a design process often unintentionally fragments the forms we design and it’s very healthy to spend energy and effort to merge or refactor shared functions so that there is less interface duplication. Nevertheless, you can still have a useless or unusable 3 step process and an awesome 7 one. More so, when you take the statement of reductionism and push it to the extreme, you result with a 0 step process and nothing to interact with at all. In that case all that you’re left with is an aware system that knows you inside out. Is that what we want? Is that good design? Perhaps in some cases yes, in others less so I think.

Non-screen based thinking does not guarantee good needs based design. The author writes “When we let go of screen-based thinking, we design purely to the needs of a person.” I’m not sure that letting go of the screen guarantees good design. There are tons of screen-less traditional tangible products which are crap. You can still have needs based user interfaces but that comes more from your values as a designer and your process. Don’t punish screens for poor design.

Interfaces are actually good because they allow us to express intent. Whether you are clicking a button on a screen or turning your keys to open a door (also an interface with two states), you are expressing a very clear intent. Interfaces (screen based or not) enable interaction. Sure, I believe adaptive systems that learn about users are great, but they are not an answer to all situations. Imagine Amazon’s adaptive algorithm being so far stretched that they actually automatically order products for you. Call it the No-Click Ordering Process. Would customers have to spend more time at the post office trying to ship and return unwanted products? Now imagine a purely adaptive nuclear launch facility without all those terrible buttons that require two users to turn the knob simultaneously before a missile is launched. Perhaps sometimes, manual expression of intent is still a good thing – at least until Ray Kurzweil figures out the singularity thing?

Interfaces are also good because they limit the amount of information that is displayed at once. Take a book as an example which is an interface to a story. With it, we can navigate through pages and chapters and focus our limited human attention at words which we combine into sentences over the course of time. If a book did not have an interface however, we would not be able to flip through pages. Instead, we’d have to comprehend the full story in an instant split second with our brains frying from cognitive information overload. A good interface respects our cognition with a proper visual hierarchy and serves us limited amount of content at a time. Let’s not get rid of it completely perhaps?

Screen based interfaces are extremely multifunctional. Actually one thing that traditional screen based interfaces do quite well is that they can shift their functions pretty quickly and flexibly as someone interacts with them. The number of functions a screen can serve is infinite. Sure that comes at the price of learning and possibly confusing some users, but that becomes the designer’s job with the potential at their disposal. A physical product such as a wine opener will be a wine opener and serve a very narrow set of functions by comparison. Yes, the advantage is surely that a wine opener allows us to store the interaction as motor memory with the benefit of physical tactile feedback. Nevertheless I think a designer should choose if the product should be screen based or tactile or both based on some of the qualities and interaction characteristics.

Don’t get me wrong. I think it’s great that Golden is challenging the amount of screens we “slap” everywhere. Those two examples of a car dashboard with a Twitter screen and a fridge with another are perfect in highlighting desperate and thoughtless products. I think it’s also great that the author is thinking about adaptive systems that alleviate unnecessary labour and guess some decisions for us. Finally, I also think it’s great that Golden is taking into account hardware sensors that open up novel ways of interacting. But please don’t shoot yourself in the foot and make sensational statements that the best UI is no user interface at all. If the best UI was truly no UI, then why not put your money where your mouth is and get rid of all links and buttons on the Cooper.com website, and well, actually why not get rid of the screen based website altogether? Sorry if this sounds harsh, but it’s just a devil’s advocate thought experiment to make a counter point. :) I suggest we stay clear of extremist design philosophies and find a more balanced approach where good interfaces live alongside adaptive systems and new interactions. In the end, interfaces are here to stay and so is my pencil.

Credits: Jakub Linowski