UI / UX design for Web by Pixel

The User Interface (UI) of a program is how it looks, while the User Experience (UX) is how a program works in terms of user friendliness. 

As a graphic artist for Web by Pixel, inc, I am involved with both processes. Below is an example of the user interface for setting up a blog post. When you click the question marks, hints are revealed, however the interface itself is straight forward making it easy to post a new blog post, a convenient way to add content to a website.

UI / UX example

This is of course a somewhat simple example of UX. A more intricate example would be a shopping user experience. Will user registration take place? What should the options be as the customer is guided through the check out? How will it work if the product is a download and not a physical product? Should the customer register first, then shop, or shop first, then register? Sometimes there is an industry standard set of expectations that you have to adhere to, but more often than not, there are also several points where multiple options make equal sense and is more a matter of matching the experience with the business' brand or policies offering the service or product.

Mobile friendliness

One of the things I also look at is mobile and tablet friendliness. Most web traffic comes through some sort of mobile device now, so having a good user interface and user experience from such a device is crucial for a great overall web experience. Sometimes it is only a small change that needs to happen when switching from a desktop to a mobile device such as simply scaling an image. Other times it can be changing out graphics entirely to best utilize the long and narrow cell phone format.

Desktop / mobile device tabs example

Here is an example of how a tabbed design can change to buttons when switching from a desktop view to a mobile view.

Desktop view

Mobile device view

Read more about Web by Pixel