Category: UX Design
-
Deconstructing Instagram
As an exercise on Front-End Development, The UI Team took a screenshot from instagram.com and treated it as if it were a design mockup. We then proceed to deconstruct its Structure and Skeleton (Elements of UX) thru Information Architecture, Interaction Design, Information Design. The knowledge that arose in this deconstruction was used in building the…
-
Voyager DX & IdeaSpace – 1st Meetup
I had the privilege of sharing about Organic Growth and UX with the IdeaSpace 2017 startups. This was a meetup event by Voyager DX (digital transformation). Presentation Notes Introduction First of all, congratulations to all of you, IdeaSpace startups in being part of this very helpful and enabling organization. I am also thankful to be…
-
What is the difference between good and bad UI design?
The difference is in the taste. Good UI tastes good while bad UI tastes bad. But some people like the taste of bad and some people like the taste of good. It makes no difference if you could serve what people like. Update: 20 May 2022 Looking back at my answer from almost 4 years…
-
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…
-
Revisiting CSS Levels
I am currently making a curriculum for the basics of HTML and CSS. Revisiting CSS Levels, I have written in the past about it: Building CSS in Levels Elements of CSS V2 CSS Principles #1 The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility…
-
Putting “Skip to Content” Into Context
Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate. Now you may ask,…
-
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…
-
3 Layers of an Active Element
Imagine this ombre cake: It looks yummy and it has layers. It is similar with active elements – they must have three levels for the purpose of CSS. The first level is the textual element itself. The second level holds the function of the active element (e.g., <a> or <button>). The third level is for…
-
Building a Technical Vocabulary
As front-end designers, we are using patterns over and over again – we are employing specific techniques to answer specific needs. But what we lack is a term, a name tag for those methods. It’s simply like the Flying V of The Mighty Ducks! So far, I’ve added Padding and Framing to my vocabulary. Let’s…