Category: Interaction Design
-
Different Component States
In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need…
-
The Outline: That Thing Before the Wire Frame
As UI designers, it’s easy to jump into sketching UIs through wire frames. Afterall, UIs are commonly visual. But taking a careful step of planning before sketching is a rewarding way of ensuring that the information embedded into the UI is well-thought of. Just like it making speeches or writing articles, the writer may create…
-
UI Condition
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object. Example To denote that an article entry does not have content, we add the class ui-cond__entry–blank which translates to “the UI condition of entry is blank”. <div class=”ui-cond__entry–blank”> … </div>
-
Component Master List: Elements of Interaction
An action and a reaction that goes back and forth between entities is interaction. Here are simple examples of interaction between a user and computer: you press the power button of your mobile phone and it causes the screen to light up, showing a pass code input screen you input a pass code and the…
-
Component Master List: Elements of Information Structure
In this post, we will discuss Elements of Information Structure. We’ll use google.com as an example to demonstrate how information is structured in such a way that all its elements are identifiable in singles and in groups. Elements of Information Structure Contents of web sites and apps can be called “information” – these are words,…