Credits: Justin Maxwell (@303)

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)

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

Why choose the BlackBerry 10 Templates? Jordan writes:

Quality and Attention to Detail.

BlackBerry 10 Templates was built by Jordan Gurrieri, lead designer and front-end developer at Blue Label Labs, as a tool to help our team quickly and easily mockup high quality app designs for client proposals, user demos, and developer requirements.

At Blue Label Labs we live and breathe app development, so you can be sure our templates are designed to detail specifications of the UI guidelines set out by BlackBerry. Your developers will love you when it is time to turn your mockup into design resources for development!

Finally, as this new platform evolves, we will be adding more commonly used design patterns and components which you get as part of the life-time free updates.

Grab them right here.

Credits: Jordan Gurrieri (Twitter)

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)

Very Strong Team Focus

With 4.4 million comments left since its beginning, InVision takes design collaboration pretty seriously. This is definitely seen in version 2.0 and the team really understands that no one designs in a vacuum. Take the new project pulse view for example. This project dashboard so to say, gives collaborators a way to understand who has commented, what new screens were changed, what screens were added, and who viewed what recently. This awesome project glimpse can be contextualized in a flexible time scale of today, the recent 7 days, 30 days, 90 days or since the beginning. For those who prefer to understand when a project has been the most active, the same data can be viewed as a time graph under the project stats tab. The visibility of team behavior here, definitely helps to build a collaborative feel.

Each project also very clearly shows its team members in the top right. The faces of the people you are working with on a given project are now visible which humanizes the sometimes distant remote design process. Each person also has a dedicated profile view with their project and a corresponding activity stream. Score!

Care about comments? The new comments tab lists a chronological discussion view of all the things that have been discussed, with the comments contextualized nearby little visual snippets – context is king and a picture is worth a thousand words. What’s more is that these comments are also keyword searchable and actionable. The comment-email integration is thought through giving users the ability to reply to them (and interact with the team) directly from within their email clients.

Smooth Performance

Although I haven’t noticed a difference, the InVision team claims that everything on the front end has been rewritten with the intention of speeding things up. I always thought it was pretty quick anyways and never had any delays with it. 2.0 is smooth as smooth can be.

Other 2.0 Goodies

The change-log of the latest version also indicates that a few extra hot things have made it through as well. These new features include: bulk actions, device staging, anonymous sharing, user testing mode, dev notes for hand off, and real time pushing. Overall a solid release in my view!

Have some work that needs to be shared with a team, or need to build an awesome web prototype mockup? Then give InVision 2.0 a shot. Yup, the first project is always free!

The main advancement with PowerStory 2.0 over 1.0 (which I reviewed here) is the addition of a UI Library of 250 standard controls that cover the web, mobile and desktop applications. This new library is also extendible allowing you to create your own custom controls along with import and exporting sharing capabilities. This means you are not limited in the UI/UX look and feel you are after, and could also create a standard library of UI Controls for your project if needed. The move should now make it a much easier for UI designers when making Wireframes using PowerPoint. The nice thing about using PowerPoint is that everyone knows how to use it and it is good for walkthroughs. There are some nice features within PowerStory that make it easier to walkthrough your storyboards by giving you context of where you are. You could use this tool to create traditional linear presentations or take advantage of its “use case” based storyboards which essentially allow you to create alternate flows. This should help reduce the duplication of UI Wireframes across storyboards.

In terms of the test case generation, this is rather unique and a great time saver. The test cases generated can be exported into MS Word, MS Excel and MS Team Foundation Server.

Are you a BA, UI, or UX designer? Give PowerStory 2.0 a try.

Credits: Martin Crisp

Credits: Hao Luo

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

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

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

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

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

Credits: Jongmin Kim