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

By end of 2013 (2015 at the latest) mobile browsing traffic (smarthphones and tablets) will surpass the traditional desktop uses. Small screen spaces, limited interaction models and increasing number of user contexts will generate new constraints on designers. Solution to those constraints is focus. Focus on relevant content,  focus on visual hierarchies,  focus on intuitive experiences  that will enable us to do more with less and ultimately provide users with accessible information through  functional interactions.

New era will bring many changes in our approach to the layout.  One change that will play the major role is the shift of the screen orientation from landscape (horizontal) to portrait (vertical).  Although this shift is yet to come, there are steps we can take now in order to accommodate and better understand the impact through use of natural user interfaces (NUI) rather than graphical (GUI) Continue Reading

I’ve spent the last week at An Event Apart  which was hosted at the magnificent Palace Hotel (pictured above) in San Francisco and I have returned a changed designer. A tweet on the event feed read: “I’ve been to An Event Apart and all I’ve gotten are these sticky-buns.” I could not disagree more with that person. I have gotten so much more out of it (although the cinnamon buns mentioned were very yummy indeed). I acquired an entirely new perspective on my approach to design.

Topics of the lectures revolved around content focused and responsive / flexible (cross-platform friendly) approach to design and development by utilizing progressive enhancement techniques. Significant importance was also given to an increased need for a more comprehensive planning approach in order to address content-design experience relevancy, workflow efficiency and performance of  final products. 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