Category Archives: Design

Thoughts on Google Material Design

First off, I am a fan of Google’s Material Design.
I have extensively studied their guidelines and have been following its evolution since Google made guidelines public.
Lot of my preachings over the years are, in fact, inspired by Material’s principles.

A brief background on Material
It’s a set of look and feel and design principles developed mainly for Google’s Android platform that has gradually evolved into a distinct set of rules and aesthetics, now coined as Material Design. Guidelines for Material Design was made public in 2014 but the effort to unify the look and feel and UI across Google products have existed under various names. Material is sort of the ultimate manifestation of those past efforts.

Design principles
Apart form the small subset of Android specific items, most of the design principles and guidelines within Material is a great foundation for any web project.
Actually, if you really think about it, most of the design principles and guidelines within it are common sense. Given proper context, there isn’t much a self-respecting UI designer wouldn’t have practiced anyway – Material or not.
Many of the principles in Material serve as a reminder of what good design is.

Once you strip away all the common sense and generally good design principles and guidelines – something that should be applied to any design anyway, only thing that’s left that makes Material unique is its look and feel – more look.
Now, the question becomes: “Do I want to merely mimic the look of Google’s Material Design?”

The web is saturated with numerous implementations of Material Design. Best examples are ones that selectively apply the pieces that support their project effectively.
There are no shortage of bad implementations of Material. Designs fail when the look and feel of Material is adopted, but without the complementing functionality and experience which it is designed for.

In conclusion, I think we should definitely borrow many of the great design principles and guidelines set forth by Material Design – specifically, the section “Cards Component” as well as Component section as a whole is a great place to take to heart for any UI designer.
However, attempt to apply Material Design in its entirety to random projects without fully understanding its intent and implications will most definitely result in disconnected and spotty experience.

Every project is too unique to successfully benefit from being strictly Material.

User Centered Design vs. Ego Centered Design

User Centered Design vs. Ego Centered Design
Why print designers need to realign their thought process and mentality to become effective online designers.

The print process flows something like this: rough sketch is pitched, revised and refined finally into production ready comp. Client signs off on comp and nothing can change. Client expects exactly what was pitched. And that is what gets delivered. Why so rigid? Because there is no turning back once the ad runs in a magazine/newspaper or hundreds and thousands of brochures are printed. There is no other way but to be perfect. Therefore, delivering exactly what is pitched is engrained in the culture. In that respect, I acknowledge the bravery, admire and respect those who work in such cut-throat environment. I was there once, so I’m being honest here.

Ego enhancement and gratification
Print designers expect and get the end result exactly as they designed it. Production is typically a printer. Whether it’s advertising, magazine, annual report, or small time brochure, seeing the final printed product exactly as one designed and envisioned is the ultimate ego trip. Imagine what this will do to one’s brain. Experiencing this kind of gratification day in day out, year after year nurtures the belief that one’s design and vision is impregnable. In print design, getting back something with even a minute deviation is unfathomable. However, this is the one habit one should certainly discard when transitioning to online medium.

Typically, an advertising or print design campaign is a one-man ran event. One person – the creative director is running the entire show. The CD sets the vision, leads, and is a primary contact and liaison for clients. The end result is the exact rendition of the creative director’s vision. In the online sphere, however, the end product isn’t so much a manifestation of one person’s vision. Internet applications are result of many diverse expertise working in harmony. No single person has (should have) the last word. The creative leader’s vision here is the accumulative result consisting of contributions from everyone involved. Teams responsible for performance, security, maintenance, database, compatibility, usability, and design all have equally critical role. Naively applying the print mentality here will certainly result in a product that probably excels in one area but one that fails miserably in all other.

Another area that needs realigning is the definition of creativity. In print, creativity is often thought of as being different merely for the sake of being different purely on aesthetics and style. Tending to and exercising cool and hip does not have a cost. It simply gets printed as designed. End of story. In a stark contrast, everything has a cost in the online world. Creativity does not simply mean ‘wow-effect’ at any cost. Every design decision and functionality has to be carefully gauged against benefits versus cost, effort and consequence. Neglect in this regard can lead to devastating results. Performance, security, maintenance, compatibility, usability, and functionality are all codependent on each other. True creativity is one that brings all of these aspects together to perform in harmony.

The goal of advertising is to manipulate the audience. Mostly convincing people to buy things otherwise not bought. Whether the product offers genuine value to the customer is rarely considered because the primary goal is to sell and glorify. Why do I mention this? The point is, there is no empathy in advertising design or in any traditional print design for that matter. How often do print designers user test their layout to find out how easy it is to read? Right. Never. Users are almost never considered during the design process. Designers who become accustomed to this type of environment and practice lack empathy. This is a critical difference. Lack of empathy and lack of consideration for users can be devastating as web/internet professional.

The print design world is what it is. It will remain so as long as there are people. But the design model is changing for the rest of the industry facing human interaction. Designing around how people see things, not how the designer see things.

Google Effects on Memory

This scientific research paper is a quick read. The reading, however, is interrupted in few places by the actual numeric data from the research which appear quite cryptic. But you can skip over the numeric data and still come away with a clear understanding of what the research is about and its findings. The paper eventually comes to a comprehensible conclusion written in plain English for normal folks.

Here it is:
Google Effects on Memory: Cognitive Consequences of Having Information at Our Fingertips (pdf)

Lot of us already feel that this is happening in our lives. However, the data and the findings solidify our feel and give us concrete belief and the conviction to act upon the knowledge.

UX professionals should read and ponder.
The way we handle user experience in numerous domains will ultimately be shaped by the human adaptation such as the one discussed in this paper.

Meaningless and Overused Words in Design

“The goal is to create simple, clean, and modern design blah, blah, blah…”
How many times have you heard that phrase at the kick off meetings? As if that’s some sort of a differentiator. It isn’t.
No one wants complicated, dirty, or outdated anything. Therefore, pitching “simple”, “clean”, and “modern” is saying absolutely nothing. It’s truism. It’s meaningless. Imagine a GM executive saying “Our goal is to build a car that starts, moves forward and moves backward.”

“That needs to pop more.”
Till this day, no one knows what that means. Not even the person suggesting it.

Being different among the crowd is good. But the difference must amount to something useful, beneficial, and valuable. There are no shortage of things that are different but stupid. Being different merely for the sake of being different adds no value. “Different” is a result. It should not be misunderstood as an attribute.

Law of the Conservation of Complexity

Larry Tesler’s Law of the Conservation of Complexity states that every application has set amount of inherent complexity that cannot be reduced or increased. Complexity is constant. The only question is who will handle the complexity? End users or developer/designers?

Making things less complex for end users means it will be more complex to program for developers.
Read this excerpt form Tesler’s interview to see why developers and designers should always assume the responsibility of handling complexity. This short read will make you a much wiser developer or designer.

Problem with Over Predicting UX

The iPad’s volume control is calibrated so that when you keep the down button pressed for more than a split second, it immediately switches to mute. Why? Because the designers of the iPad figured that anyone who keeps the volume down button pressed must be wanting to achieve total silence. Not true. This is over-thinking and over-predicting. Almost always when I keep the volume down button pressed, I am wanting to get to a certain low volume level. Not total silence.

There are people, including myself, who just naturally like to press buttons this way and not just on the iPad. If you are familiar with the device there is no reason to slow down any maneuver. I am capable of knowing when to lift my finger when my desired level is reached. On the iPad, my only option is successive button presses whether I want slow or quick decrease of volume. I find the iPad’s volume button behavior quite annoying. It just makes me wonder what sort of time difference we’re dealing with here if the buttons worked normally. I’m willing to bet that the saved time A) probably isn’t significant enough to make any sort of real world difference, and B) was not worth the risk of annoying the group of users who expect buttons to function normally.

The train of though that led to such feature may have made sense to few people. But concluding that the public at large must behave the same way is very narrow minded. Either the designers of the mute feature have not done proper research or they have made decisions in a vacuum.

Accommodating and thoughtful features elevate the user experience. But it’s a very fine line that separates the thoughtful from the aggravating. An over-thought UX can quickly ruin an otherwise typical, trouble-free, everyday operation. A good UX gets a nod from a recognizing user. A great UX feels so natural that it makes user think of nothing at all.

The Novelty Curve

Think back to when television was first invented. I bet no one back then thought that having to get up from your seat to adjust the volume or switch channel was an inconvenience. This is what I like to call the ‘technology honeymoon phase.’ Any and all aspects of the new technology is simply accepted as is with no questions asked. The initial awe and amazement leaves no room in our heads for complaints.

Then the novelty curve kicks in. When newness wanes we start to question why certain things are certain way. We start to form our own opinions about how certain things should be done. Suddenly, having to get up from your seat to change TV channel becomes an annoyance. So came the remote control. TV set plus a remote control – no matter how perfect a combination it once was, the novelty curve is constant. We now want on-demand programs, we want the internet in the television, etc. The cycle goes on.

Anyone in the business of catering to peoples’ wants and needs should be keenly aware of the novelty curve in order to stay current. The changes are more volatile in the consumer technology sector. The internet, the connectivity, streaming video, or the instant gratification in general is no longer a novelty. Satisfaction and happiness exists only in short cycles in the consumer society. The success of any product or service will last only as long as the technology honeymoon period. Like it or not, that period is getting shorter and shorter.

Unicorn Designers Are Real

For the longest time I have marketed myself as designer-developer, developer-designer, UI/UX Developer & Designer, Front-End Developer/Designer, or some combinations of those words. I wasn’t quite sure what to call myself.

It turns out the web development community has coined a term for someone like myself and has been using it for some time. A web professional who excels in User Experience (UX), Front-End Coding (UI), and visual design is referred to as the Unicorn Designer or Unicorn Developer. The definition specifically reminds that unicorns are not generalists. If they were, they wouldn’t be that rare and therefore, wouldn’t be called unicorns. Unicorns are experts across all said disciplines.

You can Google ‘unicorn designers or developers’ and read all about them and varying point of views. Many discount unicorns simply as a myth, some believe unicorns exist, and few have claimed they have worked with one. At any rate, the reasoning goes, those who possess expertise in all three disciplines (UX, UI, Design) are called unicorns because they are extremely rare and expensive.

I never really thought unicorn developers were all that rare until I began reading about them. In fact, it was my naive assumption that all highly qualified web designer/developer should possess all of the related skill sets. I’m willing to guess that, like myself, many unicorns started from the early days of the dot com boom. In those days, if you worked at start ups or small web agencies, it wasn’t all that rare for visual designers to delve into heavy HTML or even javascript. Learning new skills – especially when it’s something tightly related to what you were doing – seemed like a natural path.

My background is in visual design and advertising. Along with related studies in psychology and photography, I took few web design/HTML classes. My first job after graduation was at an internet start up as a ‘digital artist’ (we thought it was a cool way of saying web designer). I started out as a visual designer with limited experience in HTML. I should also mention that early on I had a good mentor who helped me spark my interest in things back-end as well. Jumping into related skill sets happened naturally for me mainly because I passionately wanted to know how all of the pieces that make up a web project worked. And over the course of my career I have learned and gained control over many of the related technology and skill sets. Somewhere in the midst of all this, I delved heavily into social behavioral science and psychology, which gave me a boost in my Design/UX focus.

Some may argue that unicorn developers’ skills are spread thin. But then, that would be describing a generalist not unicorns. It isn’t rare for a skilled musician to play the keyboard, drums, and a guitar at an expert level. Many musicians, in fact, do possess these skill sets. For some it is crucial that they have absolute control over the things that are crucial to their artistic vision. A passionate web professional can behave the same way. So it’s not that difficult to understand what makes a unicorn.

So there you have it. Unicorn developers do exist. And they are not all that mysterious. All it takes is little passion for learning. If you absolutely love what you do, learning new things that are tightly related to what you do it isn’t all that difficult. Being an expert at what you do is cool. Being an expert at multiple things that directly affects your vision is sublime.

What vs. Why

Let’s imagine you walked into McDonald’s and saw a post-retirement aged man working the cash register or wiping the tables. What would you think? Would you think that he has made foolish choices when he was younger and didn’t save enough? Would you conclude that he works there because he desperately needed the money? What if you saw him get off work and get into a late model Buick or Lexus that costs more than your car? That would make you think a bit more about your prior conclusions, wouldn’t it?

It’s easy to see what people do. Most people form conclusions based on what they see people do. This is because the ‘what’ is readily available whereas the ‘why’ isn’t. But the why is far more important than the what. We’re in the business where we just can’t make decisions based on what people do. Especially as web designers and usability professionals, it’s far more important that we understand why people do what they do. This is one reason why we encourage test participants to think out aloud.

More importantly, more often than not, what people do isn’t a clear indication of what they actually want. As a simple example, a statistic showing frequent use of the back button while on your site does not necessarily mean people like to use back buttons. It just may be that you have not provided a convenient way to navigate your site. Mostly what people physically do is a manifestation of one’s cognitive process that occurs in advance. The mind forms a mental model of what experience to expect from a site or an app. We may not always be able to influence the formation of user’s mental model. But as designers of user experience we can design a conceptual model of our product that best matches user’s mental model. We need to minimize the conflict between user’s expectations and what the system does. The less we make people think, the more positive experience people will have with the product.

Translating the Language of Software for Humans

I have finally summarized in few short words the ultimate purpose and the goal of a UX professional. It’s translating the software language into human friendly conceptual model. It may come across as somewhat philosophical but it isn’t. It literally means what it says. For my job, I am constantly converting what the software does into something that humans can easily understand. My ultimate goal as UI/UX professional is to make complex things simple for humans. Make it beautiful and make it work.

The discipline of User Experience (UX) as we know it today has existed in various forms in the past. Some used the term Human Centered Design (HCD), or User Centered Design (UCD) interchangeably to refer to User Experience. However it was called, the practice of UX hasn’t received much spotlight – at least not in the web application design – until recent years. Many web apps were mere graphical representation of the underlying system and the data structure. Early web apps and software are examples of products designed around the machine way of thinking. Users of these products – humans were expected to adapt to machine ways of thinking and tolerate its limitations and quirks that came with it.

However, those days are long gone. Products designed around that old way of thinking are no longer tolerated nor accepted. Machines are now expected to adapt to the human ways of thinking. This inevitably requires the programs to be coded with smarter and more complicated logic. It’s also why I believe this is a truly exciting time to be a UX professional as the translation of complex technology into simple human comprehensible form will become a dire need.

As a generation, we’re witnessing the pivotal transformation of human-machine-interaction. Technology used to intimidate and complicate human lives. But that will no longer be the case. The survival of any future technology will depend on its human friendliness and simplicity.

Number of Clicks vs. Quality of Clicks

Reducing the number of clicks (I will use the word ‘click’ to represent both click and tap of touch devices) at any cost is one of the stickiest web design mantra handed down from the old school of thought. Less click is generally a good thing, but blindly reducing the number of clicks does not guarantee a positive user experience. Web clicks got a bad rap beginning from the early days of the web. Many poorly designed UI resulted in needless and wasted clicks. This is one reason the effort to reduce clicks became so prevalent.

Before we blindly reduce the number of clicks we need to carefully think about why people click. Any element that calls for a click promises or hints at something. Based on this promise or hint, users form a mental model of what to expect from the click. They click expecting a gratification that matches their mental model. When the gratification is provided as expected, then the said click is a quality click. A quality click is one that acts as expected, provides user with a sense of direction and accomplishment, or a step taken towards an expected goal.

We must remember that each click has a purpose. It’s important that a subsequent click does not duplicate the purpose of the former. For example, if I click on a link “Return an Item”, I am expecting to enter the process to return an item. What I’m not expecting to see is list of links related to customer services.

As long as users receive constant feedback that they are moving toward a goal or have accomplished something with each click, the effort of a click is no longer an annoyance. It’s only when the subsequent clicks feel redundant or repetitive without any sense of progress or accomplishment, the UX suffers.

What Makes User Experience Pleasant?

There are many ways to achieve pleasant user experience as there are ways to make it unpleasant. We can achieve the former by minimizing the latter. In another words, by eliminating the unpleasant experience, we can automatically gain pleasant without even trying. So maybe we should shift our mental motto to “eliminate the unpleasant” instead of the far too ambiguous “make it pleasant.” Identifying the unpleasant is far easier than trying to create the pleasant out of thin air. This may seem like silly play on words, but it really isn’t. Let’s focus on one unpleasant experience – errors or user-errors as they say.

Would a more polite error message make things pleasant? No. It’s still an error. Instead, we should focus on how to eliminate the error altogether. In case of the user input errors, anytime a user is confronted with an error, basically, it’s the system telling users how stupid they are by not following the rules or by not knowing something so obvious. Does the system make things that obvious to the user all the time? No, most of the time they don’t. Required formats, prohibited characters, use of spaces, etc. are some of the things that many websites and apps fail to identify upfront. Yet, the system is happy to call the user stupid for not knowing them. How rude!

Imagine having a conversation with a person. And let’s say you mispronounce a word, stutter, or use improper grammar. Most of the time the conversation itself is fully comprehensible and can move on. But how would you feel if that person tries to constantly correct you every time? You’d be annoyed and punch that person in the face.

When we design an application, we need to think about ways to make the system smarter so that it can parse variety of human responses. The system should not make fuss over some trivialities arising from human interactions. We can design the system to foresee possible human responses and provide resolutions instead of throwing errors.

If A needs to be done before B, we should design the system so that it’s difficult or impossible to get to B before A. Alerting user that they did something wrong or relying on instructions is bad design that leads to unpleasant experience. It’s always better to guide the user to the path that results in less errors than alerting them when errors occur. Best error message is no message at all.

Web Design: What to Learn First

Over the years the all encompassing term ‘web designer’ is replaced by number of more specific-sounding names; User Interface (UI) Designer, User Experience (UX) Designer, Front-End Designer, or Interaction Designer to name a few. Depending on where you work, some of these terms may actually be tied to a specific role unique from one another. But in general, they are used interchangeably. Apart from the fact that these may be more period correct titles, they are all part of the archaic umbrella ‘web design’.

In addition to the change in what we call these professions, the expectations of their reach has changed as well. It’s no longer enough just knowing how to mockup a design in Photoshop. It’s been well established that you really can’t design unless you have some understanding of the underlying code. Using modern techniques, almost all graphical elements can be created with code. Bitmap elements are no longer used to construct the UI. It is quite possible to bypass the entire photoshop stages and not use any bitmaps in the creation of modern websites. Therefore, the market demands that designers not only able to think visually but also articulate their vision with code. The ability to code and to be able to do it properly is no longer preferred, it’s required.
So what should you learn first?


There is no way around this one. You need to live, think, and dream in HTML and CSS. HTML is the backbone of everything web. Almost all programming languages you may encounter in web development ultimately generates HTML markup as output. Know what it is, why it is, and what it does. HTML is to web as a dough is to pizza. No dough, no pizza.

Most dismiss the depth and seriousness of CSS because it is so easy to learn. It’s also the reason why it is so easy to write bad CSS. It may only take hours to learn CSS but to master all of the intricacies, nuances, and implications related to CSS requires serious commitment, time and effort. It’s no different than learning how to play chess. Easy to learn, but if you’re not serious, you’ll suck at it for the rest of your life.


Javascript is no longer an optional skill set for web designers. Without it, you’ll most likely not get very far in your career. Some may disagree and claim you can go right to jQuery be done with it. But I strongly disagree. It’s easy to skim the surface of jQuery and be happy with what it does. But without the fundamental understanding and principles of object oriented programming, it’s impossible to exploit the full potential of any Javascript library. Although it’s not necessary that you master the full spectrum of Javascript but you need to at least get your head around the concept of objects, prototypes, inheritance, and constructors.

Javascript, on the surface may seem straight forward and easy. But a shallow knowledge of Javascript is a dangerous thing. You need to be seasoned enough not to write bad code. Javascript can add magic and life to the web. But it can also destroy it very quickly. Having in-depth knowledge will give you the power to straighten things out when things go wrong.


Rarely anyone questions the value of jQuery. It is a Javascript helper tool written in Javascript. It has proven hugely popular among web designers and developers because it sheds huge burden of writing Javascript manually off of our shoulders. So learn it and embrace it. jQuery isn’t going anywhere anytime soon. Yet, jQuery isn’t meant to replace raw Javascript entirely. Some may say you do not need to know lick of Javascript to use jQuery. But the fact that you are using jQuery by definition means you are writing in Javascript. You will be enlightened once you discover why the syntax looks like it does and what goes behind the scenes. jQuery can be even more powerful tool once you become comfortable using it in conjunction with raw javascript and the foundational understanding of the language.

Sass, Less, Stylus

These are extensions of CSS also known as CSS preprocessors. If you are still writing CSS manually without aid of preprocessors, you will become a web design dinosaur very quickly, if not already. CSS by nature is not dynamic. It’s not quite smart enough for today’s large complex web applications. CSS can grow massive and out of control over time. Large CSS is a nightmare to maintain. CSS preprocessor adds a bit of intelligence to CSS by having concept of variables, functions and operations much like the behavior of many modern programming languages.

CSS preprocessors ultimately generate chunk of CSS for browsers to use. But you’ll mostly work in your authoring file which can be organized and written logically making it easy to maintain and manipulate.
Sass or Less? Seems like most designers feel less intimidated by Less (ah, potential pun, although not intended) because of its Javascript origin. However, I feel Sass is bit more robust. Feel free to disagree after you’ve become exposed to both. No need to fear Ruby dependencies of Sass. You only need it to install Sass and to compile css. Just knowing few lines of command line will suffice to get started. In any case, working with CSS preprocessors is lightyears more advanced than writing CSS manually. Stylus is also gaining momentum. Might want to check that out as well.

Angular JS

AngularJS is a Javascript based structural framework that lets you build rich, dynamic web applications. Angular makes your HTML page dynamic by adding interactivity, data-binding, routing, and state management. Angular is relatively lightweight for what it is and what it can do. This type of framework is known as Single Page Application (SPA). Although the SPA method is totally suitable for creating a single page applications or websites as its name implies, the term ‘single page’ is meant to describe the way Angular interacts with a given HTML (or View) template where the template can be part of a much larger project. Angular is widely used as part of large enterprise applications. Angular is built on the concept of Model-View-Controller (MVC), something you’ll come across when working with developers and software architects. MVC is a concept even designers should be familiar with going forward as its implications span multiple areas of web development.


If you are involved in any type of web development, chances are, you likely have come across Git. Git is simply a version control repository that uses algorithm that makes it really fast and efficient. It also has many unique features that allows contributions and community building. In some ways, you can think of Git as social media for geeks. If you are not yet familiar with Git, start now. Designers should get familiar with it because you will use it quite a bit as collaboration with developers tightens.


PHP is the most popular, most used web language in the world. Because of its relatively low learning curve at the start and ease of implementation, PHP is sometimes referred to as the duct tape of the internet. But that shouldn’t undermine the importance and the power of PHP. Many big names on the web are based on PHP. It’s easy to get in the door of the server-side web development with PHP. It’s tight integration with mySQL database also means you’ll be exposed to database integration and SQL which is a big plus. More importantly, for many, PHP serves as a perfect transition phase or bridge to other server-side web technologies. Knowing one web technology makes it easier to get your foot in the door of another.


There are myriads of grid systems to choose from as it seems one is introduced each week. Feel free to experiment with as many or just stick with the most popular. In any case, I’m sure each one of those has some justification for its existence. Managing layout and responsive breakpoints becomes trivial and mindless with a well designed grid system. It’s an easy way to quickly build prototypes and POC as well as a foundation for the entire application. Most grid systems are designed around generic scenarios in hopes to accommodate wide range of uses with minimal tinkering. It’s relatively easy to experiment with various grid systems with a small websites or applications. But choose your grid system wisely as it may not fit your specific needs and it will become extremely cumbersome to switch to a different grid system as the project grows larger.

React JS

If you feel adventurous try to explore React. It is a very interesting concept based on what they refer to as Vitual DOM. Bunch of Javascript and JSX is used to generate the HTML/DOM. Some use React to generate inline styles. You create and manage the HTML with Javascript/JSX and possibly the styles as well. It is quite possible to build an entire app with React without use of any external stylesheets. It throws the conventional wisdom built around HTML markup out the window. However weird, React is gaining momentum. It’s yet too early to dismiss React. Who knows it may be the way of the future. Learn to embrace or at least acknowledge the things that question our old ways of doing things. Because lot of good things result from it.

And Other Stuff

There are many helper tools available to front-end developers. As designers become more serious with code, many of their toolsets will overlap with that of the developers. There are tools that automate minifications, managing dependencies and libraries, and many other repetitive tasks one may come across during web development.

It’s worthwhile to look into some of these tools at least to understand why they exist. You may not be interested in any of these tools at the moment. You may or may not need them for your job or projects at the moment. But do look into them and at least know what they are. It will broaden your knowledge spectrum as far as web development is concerned. Know what goes on not only in web design but in web development world as well. Be aware of the trends. Design and development is converging. Designers are no longer working in isolation from developers. Become resourceful, broaden your knowledge base, span across various disciplines within web development. Become a valuable asset anywhere you go.

Design – Art with Constraints

Be creative, be different! This is the one phrase that mostly sums up everything design students are taught at schools as well as what is expected of designers in the society.
If you work in the art and entertainment industry, it’s easy to experiment with things that are shockingly different, cool, and exciting. Creativity can be made tangible and obvious. In some industries you can try things for the sake of trying, be different for sake of being different and still keep your job.

But most of the world isn’t made of cool and artsy stuff. Many creative professionals work in the serious business world. Typically, they refer to themselves as designers not artists. Design is art with constraints. Art is primarily about expressing oneself whereas design focuses on solving practical problems. There can be some degree of self expression in design as long as there is logical reason behind it. That may sound like nonsense since self expression usually doesn’t need any justification in the art world. But designers deal with different sets of constraints and goals. A designer need to be creative, yet, with a concrete and practical purpose. Every line they draw, every color choice, every shape, every shift of the pixel must have a reason. Designer’s ideas and visions must amount to something that is usable and easy to understand to someone other than the designer. Designers still need to think different. But being different for the sake of being different isn’t allowed. Being different must have an explanation. Everything must bring positive results to the business.

Sounds like hell? Believe it or not, opportunities to be creative is endless. Creativity in the serious world is, in fact, alive and well. You just can’t see it right away. Actually, most of the time you never see the effort and creativity that went into it. It’s always easier to tell when something is badly designed. When something is well designed, you just don’t notice it. Designing something you can’t see is just as challenging and requires a great deal of creativity and ingenuity. If you’ve bought something online without banging your head on the keyboard, that is a good design at work.

Whether you are designing a poster for a punk rock band or decorating a shop window, understand there are constraints of different shapes and forms everywhere whether it’s the medium, budget, physical, time, or nature. No matter where you work, you’ll always be solving some problem. A true design professional embraces challenge and constraints. It’s what makes design interesting, enjoyable, and rewarding.

Make Boring Interesting

“If I could work on something more exciting, I can kick some ass as a designer. Things I work on now is just too boring”. I’ve heard many designers say things along those lines many, many times. They’re the ones who think those ho-hum projects don’t deserve their best efforts. Those who think this way most likely will not succeed no matter where they work. Because the problem lies in their mentality not in the projects.
It’s not practical nor professional to expect to work on cool and exciting stuff that you like all the time. A true design professional is someone who seeks and successfully discovers opportunities to be interesting and engaging in everything they do. And that opportunity is everywhere.

Below is a variant of a real-life example (Name has changed for NDA reasons). A request for one page consisting of some text and a button. It can’t get any more dry and boring than this on the scale of dry and boring. The request was just that. It said to place the text on a page and provide button with provided label.

You have designers who come up with something like this just to get it over with.
Boring 1
It still works. It does everything that was asked. However, a designer’s job is not simply relaying the message. Designers need to make boring interesting. This is the work of extra pair of hands not a designer. No company should pay someone who comes up with crap like this.

Then you have designers who do this.
Exact same content and same set of instructions. But this is the work of a true professional who goes beyond what was asked, someone who’s willing to give little more to make things a bit more interesting. A true designer finds opportunities to be interesting from things that are seemingly uninteresting and boring.

Here is another example. A request for a simple form that allows participant to select from list of choices.

Again, you have designers who do this.

And designers who do this.

True Inspirations

The ‘Experience’ in User Experience is a cumulative outcome of many different practices working in harmony. Everything from aesthetics, technology, psychology, and economics play an important role in creating the experience. User experience isn’t a characteristic unique to web. User experience is an attribute of every man-made creation that comes in contact with a human being through any one or more of our senses. Inspirations for effective UX can come from anywhere.

Many web professionals seek for inspirations only from within the web community. Typically referring to design, UX, or web related blogs or articles. But the truly enlightening and eye opening inspirations rarely come from design or UX blogs. You may acquire few useful tips and tricks but most design/ux articles remain somewhat shallow as far as true inspirations go. Articles that tout design trends or inspirations are typically a mere collection of examples that usually reflect publisher’s biases. When we confine ourselves to a very specific subject or discipline for inspirations it prevents us from seeing the larger universe. Quite often the great inspirations, useful insights, and knowledge comes form outside of web development circles.

The very nature as well as the definition of the word itself, User Experience or User Centered Design requires that we understand how human beings behave in a given circumstance. Therefore, UX or any web or design professional should not only be familiar with design and technology, but should also have a keen understanding of human behaviors. I’ve been an advocate of social behavior education for web professional for many years. Many of my colleagues in the profession agree that such knowledge and insight is a tremendous asset not only in relation to their careers but in every aspect of life in general.

I usually find the most intriguing and thought provoking moments when reading about social economics, social behavior, or marketing. I find that human behavior online is not an isolated event. How people behave online is very much interrelated to human behavior offline. Understanding human interactions in one area may reveal invaluable insights to how you can handle the interactions in another. Studies of how shoppers behave in supermarkets may provide answers to improving online experiences in some other industry. As long as we can read between the lines and discover the similarities and uncover the nature of what makes us humans tick from seemingly unrelated contexts, the sources of inspirations suddenly become infinitely abundant.

Time and time again, I stress that getting familiar with social behavior and psychology is indispensable for any web UX and design professional. Being able to deliver beautiful design is important but aesthetics is only one piece of the puzzle. Once we understand why people do the things they do, many user interaction and behavior problems will no longer be a mystery. As we start to gain more insight into the human mind it becomes easier to piece things together to create a true user centered experience.

Below are few recommended books:
The Signal And The Noise – Why So Many Predictions Fail–but Some Don’t
Thinking Fast and Slow
How to Lie With Statistics

Become a confident designer

UX/UI designers are not artists who merely make things pretty. They are problem solvers of various domains. User experience designers need to have keen knowledge of visual arts, psychology, business agenda, cognitive science as well as various web technologies. User experience professionals are also mind readers. They need to anticipate what users will do next. They persuade, nudge, and guide users for a successful journey and a positive experience. And yes, they also need to make things look pretty.

Designing a piece of interaction requires a thought process that spans across all of the areas described above. One should consider every probable scenarios and possibilities. Sometimes a good idea comes naturally and almost instinctively as one gains experience. But never present a solution without any explanation or logic that backs it up. An experienced designer should and must have a clear and sound answer to everything. Always be prepared to explain your decisions.

As a designer it’s your job not only to provide solutions but to educate and enlighten those who are oblivious to the knowledge that you possess. As a UX professional you know a lot more about why some things are done in certain ways. You are armed with more knowledge and have more access to explanations and logic behind software and application designs then many others in the organization.

When presenting your ideas, designs, or solutions, it is important that you explain the whys. Once you have the answers to all the whys, you will feel confident. You’ll be seen as a confident designer. No one trusts a designer without answers. Within an organization where you aren’t designing for yourself, everyone expects an explanation. A designer is a provider of solutions, therefore, should be able to provide explanations.

Explain everything. For example, if something you have done is a standard practice, don’t just say “Oh, it’s the standard, everyone’s doing it.” That will only insult whoever you are trying to convince. Because you are implying that they didn’t know about the standard. It doesn’t matter even if they are people who are not expected to know such information. It’s just not a good way to end their inquiries. It will not make your design or solution any more appealing than not having had any explanation for it. If something is a standard there must be a reason why it became a standard. Explain why it is a standard. Explain the whys. Always.

Confidence is important. But a designer’s confidence should be backed by honesty, expert knowledge, and genuine effort. You should never make up bullshit as you go just to appear confident. That may win you some immediate results but it will not get you far. If you really did the research, if you’ve really put in a genuine effort, you shouldn’t have to make up anything. The answers and confidence will come naturally.

However, one thing to always keep in mind is that no amount of brainstorming, research, and effort is going to make us perfect. Even after all the genuine effort the result could end up off the mark. So it is very important to have an open mind while being confident at the same time. A designer needs to be flexible and should be prepared to acknowledge any reasonable feedback or ideas. It’s very easy for designers to get emotionally attached to their designs. As a result, many designers become defensive when their solutions are questioned or their ideas are countered. Try not to become overly defensive with your solutions. Acknowledge the fact that nothing is perfect. There is never a silver bullet in design.

On many occasions I’ve had very successful results when I incorporated feedbacks and suggestions received during reviews and presentations. Even the ones which I didn’t believe would work at the time turned out surprisingly well. Sometimes you just don’t know until you try it. Any reasonable suggestion is worth trying. Do not do anything to prove that something doesn’t work. Our job is to create things that work not proving something doesn’t work. If you’ve genuinely attempted to make something work but have failed, then you can be confident in explaining why something doesn’t work. It will only make you a more confident designer with more answers to everything.

We all are nightmare clients

The most difficult thing about being a designer is not the designing itself. It’s dealing with clients. I’m sure we all at one time or another have worked with nightmare clients. They are indecisive. They don’t know what they want. They change their mind all the time. Most designers don’t have a clue why clients act this way. They simply conclude clients are insane. Designers become frustrated and switch from creative mode to “just-get-the-shit-done” mode. It happens all the time. This isn’t cool nor healthy for either parties.

We can’t change how clients are. Clients have behaved this way for ages and they always will. However, we can try to look at things in a slightly different angle. I’d like to point out an interesting facet of designer-client-relationship that will help us understand clients on a more human level.

I’ve discovered that by looking at how designers do things we may be able to understand why clients behave the way they do. Say you’re working on a design project. Try and count the times when you have changed your mind. Think about the times when you’ve toggled between choices of fonts. Designers spend hours switching between colors, size or position. Honestly, we don’t know what we want either half the time. Think about how many times you undo, move, or delete. How many times have you scrapped something that seemed good few moments ago. We change our minds hundreds and thousands of times in one sitting. It turns out that we are indecisive as well. More so and more extreme than any of our clients. We just don’t realize this because we are the ones doing the design and everything is processed in an instant in our heads. But just imagine what it would be like if we had to rely on someone else. Imagine if we have to tell someone what we want or what we think we want. All the indecisiveness and mind changing will become vocal. And before we know it, we will become nightmare clients ourselves.

We all act and behave in similar ways when we count on others to execute our ideas. We all become indecisive and sometimes even irrational. Imagine, hiring someone to design your house, kitchen, garden or hiring a planner for your wedding, vacation, finances, retirement or for anything that is out of our profession. It’s likely we will say or do things that may seem stupid or irrational to professionals that serve us. Likewise, I think it’s only natural that our clients act the way they do. After all, they all have their own ideas of what their logo, website, catalog or ad should look like. And somehow they must communicate what’s in their head to us. It can be frustrating if you think about it. And of course all clients have unique ways of expressing this frustration all with varying degrees of absurdity and irrationality. However, looking at clients in this angle may help us see that it’s not insanity that drives them, but they are simply being human.

Is it the camera or the photographer?

Does the camera matter?

Would a really expensive camera make you a better photographer? Does the camera really matter? Do equipments matter?
Photography is one of those rare crafts where the tools seem to be getting more recognition than the performer. You show someone a great photo and the most common responses are “what kind of camera was used?” or “what kind of lens?” It is quite baffling when you really think about it. No one really praises the piano over the pianist. Everyone seems to be in agreement that it’s the runner that does the running and not the gym shoes. A painter’s brush would never deserve more credit than the painter. In all of these examples, it’s unthinkable even to debate whether it’s the tool or the performer that ultimately deserves credit. But photography is strange. People actually argue and debate whether it’s the camera or the photographer that is responsible for the result. It’s one of the fiercely debated topics that spans many decades among pros and amateurs alike.

Why is this? Maybe because anyone can pick up a decent camera and actually produce a photo. These days it’s even easier to do so because modern cameras have far more advanced automations and smarter program algorithms that not only makes taking photos easier but are capable of producing decent results even when you’re not trying. So the cameras appear to be doing most of the work blurring the line between the competency of the performer and the role of the tool even further.

As Chase Jarvis has famously said, “the best camera in the world is one that’s with you”, many famous photographers seem to share similar attitude. But almost all famous photographers who opined that the equipment didn’t matter own a Leica M9, collection of precious Zeiss glasses, or other photo gears that have price tags similar to a family car. It seems apparent that hardly anyone is practicing what they preach in the photography circles. So in some ways it leads me to believe that maybe the equipment does matter. Or does it?

It appears that in photography that every ingredient is spelled out for you such as f-stop, shutter speed, iso, and so on, which creates an illusion that one may be able to produce professional results as long as the vital settings are imitated. But such notion is as illusive as believing that one can play as good as any famous violinist simply by picking up the same type of violin and playing the same music notes. If only art was that simple. Photography is an art. Just as any other art, numerous unseen and unquantifiable factors are at play. Modern cameras help you achieve technical perfection with state of the art sensors, ultra sharp lenses, and advanced color processors. But technical perfection alone is rarely a critical ingredient for a great photograph. Great photographs create emotions that move people. That emotion is the result of numerous subjective elements working in harmony including story telling, pleasing proportions, intricate balance of elements, intriguing perspective, effective cropping, etc. No camera can help you achieve any of these things no matter how expensive. These are decisions that you make in your brain as an artist.

So does the equipment matter? In all honesty, I’d be lying if I said the camera and the lens don’t matter at all. Because the characteristics of a lens or the speed of the camera does matter in certain situations. There are times when certain emotions and mood are dependent on the equipment’s capabilities. But these are things you worry about once you have become a seasoned photographer. You don’t become a good photographer because of the expensive equipments. Expensive equipments come after you’ve become good. So there you have it. My take on this debate is that the equipment somewhat matters only once you have become a good photographer. But even then, it’s not the equipment that makes great photographs. It’s your brain that dictates what a photograph should look like. The equipment is merely there only to execute your orders. So practically, any camera is capable of producing amazing photos. Yes, there are photo exhibits of iPhone photos that have won awards. Photography is strange.

Designing from the past

It’s been said that there is “nothing new under the sun.” It’s a somewhat depressing statement. It’s essentially saying that anything and everything happening or being created now has happened or have been created before. It basically means “You’re not special. It’s all been done before.” Assuming the bleak statement is true, what’s a creative person to do?

If it’s too late for us to create anything new, then why not take something cool from the past and do it again? This is exactly what Jonathan Ive did. Ive studied one of the great masters of industrial design Dieter Rams of Braun. Here is how the designs of the past decades inspired some of the notable Apple products.

It appears that Jonathan Ive is pretty open about his admiration of Dieter Rams. I’m not sure which came first, the inspiration or the open admiration. But the Apple bashers have been somewhat chill about the issue. You know what? It shouldn’t matter anyway. That’s what great designers do. Learn from the past and from each other. Some are more secretive about it than others. It’s nothing new.

Braun T3 Design

Braun T3 Design

Braun LE1 Design

Braun T1000 Design

Braun T1000 Design

Writing for Web Application

Almost all UX experts agree brevity is the key when writing for web application. Short and brief language is essential for quick organizational comprehension as well as improved captivation. Brevity is especially important when the language in question is used for navigational or actionable purposes. Web professionals typically have no problem dealing with this concept. But we need to explain this concept in layman’s terms when working with clients, content providers or architects who feel they need to describe everything the long way. Those with less experience with the web are typically the worst offenders. They tend to spell out everything and write as much as possible to get the point across. The usual response to this from web professionals is typically “no one reads all that on the web”, “need to be right to the point” or something along those lines. But that still doesn’t explain why no one reads or why it needs to be brief. We need to be able to persuasively explain the why.

Writing for web

Writing for web application is like writing for road signs. Imagine a sign in the intersection that reads “You can not make a turn while the light is red. You can make a turn only when the light is green.” While there isn’t anything wrong with the statement itself, it is not appropriate for the context in which it is used. Safe flow of the traffic is largely dependent on drivers making the right decisions usually within seconds approaching the matter. A simple 4-word “No turn on red” contains everything a driver needs to know at that second. Any activity on the web like driving is surrounded by distractions even within a given application. We are dealing with very short span of attention. We need to captivate, instruct or guide using as few words as possible. Imagine, instead of “Merge Left”, the sign read “If you are in the right lane, please be prepared to merge into the left lane.” Not only it’s needlessly long, it will simply be ineffective because very few would actually have time to read and respond.

Wrting for Web

Among seasoned UX and web professionals, the age of “Click here to do this…” certainly have come and gone. However, the bad habits of the early web still lingers on in more places than you may realize. And I think this traffic sign metaphor could be a simple and effective way to convince why we need to write for the web the way we do.

You suck at design. Deal with it.

A designer by definition is one who is responsible for, well.., designing. It is the designer who comes up with solutions to a design problem. A designer tackles design problems with artistic intuition, creative process and career specific knowledge that other members of the organization may lack.

Design Review

Unless you are designing for yourself, a designer’s work is subject to review and approval by someone else. Whether that someone else is a client, stakeholders, manager, or business leaders, someone always has something to say. (I’ll refer to them as reviewers from here on.)

As a result, it isn’t uncommon for designers to feel that too often they are given design directions by non-design people. Designers complain that they are being asked to do things that are in conflict with their intuition, design principles or what they believe is right. Many designers end up making changes against their will. Some even literally apply the feedback verbatim as they were blurted out during the meeting. Not only the integrity of design is compromised, many frustrated and exhausted designers complain that they have become mere order takers and that creativity is gone from their role as a designer.

Which is partly true. Creativity isn’t required if all you do is exactly as told. A reviewer may say “I think it needs to be bold”, “we need to add this and that” or “I think it needs a line over here or there” or whatever. Sometimes the feedback appropriately points out things that designer may have overlooked. But what if you strongly disagree with what’s been said? What if those are things you’ve already tried that didn’t work? This is the critical moment when a designer must seek for an opportunity to be creative. This would be the moment that dictates whether a designer accepts being an order taker or continue to be a designer, a problem solver.

It’s important to remember reviewers are not designers. In most situations, they are not consciously giving design directions as much as it may sound as if they are. They are simply reacting to the issue in question. Designers must learn to analyze these reactions and pinpoint what may have caused such reaction and provide solutions. We have to remember that most of these reactions are impulsive and instantaneous much in the same way a test participant would react in user testing sessions.

When I’m tasting something that I think is bland, I might say “I think it needs some salt.” But I’m not a cook. I have no clue what other ingredients are involved or how they affect each other. It may or may not be salt. But due to my lack of knowledge in culinary arts, that’s probably all I can say as far as my reaction goes.
A seasoned cook would not take my feedback seriously especially if salt is not the solution. Likewise, a seasoned designer should learn how not to take every feedback literally.

Never resort to “well they asked for it. I’ll just give it to them” type of mentality. That is the worst thing a designer could do in a situation and will only lead to disaster. Not only for the design project in question but for designer’s career as well.

Once we discover the root cause of the reaction, we have the opportunity to solve the problem using our creative judgment. Take it as an opportunity to give back more than what was asked. Most reviewers are appreciative that the designer took the extra effort to address the problem and are rarely upset their literal words are ignored. Because it wasn’t ignored. The feedback functioned as a catalyst for the solution. Most reviewers realize this and are pleased that they were part of the solution.

As a creative individual, a designer has the power to turn things around even in seemingly unfavorable situations.
Think about the proverb “Instead of complaining that the rose bush is full of thorns, be happy the thorn bush has roses.”

Smart consistency vs. Foolish consistency

The words ‘simple’ and consistent’ is thrown around all the time in design and web development circles. Clients, stakeholders, designers, architects and developers alike all over love to blurt these words thinking they are some sort of silver bullet to designing.  Some simply feel they need to say it because they’ve heard other people say it all the time. Some wave the simple & consistency flag as a way of saying ‘don’t-want-to-create-any-more-work-than-we-can-get-away-with’ sort of thing.

Contrary to their literal meaning, being simple and consistent isn’t that simple at all when it comes to designing web applications. The fact is that majority of  people who want simple and consistency don’t even know what simple & consistent really is or what they want to achieve by being simple and consistent. (Maybe except for the people using it as ‘don’t-want-to-create-any-more-work-than-we-can-get-away-with’; They’re simply using it as an excuse to be lazy.)

Is consistency consistently good?

The concept of consistency is one of the key principles of interface design. Because consistency generally helps achieve better usability and enhance comprehension when used correctly. But consistency does not automatically guarantee better usability. Consistency is good only when it works to create positive experience for the user. There are situations where  the context dictates the logic and we need to be flexible in order to deliver more logical experience for the user. When such need is ignored and simple & consistent is blindly applied merely for the sake of being simple and consistent, it most definitely will lead to what’s referred to as ‘foolish consistency’ where inability to think creatively and refusal to be flexible lead to bad design.

Consistency also doesn’t mean everything should look the same. However, to be totally fair, there are websites that are literally simple and consistent that work very well. For one, we all know this very popular simple and consistent website. The concept works well for them but may not work for projects that you and I may be working on.

Consistency has more to do with the way things work than how things look. Usability suffers a lot more when an application is logically inconsistent. Visual consistency functions as a supplement to the predictability that application’s logic creates. Granted, there are times when an application’s logic needs to be flexible as well to give way to better user experience. When usefulness and consistency collide, the former should trump. Always. It’s all about making the right compromises at the right time in the right places.
A good designer is one who knows what consistency really is. A great designer is able to distinguish between bad consistency and good consistency.

Clean does not mean tons of white space.

Simply being clean and simple does not equal good design. That’s like saying cemeteries are  works of art because they are simple and has nice grid. Imagine a pile of random Lego pieces. At first glance, it may look like chaos but it really isn’t. Because everyone including toddlers immediately figure out how those pieces fit together. That’s because the logic behind how Lego pieces work is simple. Color or the shape of the pieces are immaterial in achieving such simplicity. And that should be the driving principle behind everything  we design. It’s not always the color choices, size of text, graphics or layout that makes something simple to use. It’s the predictability that such logic help form in the user’s brain that ultimately makes something easy and simple to use. And being consistent in presenting the logic help achieve better usability.


Simplicity and consistency is crucial in designing web applications. But applying these concepts in correct manner is a very sophisticated art both visually and logically. First and foremost, an application’s logic needs to be sound. Is the navigation structured and wired logically? Do menus, buttons, or transactions work the same way across the site? Do your users know where they are going or what they expect to happen before performing any action? These are some of the things that need to be answered before anything visual can do their magic. Visual design by itself can only achieve so much. Know that a great visual design is not a substitute for flawed application logic. Also, knowing the rules is important as well as knowing when to bend the rules. All of that combined is what distinguishes great designs from the rest.

Single Brain UI Design & Development

Many UI professionals – typically in smaller to mid-sized organizations – are responsible for both visual design as well as front-end development. In such set-up, a UI designer/developer works directly with back-end programmers usually with the same code base and in the same environment. The handing over of files between teams and the need for extraneous instructions is virtually eliminated. This typically results in far more nimble and accurate transition from concept to execution.

How do you organize your workflow when you are both the designer and a developer? Which do you focus on first? Attractive design, usability, or efficiency? Below are high-level breakdown of workflow that, for me, have resulted positive outcome in numerous occasions.

1. Make it usable first.
2. Make it somewhat pretty and presentable.
3. Make the interface behave the way you intended.
4. Make it dynamic. Optimize. Modularize.

1. Make it usable first

First and foremost, this involves understanding the business needs and requirements. It also requires that you come up with a logical organization and breakdown of content and its delivery. Which basically means knowing what is important on a given page. What is the goal of a particular scenario? What should be in focus? Which elements are the star of the screen? And which are secondary or supporting elements? Answers to questions like these ultimately dictate design patterns such as font size, font-weight, placement, white space and sometimes shade and color*. This is easily the most crucial step of the design process. If you don’t get this step right, it doesn’t matter how pretty or trendy a page or the site looks. It just won’t work. No amount of cool animation or interactive bells and whistles is going to make up for the failure to communicate.
(* Although I was always a firm believer that a highly intelligent, highly evolved designs should work even as black-and-white or monochromatic, I realize strict enforcement of such belief isn’t always feasible nor practical.)

2. Make it somewhat pretty and presentable.

This is the step where you refine your markup and the CSS. A lot of the styling and formatting applied at this stage is more or less the direct result of the decisions made in the previous step. This is when you can also think about how to organize the front-end dependencies such as stylesheets, javascript, libraries, CDN, images, media files, markup and include files. I almost always use some type of server-side includes even for the prototypes. When developing locally, Mac OS can easily be setup to run PHP or for Windows, you can install something like WAMP. I say ‘somewhat pretty’ at this stage because you’ll be tweaking and fine-tuning the style throughout the next steps and probably right up to the point when the site is about to go live.

3. Make the interface behave the way you intended.

This is when you add interactivity to the interface to bring them to life. It’s much too easy to get carried away with javascript behaviors and effects. Effects should never be added simply because they are cool. If they don’t add any value, enhance usability or support communication they are distractions. And also remember that nothing is free in programming. Every interactivity adds cost either in performance, maintenance or something else. There’s always a cost to everything we add.

4. Make it dynamic. Optimize. Modularize.

Rarely anything we create for web these days are static. Also, many of the interactivity and behaviors may be dependent on dynamically pulled content or data. Elements such as menu, text, links, images are rarely hardcoded in the markup (actually, they should never be hardcoded). Whether you ultimately work with a database, XML, JSON, or third party content, it’s important to first make your code work with static content before attempting to write a complex code involving dynamic data. Start simple. If you can make your code work the way you want with static data, introducing the dynamic data later on should be simple.

Also think about the ways you can optimize your script. Find ways to write less code. If you find yourself writing a similar function more than once, chances are, you may be able to write it only once using variables and parameters. Are you repeatedly targeting elements using unique class names or id? Instead, try to find a unique identifying pattern in the DOM so that you can target elements without using given names. That way, you are making the code reusable; the same code or function can be used over and over again for other similar tasks.

Modularize your code. It basically means do not wrap everything in one huge block of code. For instance, if a particular function is made up of several smaller functions, separate out the smaller functions, put it outside, and make it reusable. The idea is to make your code work like the old Lego blocks, generalizing its purpose so a piece of code can be utilized in more places. Note that I said ‘old’ Lego blocks. Many modern Lego pieces are overly specialized that they exist only to serve a single purpose which is not the direction we wan to take with programming.

Looking at average Joe’s interweb

Not that long ago, when the general public was just getting to know the internet, the imagery, text, spinning globe, and flashing colors shown through a big fat CRT monitor was collectively referred to as the internet. To an average person, the computer or the internet is what you see on the monitor. Ever seen movies where a man with a gun shoots at the monitor thinking he’s destroying the computer? Right. I bring this up to point out that to the general public, the internet has a physical size; it’s the size of the monitor or the display.

Throughout the early years of the internet boom, computers became a necessity if you wanted the internet. Companies and professionals who work with computers buy them as tools of the trade. They always have and always will. But what if you were someone who otherwise absolutely have no need for a computer? In those days, you were forced to buy one. You simply had no other choice if you wanted the internet. Since the internet was the “thing”, everybody bought a computer. This is the time when PC sales skyrocketed exponentially.

Fast forward to modern times. PC sales plummet exponentially. In this day of mobile internet and smartphones, an average Joe doesn’t need to buy a full blown computer to use the internet (you can configure a wi-fi router using a smartphone, in case you were wondering). Computers as we know it is no longer a required appliance for most households. These days you’d buy a full blown computer only if you need them for your job or hobby. Otherwise, you can get away by having a tablet or a smartphone and still fully enjoy a modern, connected lifestyle. You can say for the general population, the internet is actually getting smaller, physically.

What does this all mean for us web professionals? The first Sony Walkman altered how people enjoyed music. It made music personal and portable. As the portability of music evolved so did the delivery method from cassette to CD to mp3 to cloud. When the microwave oven modified the way people prepared food, what we buy from supermarkets changed. Content stayed more or less the same. It’s just the delivery method that change.

In recent years, we’ve seen online content delivery methods evolve into various forms such as apps, mobile sites, and responsive and adaptive designs. Web professionals are among the quickest to adapt to change. Even as we speak, we are in the middle of an undeniable revolution that will change the form of the internet itself. We have already focused on mobile first. But many of us are still under the assumption that a typical user would have a choice to view something on a larger screen. I predict that such assumption may prove to be false in few short years. For most people, a tablet or a smartphone may be the only screen. This will affect how we design and deliver web content at all levels.

As the “smaller” internet becomes the norm, it will continue to create series of challenges. Portable music players have become ubiquitous but there are still people who listen to music sitting at home through a large loudspeaker. People still prepare food without using microwave oven. An original form in which something was popularized usually takes generations to vanish completely. Vinyl records are still being produced and film photography still exists. Likewise, there always will be a demographic using the internet on a large computer screen. There will always be serious business applications that may only be used on large screen. As web developers and designers we need to be prepared to cater to all of the available platforms.

We know that in some way or form the internet will exist. And it’s logical to expect that many new and strange platforms and devices will continue to challenge our creativity until we are stuck by a giant comet. It’s not easy keeping up and being alert in a field where the next big thing becomes so last week in matter of hours. But luckily, there are plenty tools and technologies available that will enable us to tackle such challenges. It’s fun and interesting time to be in the web development profession.

As far as future movies go, I think Hollywood producers are more likely to get it right when a dude with a gun shoots at a computer which will most likely be a tablet of some sort. In which case both the display and the data would be destroyed. That is, unless, the data have been stored in the cloud. =)

Recommended Books for UX Professionals and Designers

Like many people in my line of profession, I have overlapping duties: part UI developer, part visual designer, and part UX/usability consultant. Because front-end code, front-end design, and user experience are all tightly connected and must work in harmony. The designer in me directs me to make things cool and trendy, the UX expert in me tells me I have to make things that work, while a developer in me insists I need to make things efficient. They all keep each other in check because we don’t build things that are merely cool and pretty; we build things that must also work.

In the past, I have read books on business and marketing and it naturally led to books about social behavior and psychology. These are not UI, UX, or design books but the topic of social psychology and behavior is directly related to what people in our profession must care about in order to make things that are usable. How people behave online is not totally unique to that medium; it’s often related to and inter-connected with offline behavior as well. The way the human minds work and how we design things around it is universal across all medium. Therefore, the topic of social behavior is very much related to what we do as UX professionals and designers.

I have selected three books that I found most memorable and intriguing. Even with seemingly dry subject as social behavior/psychology, I find many of the research and findings quite interesting and even entertaining in many cases. And the knowledge gained proved to be indispensable during the course of my career.

→ Blink – by Malcolm Gladwell

→ Predictably Irrational – by Dan Ariely

→ Nudge – by Richard H. Thaler

What Users Say vs. What They Really Mean

In the course of my career I’ve been fortunate enough to have attended numerous usability test sessions. I had chances to observe  many varieties from the most entertaining to the gawdawful boring, a fifty-something man operating a mouse with both of his hands to a tech-savvy who checks the view source.

Technology and devices have come a long way and continue to challenge designers, developers, and UX experts. However, what we take away from the usability testing remains constant; as an user experience professional, we need to know how to filter, translate, and interpret test results.

First of all, let’s establish one obvious fact; how users behave or react during the test isn’t exactly how they would behave or react in the real world situations. In addition to the fact that most participants are after some cash or gift as a compensation, whatever they do during the test has nothing to do with their personal loss or gain. They are not really serious about the choices they’re making. Knowing that they’re playing along a fake scenario and not having to worry about consequences do affect users’ response. That is why it is critical for UX professional to learn how not to take what users say literally. The truly valuable insight into the users’ minds are hidden between the lines.

We need to master the art of translating the literal meaning into its actual meaning. A user blurts out “I’d like some sort of instruction here telling me what to do…” Does that mean the user really wants to see an instruction? The worst thing you can do is add an instruction right where the user thinks it should go. There are many ways to guide or nudge the user to intended path without extraneous text or instructions.

When interpreting user’s response it’s important to think about what may have caused such response. What users say is almost always less important than why they said it. Drilling down to the ‘why’ will guide us to the root problem. User’s responses are symptoms. They are not describing the problem. That difference is vital. Ability to distinguish between the symptom and the root cause is singlehandedly the most important skill a UX professional must master. Knowing that one vital difference is the key in avoiding flawed usability testing. Also know that the root cause rarely boils down to a single culprit. Issue in question may have arisen from multiple sources that caused series of problems.

It is also important to be able to distinguish preference from true usability issue. Any given response from a test participant may be a mixture of personal preference, emotion, and thought process. It’s the trained observation skills and keen understanding of human behavior that effectively identify and extract useful information from such unsorted output.

We also need to remember that usability does not have direct one to one relationship with how attractive something is. There is a correlation to some degree, but it is quite possible for an ugly site or an app to have strikingly easy to navigate interface and clearly defined user journey as it is possible for visually attractive site to fail miserably on all accounts.

Oh my, what’s up at Apple…

I really couldn’t care less about the fact that the new iPhone that Apple introduced three months late wasn’t an iPhone5. However, as a web designer, I do seem to notice somethings more than others. Things like how they present new products on their website, design, layout, etc.

If you visited today, you’ll see that somebody was in a terrible hurry to get the iPhone site up. The iPhone images used in the slides weren’t properly cropped. Someone forgot to remove the white background on the corners and between the buttons. This became obvious because they added drop shadows behind the phones (I’m sure Apple probably have fixed this by the time anyone reads this post).

iphone image on

iphone image on

Things like this never happen on Normally, something like this would never fly under designer’s radar at Apple or elsewhere. There’s only one explanation for such goof up. The phone images were switched at the very, very last minute. So last minute that no one at Apple had a chance to review the page.
Maybe it was images of iPhone5 that was originally meant for this animation. We’d never know…

Using Google Web Fonts

Google Web Fonts API now makes it even easier to use web fonts on websites. The days of choosing between Arial or Verdana are long gone. Hundreds of available Google Web Fonts are totally free and open source. The interface is simple and intuitive.

Google Web Fonts

The @font-face CSS stylesheet is automatically generated on Google’s end. All you have to do is embed the link and define font style as you would normally:

<link href='' rel='stylesheet' type='text/css'>

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

You also have the option to choose multiple styles or font weight (on most fonts) before embedding the code. However, having to embed too many font or styles will slow down the page load. Thankfully, the interface comes with a nifty load impact meter. Although numbers indicated on the meter seems arbitrary, the colored zones give you a good idea of the relative impact. Have fun!

Pretty Loaded

Days of Flash loading screens are long gone…, well, almost.
Designers used Flash loaders to retain visitor’s attention while pre-loading bunch of other Flash stuff. Some of these short movie clips from the heydays of Flash were very creative, entertaining and enticing. PrettyLoaded is a growing collection of Flash Loaders from the past.

Pretty Loaded

Is WordPress Killing Web Design?

As a designer or developer if you’re simply tinkering with CSS that someone else has created or if your idea of of a layout is relocating ‘Widgets’, then your creative options may be limited.

But WordPress is much more than CSS and Widgets. The real beauty of WordPress is in creating your own theme and letting the WP’s framework take care of the database driven dynamic content. In creating a custom theme, you have as much freedom as creating any HTML from scratch. Building layout with HTML and WordPress PHP tags is like playing with Lego blocks where your imagination is the limit.

So is WordPress limiting creativity? Absolutely not. It’s not WP’s job nor its intention to dictate layout or design. All WordPress does is generate dynamic content in the back-end so that you don’t have to worry about it.


Designing a Better Business Application

When designing a page that draws set of results from collection of data (i.e. database) the screen layout should be designed to serve three core states of the application; Normal, Empty, and Error.

Normal State: is when system returns expected results.
Normal state can be further broken down into two sub-states:
– Overflow State: when the system returns too much results.
Minimal State: when the system returns too little.
Empty State: when system returns no results

Error State: when system returns unexpected results due to system or user error.

Intended layout, aesthetics, and usability of the page must be preserved throughout all of the possible states described.

It is important to use sample data sets or content that closely resemble the real-world scenario. Pages designed around irrelevant placeholders result in compromised usability, awkward layout and aesthetics when asked to handle production data.

Following are some points to consider:
– Maximum or minimum character length
– Anticipated amount of text (for heading or paragraph)
– Date or text format
– Amount of data (If only one or two lines are returned, does the table get lost on the page? Does it get buried under heading or text? Is the information still legible?)


Applications designed for the web, by nature, change and evolve over time. Designers need to think about not only how the UI works now but how it would expand, get modified and improved over time. User interfaces and interactions need to be flexible enough to easily accommodate the future. This applies to design as a whole or individual feature.

Modifications may include:
– Addition of features, links or menu items
– Deletion of features, links or menu items
– Modified interaction
– Corrections
– New mesh-ups with third-party applications
– Optimization

The design should also take into account the possibility of customization, variations, or internationalization that caters to various clients, markets or cultures.

An application should not only be able to support multiple languages, but layout and usability should also be maintained across various internationalizations. Consider the impact on the length of text in button labels, table headings, columns and other areas where real estate may be limited.

Cultural Difference
Designers should also be aware of the cultural differences. For example, different colors or shapes may carry different connotations in other parts of the world.
There are other socially sensitive issues that design need to take into account. For example, what radio button should be placed first? Male or Female? Which country should be listed first in the dropdown? Should it be strictly alphabetical or context sensitive? Things like this may have significant impact depending on the culture and the context.

Using hints to provide a clear obvious path is preferred over alerts, error messages, or lengthy instructions. In addition to concise textual hints, design elements such as white space, positioning, size, texture or color can contribute to guide a user complete the task successfully.

The best error message is no message at all.

As much as we try to avoid more interactions than absolutely necessary, there are scenarios where the app inevitably needs to require significant involvement from a user – whether in the form of additional clicks or additional pages. This may be due to technical limitations, business requirement, or other non-controllable external forces.

Users of business apps look to results. They are not looking to get entertained or be amused. Often in a business application, a reasonable amount of repetitiveness can be tolerated in return for improved accuracy and/or security. In a business app, when saving a click and accuracy collide, accuracy should always trump.

Focus on Activity-Centered Design
Sometimes overly emphasized user-centered design can lead to haphazard results and chaos. It shouldn’t be the goal of the design to cater to every possible user limitations or problems. Design must focus on the goal of the user. An activity-centered design focuses on the scope and the context of the utility in question rather than on the users’ ability (or inability), preferences or behavior.

This approach – by guiding or nudging the user in the right direction – is far more likely to yield desired results than correcting the user when errors are made.

There is no single perfect solution or design for a given problem. Designing web application for the most part is about making appropriate compromises at the right time and in the right places. This is especially true for enterprise applications with complex business requirements and constraints.

Advancements in front-end technology in recent years have made many ‘cool’ features on the web possible. We are in an era where if you can imagine it, there is always a technology or techniques that can make it happen. As a result, many are currently being used and also abused. The question now should be not ‘is this technologically possible?” (because, most likely the answer would be Yes) but “is this cool feature really necessary?”

Cool features or behaviors shouldn’t be used for coolness sake or just because it can be done. Like everything else on the web app it should be used only when it’s absolutely necessary for the task at hand.

Providing Alternative
Providing alternatives is a good idea but only if the alternative offers something new or different that the first method did not. Creating more than one way of achieving the same thing only creates confusion and noise unless they both present unique benefits that couldn’t be shared. For example, an application may provide options to view set of images and data vertically in a list or as a thumbnail grid. Each option provides benefit that the other cannot offer. List view may include more details while grid view shows more results at a glance. Both of which are difficult to achieve in a single solution. Therefore, proving an alternative view option is rightly justifiable.

Silly example from Apple website

Apple is usually sensible especially when it comes to their website design and usability. But I noticed something on Apple’s site that sort of insulted my intelligence. This happened when I was browsing their site for a new Macbook Pro. Once you drill down to the product detail you will see an image of the Macbook Pro on the right hand side. Below it are three links that let’s you view the three different sizes that MacBook Pro comes in; 13″, 15″, and 17″.

Continue reading

The iPhone Cover-Up

The new iPhone 4, like generations before it, is a beautifully styled object. It appears cunningly simple at first but the amount of attention given to detail and design of each piece that make up the exterior is truly admirable. The texture, the curve, the sheen and the bevel of each button and pieces are styled and carved to make this one of the most strikingly elegant industrial design in recent years.

iphone 4

Continue reading

Understanding your clients


Hardest thing about being a designer is not the designing itself, it’s understanding clients. We all have dealt with indecisive clients who don’t seem to know what they want and change their mind all the time. There are times when approvals or design sign-offs seem to have no effect at all. Most designers don’t have a clue why certain clients act this way and conclude that clients are insane. Designers become frustrated and switch from creative to “just-get-the-shit-done” mode. This happens all the time whether they realize it or not. And most clients end up with work done in the latter mode. This isn’t cool nor healthy for either parties. And since we can’t and shouldn’t expect clients to change their way of thinking, we should look at the matter in a slightly different angle. I’ve discovered that by looking at how we (designers) do things, we may be able to understand why they (clients) behave the way they do. Continue reading

Flash – How to hide layers from movie without deleting the layer

I had quite a few people ask me how they can hide a layer in Flash without actually deleting that layer. The little “X” below the eye icon hides a layer from view while you’re working on a file but doesn’t hide that layer from a published movie. What if you don’t want certain layers to be published in a movie but yet do not want to delete them in case you want it back? Many beginners simply delete the layer, test movie, and then undo the deletion if they want the layer back. While this works, it’s not very elegant nor efficient especially when you’re dealing with multiple layers. Not to mention relying on undo is very risky in Flash.

This is where the “Guide” layer comes in. The Guide feature is originally intended to hold a path on which an object should move. Since you wouldn’t want the guide to show in a movie, Flash hides any layer designated as a guide. Since you can designate any layer as a Guide layer, this in turn works perfectly in case you want to hide a layer from a published movie temporarily. Just turn the guide on to hide and turn it back off if you want to include it back in the movie! Simple and elegant.

Flash - Hide layer from movie

Get to know WordPress plus real web development


I’d like to single out yet another skill-set a web designer must be aware of. It’s WordPress. The enormous popularity of the WordPress platform along with blogging and simple content management has transformed the way we build lightweight websites. It’s unlikely that a large scale site or application would be built entirely of WordPress but we see it being used in blog sections of popular websites such as The New York Times.

WordPress has become so popular, that in some circles, a web designer is known as someone who customizes and designs for WordPress. Contrary to popular belief, however, working with WordPress does not free web designers from the need to learn and gain knowledge of other existing web technologies. WordPress is like a well prepared blank canvass that a designer or a developer must enhance upon. WordPress only frees us from reinventing the wheel, but as far as improving and spicing up the wheel, we can all get creative and sky is the limit.

It’s easy being Picasso

Seriously. Picasso created art as he saw fit. No one questions Picasso. If Picasso decides a woman’s right eye should be twice as large than the other, no one dared to argue otherwise. When Picasso sees a nostril of a goat would be a good match for a woman’s face, people go crazy throwing hundreds of millions of dollars at it.

I would guess that Picasso rarely had to deal with user experience, commercial feasibility, cultural compatibility, revisions, or approvals from fifteen different people. Those things are what lowly designers like us worry about. Because um…, we’re not Picasso.

Complainers are innovators in web development

For those of us who have been developing websites since the 1990s, it’s easy to lay back and say “it won’t get any better than this” as far as front-end development and client-side technologies go. We’ve lived through the early days of web development using primitive HTML tags, rustic browsers, and all of the growing pains of web. It’s amazing how the craft has improved over the years. Stylesheets are now well supported, browsers are much smarter and compliant, not to mention numerous javascript libraries and access to developer communities. So it’s easy to think this is the pinnacle for our tools of the trade.

But let’s think for a minute about those who began their career as web developers just a few short years ago. Things that we old schoolers have come to appreciate and find fascinating are taken for granted by the web newbies. The current technology is nothing new to them. It could have existed since the stone age for all they know. No one thinks about the origins of things in the web profession. And just as how we were distressed and annoyed with the limitation of the technologies of the time, the newbies now are going through the same phase. They aren’t satisfied with what they’re given. They complain about the limitations of the CSS. They complain about browsers not being perfect. Of course, we complain along with them because appreciation for technology is very short lived in this profession.

But you know what? That is a great thing. Because from that very dissatisfaction and from this cycle that web professionals go through comes new great ideas and continuous improvements. If no one complained, we might not have advanced to where we are today. It’s important that you complain. It’s important to want more. It’s important not to accept anything as a means to an end in web development. Everything is a beginning and a process.

So you wanna be a Web Designer

Many, many years ago, a web designer was someone who came up with somewhat believable Photoshop renderings of what a webpage could look like. Sometime later a web designer was expected to know some HTML along with pretty good Photoshop skills. A few years later, a web designer had to have some javascript knowledge, have good HTML skills, Photoshop knowledge along with decent discipline in aesthetics. Next, a web designer became someone who knows about CSS, DHTML, XHTML, XML, XSL, JSON and AJAX along with number of scripting frameworks.

Today, a typical web designer is most likely armed with most if not all of the skills mentioned above. Also, a web designer must possess a working knowledge of various web languages and a pretty good understanding of the programming language in general not to mention the knowledge of databases. Otherwise, it’s difficult to earn any  respect or work with other web professionals. In another words, a web designers is a serious jack-of-all-trades. Prepare to be overwhelmed.

You suck at Photoshop

If you haven’t seen You suck at Photoshop tutorials, start watching now. Not only you learn quite a bit on how to use Photoshop for your everyday casual use, the guy is hillarious. It’s not all jokes and comedy. These are genuine Photoshop tutorials. And no, the guy isn’t retarded. He just talks that way and it works. Here are few of my favorite ones. Discover them all on youtube.

You Suck at Photoshop #5: Select Color Range

You Suck at Photoshop #7: Patch Tools and Levels

You Suck at Photoshop #8: 3D Layers