Designing Interface Patterns

Our creative processes are aligning with agility required to address demand for experiencing designs in various contexts. For instance, after crossing the responsive design Rubicon we realized it’s not viable to create throwaway deliverable artifacts (wireframes, mockups etc.) for each viewport break-point. Instead we started prototyping and evolving our concepts to final solution by designing in browser.

To make the process of designing interfaces more effective and sustainable a lot of us have also adopted pattern library frameworks such as Bootstrap or Foundation as go-to resources for quickly rendering common interface elements and layout sets. By defining individual elements of interfaces or interactions as well as by incorporating adaptation to contexts in which said elements will be featured we constitute pattern libraries.

Continue Reading

I’ve been consulting on a project that will output native applications running both on Windows 8 and iOS. One of the main concerns is ensuring experience and interface consistency in cross-platform design, which can be rather tricky when those platforms have design principles standing in direct contradiction to each other.

Key difference between iOS and Windows 8 I found while digging through the guidelines is how they relate the users to the physical world. iOS tries to replicate the world we live in by designing digital interfaces according to what the user is familiar with. Windows 8 takes a different stance, it recognizes that physical and digital are not the same and should be treated very differently. Furthermore, the crazy Microsoft guys go as far as saying we can design digital better than physical:

Be authentically digital

Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Being authentically digital means embracing the fact that apps are pixels on a screen and designing with colors and images that go beyond the limits of the real world.

Metro Style Design Principles

and I completely agree. Regardless of cost, is it practical to impose (physical) limitations both on our design capabilities and also on what we can offer to user’s experiences ? I shout no, but also recognize the danger of an ever increasing learning  slope. Continue Reading

In September last year I wrote an article about the crucial role of using analytics as a tool to make informed, data driven decisions in our design processes. As an example I used the “above-the-fold” opacity-fold.psb. Things have changed significantly since then and my approach to analyzing the user’s visibility of the layout has evolved.

Use of responsive media queries has taken the web design world by storm, mostly due to it’s ability to address growing number of devices, browsers and contexts we must design for. Creating a fold overlay for each device and editing them all in Photoshop manually wouldn’t be very efficient at all. Recognizing that my current method will soon be outdated, I looked at a problem from a different perspective. Using a flexible HTML layout foundation for the overlay, and CSS opacity attributes, I’ve managed to build a highly customizable and most importantly responsive (rather than adaptive) overlay. Continue Reading

Flexible Prompts Freebie

Another cross-platform (flexible) freebie: This time I give you good to go or if you prefer fully customizable, flexible message prompt templates in various flavors to use on your site or application. Besides the fully compatible code, web-optimized graphics and witty comments, also included are all the source files, so you can tweak the prompts to meet your branding needs.

Why are these so great?

Two reasons: integration and ease of use.  Copy a few files and you will be able to display these nifty looking and very practical messages to your visitors. Changing the style of a message is as simple as changing the name of the style ( . . . ) makes sense right? If not, here’s a instructional video on how to do just that: Continue Reading

Click Here, Learn More, Get Started, Register, Submit ( . . . ) we all know them as buttons (a.k.a calls to action;) they are what make the Internet go around. In this post I will present you with few best practices I’ve gathered that aim at achieving increased productivity of the button creation process as well as  consistency of the end result.

The Button Maker Photoshop Template (Making Off)

Brief tips and tricks video on how to create and organize a reusable and above all consistent button Photoshop template. Continue Reading