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 HTML and CSS.

See the Pen Deconstructing Instagram by Brian Dys Sahagun (@BrianSahagun) on CodePen.

We, as Visual Designers, have experienced how time-consuming it was to build the Front-End of a design mockup basing only on a simple image.

The Design Handoff warrants to have more than the Brand Guidelines, Style Guide. It must also have some form of Information Architecture and Interaction Diagram that could greatly make Front-End Development faster.

The Elements of User Experience by Jesse James Garrett

I am re-reading the book The Elements of User Experience by Jesse James Garrett to update and realign myself with the basics of my design work.

My primary goal is to establish a system that could aid in producing visual designs that are anchored to an abstract entity such as an Information Architecture document. Could this be possible? We will find out in this journey as I modify and add to this knowledge.

Here is a modified illustration of Jesse James Garrett’s diagram:

Planes Elements of UX UI Design Perspective Front-End Design Perspective
Surface Visual Design Style Guide CSS
Skeleton Information Design: Interface Design, Navigation Design Wireframes HTML
Structure Information Architecture, Interaction Design Content Outline, Interaction Diagram HTML
Scope Content Requirements, Functional Specifications Content Document, Product Requirements Document
Strategy User Needs, Business Objectives, Site Objectives Product Requirements Document

This is only a rough draft. The UI Design and Front-End Design columns show what I am working on.

Stay tuned for more updates.

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 to be addressed.

In turn, we might neglect designing for the different states of the component or the whole system that we are designing.

In general, here are the different states a component might be in:

  • Populated
  • Blank

Populated

The populated state simply means that the component has been modified to have its intended content. In the example of an Accounts page, there is at least one account created.

See the Pen Component State: Populated by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

Blank

The blank state occurs when there is no content – whether it is the initial appearance or a result of removing all previous content.

See the Pen Component State: Blank by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

Always consider the design of the other states of the components.

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:

The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.

And from there on, we build towards Visual Design.

Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.

Can your design stand in black and white?

Can your design stand in a serif font?

Yes, it should.

Web Typographic Hierarchy

Designers must establish a typographic hierarchy in their web designs.

This is not random; this is written in a style sheet; this is designed.

The typographic hierarchy aids in making reading web texts easier.

Here is an example of a designed web typographic hierarchy:

The baseline is 16px; from there, up scale is multiplied by 1.5 and down scale is multiplied by .75.

Small: 12px
Medium: 16px
Large: 24px
X-Large: 36px
XX-Large: 54px

We should not go beyond 12px because that would be too small for the naked eye.

As a designer, you may now decide which heading level is Large. In this case, I would say Large is H3, X-Large is H2, and XX-Large is H1.

H4, H5, and H6 would be 16px but with different additional styles to differentiate them when put in the context of heading and paragraph.

Subsidize Traffic

Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen
Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen

Metro Manila traffic is as bad as it is. We motorists make it worse when we employ “offensive driving” instead of defensive driving.

All types of vehicles, from the most expensive to the rusted ones, can get stuck altogether in the sweltering heat of the sun or the drenching gush of rain.

The least one could do is treat others as their road peers instead of road rivals. In doing so, we tend to subsidize traffic.

But how can one subsidize traffic, thus, improving the overall condition of it?

  • Stay on your lane
  • Let overtakers get ahead
  • Give way to lane skippers

Stay on your lane

You may skip from lane to lane as long as you don’t disrupt the flow in that lane. Disrupting the flow could mean inserting your vehicle in an exact space in between two vehicles in that lane. If you don’t want the cognitive load of deciding where the fastest lane is – stay on your lane.

Let overtakers get ahead

You’re maybe racing with time to a destination but don’t race with overtakers. They might be in a “number two” emergency situation, you never know.

Give way to lane skippers

And if there are cars inserting themselves into your lane, slow down and just let them. If you don’t, two lanes are disrupted – theirs and yours. If you do, then congratulations, you subsidized traffic!