"What Screens Want"
- we take things for granted because the transition was so fast and thorough
- use of metaphors in an interface
- ex. trash bin on the computer and in real life
- these metaphors are necessary to better understand
- it takes too long to relearn from the ground-up
- levels of abstraction gives us opportunities for efficiency
- need the proper amount
- need to go through a shedding process to make way for more nuanced abstractions
- similar to training wheels
- attitudes towards plastics changed over time
- it used to be an imitation, now it's its own thing
- if something can be anything, it becomes everything
- ex. facebook, digital calendars
- software is malleable
- now we buy the shape of the thing we prefer, not the things we want
- we want it to change regularly
- flat vs. skeuo
- both are wrong because screens are aesthetically neutral
- flux (the capacity for change)
- low, medium and high
- designers craft the interstitials or in-between moments
- develops a language of transformation
- the falsehood of maps
- incorrect, false representations
- things go bad once your mind uses these abstractions to consider the thing itself
- likewise, the web has been received like maps
- need to construct the web based on extensibility, openness, communication, community, wildness
- What screens want need to match up with what we want
"What The New York Times Web Reboot Gets Right"
- the new ny times website mixes the benefits of print and electronic
- No longer a page turner
- no longer have to turn the page - scrollable in a single one
- similar to the long newspaper format
- arrows on left and right offer a way to move between articles
- Comments as edit content
- comments are next to article, equal visibility
- New navigation
- accommodates various device sizes
- influenced by Times' touch screen apps
- menu on upper left
- con: it's confusing because it cascades three navigational paradigms into one menu
- pro: readers may like feeling grounded within a section, similar to print
- Home, again
- home page is busy = "link-farm"
- the transition between the home page to the Tech section is inconvenient - have to open the navigation menu, then go down to news, and then to tech from the fly-out menu
- black links, no longer blue
- good newspaper experience and maintains the New York Times feel
"Web Design is 95% Typography"
- 95% of info on the web is written language
- we are inundated with so much printed matter - information design is vital to organize text where the reader can find what they're looking for
- macro typography: overall text-structure
- micro typography: detailed aspects of type and spacing
- typography's duty is to convey information in writing - must be able to be read
- optimizing typography = optimizing readability, accessibility, usability, graphic balance
- few fonts
- typographer shouldn't care about what kind of fonts are available - should be mostly concerned with the organization of it
- screen resolution too low
- treat text as a user interface
- web designer's job to make sure texts are easy and nice to read on all platforms
- good web designer knows how to work with text as a user interface
"Reactions to Web design is 95% Typography"
- text as user interface
- typography is not choosing fonts, it's about shaping text for optimal user experience
- type comes first, the rest falls into place by itself
- we do not need to make sure the website looks the same on all platforms
- just have to make sure that it is as easy to use and as easy to read as possible
- designers today are preoccupied with ornamenting the website
- typographical wisdom: Tschichold, Ruder, Mueller-Brockmann, Weingart, Bringhurst
- understanding the web
- focus is on communication, not effects
- designer has to organize the design with regards to the message and to its audience
After reading the four articles I was most intrigued by the article by Frank Chimero. Throughout the essay, Chimero compares the Web to multiple objects. First to aspirin, then to plastic, and then to maps. The point Chimero was trying to make using these metaphors was that the Web is a malleable interface in constant flux that has the ability to change. For example, when plastic was first discovered, it was made to mimic other materials like leather. However, as time passed, plastic became "something in its own right" and then was used to make clothing, desks, phones, etc. People then expected it to change regularly. We now "buy the shape of the thing we prefer, not the thing we want." According to Chimero, there are several "levels of abstraction" when confronted with entirely new things. There is a line between too abstract, all computer code and learning from scratch, to not abstract at all, which is imitating something that already exists.
While there is an ongoing debate of whether things on the screen should appear "flat" or "skeuo," Chimero argues that each side of the argument is flawed. He explains that screens are aesthetically neutral. It is the in-between moments of transition which defines the Web. The most powerful metaphor Chimero used, however, was the interpretation of maps. Maps are made for easy sea navigation; when we forget this, we confuse these abstractions (or representations) and the intent of maps, and begin to think that the renderings represent the thing itself. Chimero gave an example of how he was surprised that his plane from Hong Kong to Chicago was going over the North Pole; He had forgotten that the world was sphere due to only seeing the world in flattened form on a map. Likewise, the Web has turned into a false representation of itself.
The last two readings covered the importance of typography. The typeface and font do not matter as much as its organization. The article explains that a typographer's job is to treat text as an interface itself. Due to the heavy use of text and lack of images, text has become a vital part of design which determines the ease at which the user interacts with the interface.
Architectural Record - Web
I then analyzed Architectural Record, an architecture magazine (you can find their homepage here: http://archrecord.construction.com/)
Everything that is clickable on the website responds in some form, be it through underlining the text or changing the color. The links at the top have all the key subjects people are most interested in. When one hovers over the links, the whole menu appears, but the selected one has blue text. The opacity tells us that the menu is temporary.
When one hovers over the picture, arrows
appears on the left and right sides. The corresponding article with the image turns dark grey on the bottom.
These additional articles are in grid-format below the large image. When one hovers over the image, the the text is underlined (as shown in the middle photo), and the caption appears on the image at the bottom right corner.
The website also included Twitter near the bottom
More links are at the bottom if people have not yet found what they're looking for.
Everything on this side looks flat. Nothing is made to imitate the pushing of a real button. Though the website seems relatively well-organized, the sheer amount of information is a little overwhelming.
Architectural Record - Print version
After purchasing the magazine, I skimmed through the articles and analyzed the overall structure of Architectural Record. One thing I noticed was how much noise the magazine had. It was inundated with advertisements to a point where I could not tell what the main articles were. Divided into four sections, each section was preceded by its own contents page. The "Learn & Earn" contents page in particular looked very much like a webpage. Everything was sorted out into light grey boxes. Instead of listing the contents, the page was organized like a grid. The other sections, however, had type all over the place. Though there was a constant running head at the top, other texts of different sizes jutted in with advertisements and additional information. The magazine does manage to have some organization through color-coding certain words for sections and using large images to indicate main articles.