Tuesday, July 12

UI Playground - Samaritan (Person of Interest)

UI Playground?

Every day we are inundated with user interfaces. Television shows, video games, restaurants, and stores. User interface are everywhere. Some of them are really well done works of art. Others can make your eyes bleed, not really, or at least give the user a bad headache.

I have decided that I want to document, and experiment, with some of the more interesting user interfaces I find. The first one I am going to start is "Samaritan" from the tv show "Person of Interest".


According to the television series Person of Interest: Samaritan is an artificial super intelligence by a student colleague of Harold Finch's. Samaritan was first discussed in the episode "Lethe", season 3 episode 11. You get part of the start sequence for Samaritan in season 3's episode 23.

The Template Files

Every project starts somewhere. I will be programming this in HTML with the help of CSS and Javascript. This code is the bare template I use.

Samaritan's Startup Sequence

The first screen we see of Samaritan starting up is one where the background is white, and the display is sectioned into three sections. The left and right sections appear to be roughly 17.5% of the width each. Leaving the center section to have a width roughly of 65%.

For my purposes I am going to recreate Samaritan's user interface inside a main "DIV" element with the name of "Samaritan". and a second "DIV" element which will contain everything displayed in the center section of Samaritan's interface. This should make things easier later on when I want to animate elements of the interface.

There are a couple of places where there is information initially displayed on this screen. Now I was not able to completely make out what that information was. I was able to approximate that information using two different ordered list elements.

The first ordered list is used for the information displayed at the top left. The second ordered list is used for the information displayed at the bottom right of the center section.

Continue with ...
.#2 - ???


Post a Comment