Someone had posted a summary of the reading on a discussion forum so I though I would move it over here so more people can see it. If you want to go straight to the forum it can be found here and you can also see where the original article can be found as well. Enjoy.





WEEK 1: Photos for Interaction


  • With the new kinds of interface technologies being developed, designers have more control over the appearance of their interfaces, no longer limited by the standard appearance of an OS or browser. However, unlike simple visual design, interactive design must serve the user as a product in addition to establishing brand identity.
  • The article follows to discuss the different roles of photography in interactive design. The first is photos as content, where they are not part of the interface and instead communicate some sort of meaning in and of themselves. The interface must not overpower images used this way, because they are the content you are delivering to the user.
  • Images can also be used to create a context for information - as a design element, rather than content. This approach is most commonly used in advertising. Images used this way convey brand message, but take a secondary, support role to the actual content, and serve to make an impression on the site visitor (a picture is worth a thousand words, after all).
  • Photography is much rarer in software user interface design, appearing mostly in splash screens and the header bars of web interfaces. Those images are the lowest priority and usually have little to no visual impact. To make effective use of photography here, it is necessary to do something new with it. Currently, the trend is to make interfaces "shiny" which, most of the time, servers to clutter and reduce the visual impact rather than enhance it.
  • Examples follow:
  1. German website seen by separates its image content from the navigation links, and allows a 3D view of the photo content.
  2. The art project gettyImages builds a 3D progression of images connected by signs.
  3. The Societe Generale bank embeds navigation into a photo, but it is clearly visible.
  4. The Van De Weghe Fine Art gallery website consists of very simple web elements embedded into a large photograph of a room.
  • All designers should collaborate to create an optimal final product, which means that visual design and interface design can't just be done by two different people that never talk. Otherwise visual design tends to "make it pretty" instead of contributing anything to the interface.
  • Recommendations:
  1. Integrate images by making them elements of interaction.
  2. Place images in such a way that they have impact.
  3. Photographs invoke emotions, make the user feel comfortable.
  4. Photos can quickly convey meaning to the user; use this.
  5. Think about ways to display photos that aren't a grid.
  6. Use photos that relate to the content, not stock or decorative images.
  7. Make sure all elements work together.

Different take on the summary:
  • Graphics are what makes the basics of software interfaces interesting.
  • Interactive design is similar to product or industrial design due to the fact that the goal of each type of design revolves around serving the user in an optimal way.
  • In most software applications, photography usually plays the role of expressing the content of a particular message.
  • However in other applications such as a catalogue on an online store, the photography is the content.
  • Photography generally comes forth due to its strong graphical impact and this needs to be understood when incorporating other elements in order to avoid competition the user could potentially struggle with.
  • It is important to utilize tools to enhance an images meaning, such as tags, which allow the photo to be findable.
  • Using photography as a design element in advertising online helps creates a brand.
  • Some corporate-based websites use either multiple stock-like images or one strong image to convey an experience to their audience.
  • Static images in the header are quite common for applications between a software product and a website.
  • In these cases the photo is serving no meaning but a decorative purpose.
  • These types of photos take up minimal space because the actual content is much more important.
  • As time progresses there has been a lot of focus on coming up with ways to present web-photography in “shiny and glossy” ways in order to appear for realistic.
  • Those who are involved with interaction design feel they only need to focus on their part of the job, however this is not always true.
  • They should play some type of role in the process of the visual design.
  • Interaction designers create the “soul” of a website and visual designers create the “shell”.
  • It is important to: integrate the images with the design, work with the entire screen space because placement and positioning is key, use imagery that evokes pleasant feelings such as comfort, thinking about interesting alternatives to the “grid”, choose photos that convey meaning and not just stock images, make sure all elements are integrated.





WEEK 2: On Web Typography (revised)


  • Choose the right typeface for particular web pages, tailored to the content, and that is appropriate for screen use (typefaces that look nice in print might not be suitable for the screen)
  • More options are becoming available due to the ‘@font-face property in CSS which allows web designers to link font files to their pages.
  • This method is not entirely resolved due to piracy concerns. The solutions to these problems are still in the works and include font end-user license agreements and hosted third-party services.
  • The expanded selection of typefaces will result in more issues regarding legibility and aesthetics will prevail.
  • Inconsistent rendering across browsers and increasing page sizes due to serving the fonts/font families are a problem designers need to be aware of.
  • Fonts such as Georgia, Verdana, and Arial are generally described as “web fonts”.
  • Legibility, contrast and form are important factors that need to be taken into consideration when picking a typeface.
  • Different effects can be achieved through contrast in typography: it can complement, create tension, or weaken the visual language in some cases. (When typefaces too similar in nature are paired, the resulting effect may unsettle the design.)
  • It is beneficial for the typeface to have some character (this creates visual interest), but not too much that it takes away from the content.
  • High x-heights and a sufficient tracking of characters aid legibility when text appears on the screen.
  • Think about the qualities of the message of the content, and try to find a typeface that complements those qualities (serious, playful, etc). This ensures a stronger, more cohesive experience for the reader.
  • Two is the most typefaces you should use, unless you are trying to achieve a specific effect that calls for more than 2 typefaces.
  • To ensure a tasteful typographic variety, pick typefaces with a wide selection of weights and styles (play with variations of the typeface instead of using a new typeface).
  • Combining serifs with sans serifs ensures balance and contrast in typography. Select wisely!
  • Two fonts designed by the same type designer tend to work well together (they generally share similar principles/features).
  • When selecting a typeface take its historic and cultural implications into consideration (ie. Trajan=movies, blackletter=heavy metal, “scary”, “dark”)
  • TIP: select body typeface first (its important that it is legible, and matches mood of content. It will aid you in picking a header/2nd font.)

Checklist for your website's typography:
  • Typography matches the content (ie. mood/tone)
  • Tasteful and appropriate variety in type
  • Legibility (size, tracking, quality of typeface is screen appropriate)


DOs and DONTs for matching typefaces:
DO
  • Take into consideration the historic/cultural associations of each typeface, think about how the two work together, and what is the relationship of these associations to the content of the website
  • Matching serif/sans serif typefaces is recommended
  • Consider selecting fonts designed by the same designer
  • Both typefaces have a wide range of weights and styles
DON’T
  • Don’t use more than two typefaces, unless you have a good reason to
  • Don’t match typafaces too similar in nature, it weakens your message and the design





A Little Blurb on Grids

Week two's to-do list includeds a slide show detailing the application of a grid to a website, albeit mainly visual, the slide show basically points out the function and subsequent importance of grids in web design. The way I see it, a grid in any application serves to organize and create consistency of layout which allows for ease of things such as creating hierarchy as well as streamlining the flow of elements in a given layout. This is of particular importance in web design as web design work has to be visually legible and easily accessible to a wide variety of users. Initially the idea of a grid may seem restrictive, but like any design endeavor,designing a grid is a process which is totally up to the designer and therefor can be as dynamic or free as you make it to be. In terms of consistency, grids are invaluablein this respect. In order to make an interactive experience easy, consistency is key. If a user's eyes are constantly jumping to different areas of the page in order to findthe same if not similar class of content, it becomes a negative and stressful experience for the user, most likely ending in just shutting the browser. This is obviously notthe goal of interactive work where the goal is to engage and maintain the interest of the user as well as make it easy for them to navigate and find what they are lookingfor.So, essentially what this slideshow on grids provides is an insight into the importance of grids which is undeniably valuable and doubly important in creating consistent, accessible web page layouts, but that is not to say that these pages cannot be both consistent as well as beautiful, elegant or creative etc.

WEEK 3- Guest speaker JASON BRUGES



Here is what the studio is about:

"Founded by Jason in 2001, the studio comprises an experienced team of architects, lighting designers, specialists in interaction and industrial design and project managers. We create interactive spaces and surfaces that sit between the worlds of architecture, interaction design and site-specific installation art. Our projects range from large-scale building facades and public art to interactive interior environments and products."



Food for thought:

  • Design, architecture, and art can come together to create interactive work that is not only beautiful, but also conceptual, context appropriate and considerate, as well as interactive.
  • Lesson of the day: the more you know the more you can do! Keep yourself motivated to learn.
  • Coding/Programming can be liberating, and there is a variety of creative things you can do with it (other than designing websites).

explore his work here: http://www.jasonbruges.com/


Guest Speaker - Jan Edler

Jan Edler came to our school, and did an hour presentation on his work in the company ran by him and his brother: Realities-United. They started off as architecture based firm, as both of the owners have an architecture education and background. Their projects over time entered the art and media world, which according to him has both has advantages and disadvantages. They deal a lot with projects that revolve around spectacular lighting and image fixtures on buildings, but these fixtures do more than just illuminate buildings. They transform the surfaces of the structures into canvas made up of pixels. Not ordinary pixels but pixels made of a variety shapes and sizes.
Screen_shot_2011-03-15_at_10.21.06_PM.pngScreen_shot_2011-03-15_at_10.20.47_PM.pngScreen_shot_2011-03-15_at_10.21.36_PM.pngScreen_shot_2011-03-15_at_10.21.54_PM.png

They will be making the installation in the York Subway Station! Something to look forward to.