Web Design: Difference Between UI and UX

What is the difference between UI and UX?

User Interface (UI) –  User Interface is a system by which a user interacts with a machine. Literally it means “user between face” – how the user ‘faces’ the system and how the system ‘faces’ the user. User Interface is like a component of User Experience, but not the other way around. Simply put, “user interface is the primary and tangible means by which the user experience of a product occurs”.

User Experience (UX) –  It is a user’s thought and feelings about using a system, product, or service. This human-computer interaction impacts a user’s perception of the system or device. Aside from practicality, User Experience stresses on the experiential,  meaningful, and affective aspects of the system.

Here’s a clever explanation from Vitamin T using cereal to demonstrate the distinctions:

Why is it important to distinguish the difference between UI and UX? 
It’s common to have UI and UX people on the same project, so it is important to distinguish the roles and to be clear which responsibility each of them would have. If you want the two master professionals contributing their individual expertise to the end result, then you need to beware the different specializations of the two. Overall, understanding the distinctions between UI and UX is essential to establish a foundation for a more successful final product.