UX, UI and mobile first: An introduction

Recently, I read a news story that included a short history of smartphones and the growing “phablet” category. Dell introduced the Streak, a 5” smartphone, about three years ago with high hopes. The Streak subsequently bombed for a variety of reasons, one of which was it was “too big.” Fast forward to the present day, with Samsung’s successful introduction of the Galaxy Note II, and it appears that phablets are here to stay. Where else would we go, with shrinking tablets and growing smartphones?

For the graphic designer, this introduces a new tangle of definitions and responsibilities, especially since designers and web developers are now encouraged to design responsive websites and app interfaces for the mobile market. The battle cry of the market is now “mobile first.”

Here’s a brief summary of a few things you should know as a design student when designing for mobile:


UI is User Interface. The extended abbreviation GUI, or Graphical User Interface, is essentially the same thing. It is a pretty little display that stands between the user and a command they wish to impart to an app or computer. The current generation has almost never dealt without a UI, but all you have to do to appreciate what a UI does for efficiency is remember writing BASIC, try to execute a command in DOS, or work a little while in the UNIX-based Terminal area on a Mac. Once you try to execute a commany without a UI, you have an idea of what you’re missing. UI design for mobile depends on the pixel space of the target smartphone and on the requirements of the smartphone’s OS. Creating a pixel perfect design for your UI is essential and now expected in the field. If you’re really up for it, Android and iOS have their own development handbooks that discuss UI and UX principles for these platforms.


UX stands for User Experience. It deals, in short, with what a user cognitively expects when using a UI. Human computer interaction, or HCI, is a large field of study that influences UX. As people, we are trained by environments as to how we expect a UI to react. For example, if a button is pressed on a screen, we expect it to depress, then snap back, just like a physical button. We are also influenced by biology as to how many things our attention can handle at once, with the legendary number being about seven things. This number is backed by cognitive research and learning theories. There are several features built into mobile and tablet apps that do not exist for function, but rather exist to satisfy this cognitive side, such as start-up screens and transitions.

Microsoft UX guidelines

iOS Human Interface Guidelines

Android UI Gudelines

There are many, many more things to explore in the fantastic world of designing for tablets, smartphones, and (yes) phablets. I’ll follow up with more posts later.