Background

This project was my final project of the “Propädeutikum” in ZHDK, we had the task to create an artwork with the topic “right / wrong”. I decided to create the “right user experience” which I called RUX. This is nearly impossible, but Ii wanted to get as close as possible. My goal was to create my portfolio online, once as a RUX website and once with the wrong user experience. Under discussion with the experts, we came to the conclusion that the best thing would be to create a guideline first and then create the right website according to all the rules. And last but not least create the wrong website where I will try to break exactly this rules.

Simply put, User Interface (UI) is how things look, User Experience (UX) is how things work. UX is a process, while UI is a deliverable. But it also often goes hand in hand. “Design is not just what it looks like and feels like. Design is how it works” -Steve Jobs

Guideline

The first step was research. I collected all the rules and all the guidelines that I could find and created one big collection of all of them. Step by step I broke it down into the essential information. My goal was to create a guide with max. 10 rules, which everybody can adapt for every website project. I introduced rules that are focusing on the practical part of creating an User Interface. However, you need more to create a RUX. Following my guideline not only means to read it, but to own each single rule. To get to that point, for example, it is very important to do a soundly research on the topics you are are working on. That means that a set of rules will not do the thinking for you. However, the guideline will help you find the best way to create a nice and fresh user experience.

My first peers were the big names, like IBM (Carbon Design System), Apple and Google (Material), because Ii already knew that they publish and update their guidelines very actively and encourage designers to work according to their rules, when designing interfaces for their platforms. And I got a lot of knowledge from the danish association “Interaction Design foundation”, or the “Nielsen Norman Group”. I also found sites like lawsofux.com, which already go in the direction, that I wanted to with my guide.

Links to my Sources:

carbondesignsystem.com

developer.apple.com/design

material.io

interaction-design.org

nngroup.com

lawsofux.com

Example

It was very important for me to have a web based portfolio. So I took this portfolio as an example to test my newly created guideline. The transition from the print layout to a mobile first web application was a challenge. But thanks to the RUX guide I had something to hold onto.

I already mentioned lawsofux.com in my guide. I liked the website very much and it followed almost every rule from my guide. That’s why I took this website as a blueprint and built my website according to it. Also, I really like medium.com for it’s readability of articles. So I used it as an inspiration there when it came to the detail pages.

My website