Simon@iSchool

Well, the academic year 2008-2009 has ended, just like that. It may seem odd that there were no updates here near the end, but there’s an explanation for each course I took this semester…

Human-Centered Computing (CS 260)

This course was mostly reading and discussion in-class. Interesting readings, provided on the course website. I was involved with presenting two of the topics: Activity Theory and Ethnomethodology. The final project in this class was a precursor to my Master’s thesis, about creating a collaborative game on mobile phones for unschooled children in rural India. You can compare the two versions of the document as they were prepared for different audiences:

• Final Paper and Presentation
• Master’s Thesis

Effective Project Management (INFO 290-11)

The work I did in this course was mostly involved with an organization on campus known as RSSP-IT. My work for them involved confidential information about their customers (students living in the dormitories) as well as insider knowledge about their internal systems that could be used to compromise them, so I felt that it was best that I didn’t share the details.

Essentially, my work for them was to aid in adoption and planning for a centralized account management system for employees and residents alike.

Interface Aesthetics (INFO 290-6)

Unfortunately, due to the overwhelming load of my research project and the other coursework I had this semester, I was unable to commit to completing assignments for this course and decided to drop it from my schedule this semester. My work up until that point is still something I’m proud of, and I did learn a lot of neat things and insights that I wouldn’t have otherwise. I use these new insights to critique and analyze interfaces and visual displays around me all the time now.

One of the factors of my deciding not to continue in the course was my novice-level skill with Photoshop/Illustrator/similar tools. It took me about three times as long to do something as most of the others in the course, and I knew I couldn’t dedicate the necessary time to surmount the learning curve. Perhaps in the future, I will try again.

So that wraps things up for this semester… And because I have now fulfilled my requirements for the Masters degree in Computer Science, this wraps up things forever! I am leaving the iSchool, a wonderful place with some of the sharpest people I’ve ever met.

Congratulations to those iSchool students who graduate as Masters this year as well! And good luck to the rest of you in your year(s) to come.

Follow me on sybak.com from now on.

–Simon Tan
Ambassador of Computer Science for the School of Information

Assignment in Interface Aesthetics

From your favorite art, design, movies, etc, identify a palette of 3-5 colors that expresses your sense of color harmony. Post your color palette here (with one image or multiple images) with a brief description.

My current wallpaper is a nighttime shot of the pier in Vancouver, BC.

Vancouver Dock at Night

It has the liveliness of an urban environment mixed with the relative calm of the water at a dock at night. I wanted a palette that captured both, so (using Adobe’s Kuler for assistance) I made this custom palette:

Vancouver Palette

Assignment 3 in Interface Aesthetics

Line Poster: Using a copy of the original piece, create a new composition by adding the parts of the inverse copy to the original piece.

Shape Poster: Create compositions that embody your sense of visual accord with energy and harmony. While giving the page a sense of liveliness and poise, don’t forget to give the reader a sense of direction.

Line Poster

Continuing work on my posters for Grouptalk, I tried inserting some lines and bringing parts from an inverse color version. I chose to use the inverse as a tool to highlight the most important element (the title) even more…

Shape Poster

Then, for shape, I drew more lines that attempted to guide the reader from the center (title) outwards toward the other critical elements. I also wanted to accent the balance I had demonstrated in the previous assignment, without throwing it off.

In the end, I feel that my changes were perhaps more conservative than necessary, but I was working with the boldest version of my poster (the diagonal version) so I was hesitant of overdoing it.

Assignment 2 in Interface Aesthetics

In this layout assignment, you will explore horizontal, vertical, and diagonal compositions by creating 3 different designs of a possible “project poster”.

I decided to make posters for Grouptalk, a student-run forum that I am helping to organize this semester. These posters were designed to attract interest in this recurring meeting.

Horizontal Composition

Probably the most straightforward and cleanest of the three posters. I felt there was good balance between the major elements (the title and the image) and that I kept the significant portions free of distraction. I was worried about which way people would read the poster first, so I made the main paragraph bigger than the rest and designed the other pieces of text to make sense whichever way the reader wandered from the first paragraph.

Vertical Composition

I had to have the title on the left in order to maintain a coherent reading direction. My biggest problem with this one is the jaggedness of the “Stop by if you want to…” text; it sticks out into the space of the main paragraph, which I feel is being encroached on. The picture surrounded by topics seems to fill the bottom space well.

Diagonal Composition

I really like the center of this piece, especially how the text to the top and bottom of the title seem perfectly balanced. The right side of the “U” in Grouptalk is acting as some sort of invisible border. However, the rest of the elements on the page were difficult to provision for. The topic cloud around the image helps balance the poster, but the text in the lower-left does seem a little awkward.

Assignment 1 in Interface Aesthetics

In this typography assignment, you will integrate positive and negative form by creating a single element out of multiple letters. Preserve the integrity of all letters while creating a single unique form.

This is what I have come up with:

New Form

My original idea was to combine my first and last initials (the letters S & T) into something resembling a dollar sign. I had an urge to do this because I have been “signing” my initials on documents for the latter half of my life by printing the letters directly on top of each other, noticing that they almost resembled a dollar sign; I wanted to play with fonts at a level of precision where I might be able to realize my envisioned form, or at least create an equally clever/elegant one.

I started with the letter “T” from the Bodoni font. I thought that the highly curved serifs on the top of the character could be meshed with the curves of an “S” in some way, and I liked the thick, clean base (with no curves at the bottom).

When looking for an “S”, I realized that it was very difficult to choose one from the sans-serif fonts; the combination of such a heavily serif-ed “T” with a super-slick “S” did not look right, so I went back to the serif fonts. I noticed that all the “S” characters had a “head” and “tail”, as if they were snakes. I thought that might create an interesting effect, but most of the “S” serifs were so jarring compared to the body of the character that they created a kind of “serif-overload” when merged with the “T”. I went with the “S” from the Garamond font, as it had the calmest serifs while still having that animal-like personality.

When I overlaid the two characters, the “S” was not nearly wide enough to connect to the serifs of the “T”. At the same time, I noticed that the “S” did indeed look like a snake, perhaps slithering around a pole that was the base of the “T”. I decided to use the curved serifs of the “T” in a different way; I flipped the “T” upside-down and created something of a bowl for the “S” and the base of the “T” to sit in.

I cleaned the form up by removing the non-curved serif from the “T” (as it was interfering with the top of the “S” snake at this point) and was satisfied with the result. There may be a slight excess of serifs on the left side of the image, but I believe there is enough whitespace between them that the image is clear.