This was painted for pocketsprite for sm_fanswap 2009 round 1. Despite all the anatomy and perspective errors that are jumping out at me now, I’m still rather happy with the results. I don’t know what song Zoisite is playing, so if you have an idea, please let me know!

The facial details are lost at 25%; 67% detail on the left.

The colours are different from the submitted version because I’ve upgraded my computer since then, and I can’t get a match with my current video card. So here’s a more digital and saturated version =)

I’m an amateur artist, and I dabble in web design and random crafts. But the other thing I’m really psyched about is interior design. Shamelessly, I watch Cityline, House and Homes, Designer Guys, Divine Design, and even Debby Travis’ Facelifts. There’s also this other program–whose name I can’t remember–where the hobbyist will challenge that professional, also the host, in a design challenge to design the same room.

The tours and projects on these shows, however, are more conservative (not in the traditional vs. contemporary sense). The designs that I’m really in love with are… not.

Read more…

To complete, you have my workspace:

Ideally, I’d have two encyclopedias between the glass top and the computer drawers to add some character, but the glass won”t hold. And if I were rich, I’d totally splurge on this piece of wall graphic.

But on the upside, I have Hugh Laurie beside my keyboard =D

I’m an amateur artist, and I dabble in web design and random crafts. But the other thing I’m really psyched about is interior design. Shamelessly, I watch Cityline, House and Homes, Designer Guys, Divine Design, and even Debby Travis’ Facelifts. There’s also this other program–whose name I can’t remember–where the hobbyist will challenge that professional, also the host, in a design challenge to design the same room.

The tours and projects on these shows, however, are more conservative (not in the traditional vs. contemporary sense). The designs that I’m really in love with are… not.

Read more…

To complete, you have my workspace:

Ideally, I’d have two encyclopedias between the glass top and the computer drawers to add some character, but the glass won”t hold. And if I were rich, I’d totally splurge on this piece of wall graphic.

But on the upside, I have Hugh Laurie beside my keyboard =D

According to W3School 36% of Internet users still have 1024 x 768 resolutions as of early 2009. From the Streamed Hardware Survey, 19% are using 1024 x 768, 23% with 1280 x 1024, 12% with 1440 x 900, and 18% with 1680 x 1050.

With that in mind, there’s five additional things that you have to be aware of:

Constraint: The background image is fixed.
Design implication: The background will not move with the scrolling. If you have text running across the top then there is a chance (depending on the user’s resolution) that the content area (the area holding the tweets and the sidebar) will overlap* that information.

Constraint: The background image is fixed to the top left while the content area (763px) is centered.
Design implication: As screen resolutions increase, the content area will be shifted to the right relative to the background image. On a resolution of 1024, the content area will begin at [(1024-17-763) = 244]/2 = 122 pixels from the left. On a resolution of 1250, it begins at the 250th pixel, and on 1440 at 330, etc.

Constraint: The background image can only be tiled both vertically and horizontally, or not at all.
Design implication: The background should be designed such that it tiles seamlessly or disappears gracefully against a solid background colour. Otherwise, you’ll end up with a half-baked mosiac on larger resolutions. But this also means that you can have your background image take the dimensions of the maximum possible resolution provided that…

Constraint: The background image cannot exceed 800 kb.
Design implication: Optimize graphics for the web. Half of second delay in responsiveness can kill user satisfaction.

Constraint: The header/footer navigation and the tweets are will always be white.
Design implication: Before you even begin your comps, you have to start thinking about colour schemes. Eventually, you’ll have to pick a font colour that’s dark enough against white and provides enough contrast with the sidebar background colour.

* Overlapping isn’t really the main concern. If the background is not fixed, it will disappear when the user scrolls anyway; however, if the content area cuts across the design then it’s a disruption. Really, I’m just concerned about the aesthetics.

So designing for Twitter, a walk through

I mentioned earlier this month that I will be involved in another project this summer, now I have a little more details.

The problem

• Advances in computation + dependence on technology => increase consumption on computation devices
• Disposable technology paradigm: expected short usage lifetime => increase in waste. In particular, cellphone waste where consumers replace their cellphones every 17.5 month
• Old cellphones are being deposited in landfills or kept around with no alternative use

The cause?

Questions

• Why did you get your current phone?
• Why did you choose this particular phone? Size? Functionality? Aesthetics?
• What do you do with your old phones?

• Companies offer free cellphones with contract renewal
• Increasing expectation of existing phones in light of new models
• Diminishing battery life (cheaper to get a new phone than to replace the battery); durability
• Perceived lifetime of a phone is independent from its functional lifetime

The challenge

• Recycling old phones is an inconvenience
• People don’t know about organizations out there that take old cell phones
• Although people save old phones because of its potential to benefit another user, people don’t necessarily want the old phone

The solution?

• Reform contract structure and incentive programs
• Mobile phone interfaces that encourage sustainable use
• Novel ways to reuse old cellphones to decrease the need for new devices
• Make phones with biodegradable material
• Make it easy for consumers to recycle their old phones

Ideas

• Indicate the user’s ownership of the phone in comparison to the phone’s expected functional lifetime
• Create a market place for phones to trade ownerhsip
• Old cellphones as a personalized gift; branded as a photo collection, mixed tape, etc
• Increase awareness of recycling options and locations by convenient means, e.g. through the phone itself
• Modifiable outer designs without changing the internal hardware
• Repurpose phones as entertainment devices in clinics and hospitals, pagers in restaurants

Rethinking the Ordinary — Links

• Ikea Hacker
• Yiying Lu’s Extra Ordinary series
• 60 Really Creative Advertisements
• 100 Really Creative Business Cards

My main responsibility at work is to put together wireframes–a document of diagrams and annotations detailing different specs and interactions about each page of a site. It may involve deriving the functionality, flushing out the content, deciding what the content is, and how each component behaves. This document then gets passed around between the client, the creative, and the development teams. For the most part, it’s a lot of fun.

However, because the wireframes are used by everyone, deciding what information to put on it and where that information should go (to ensure everyone gets what they need out of it) becomes a challenge. Documentation becomes extremely important because we want to make sure everyone is on the same page, but if they can’t find that data or if they don’t read it, the vision falls apart.

While we’re waiting on the new projects to go into production, my manager and I had a brainstorming session to figure out a new wireframe template. The information that we need to include are:

• Project title
• Version and edit control: what version of the wireframes we’re using, and what has been changed since the last version
• Page number
• Page reference: different from page number because page numbers are variables, and not necessarily the same across all copies which makes referencing difficult
• Page title: e.g. homepage, sitemap, contact page
• Documentation/Page modification date
• Reference: sites that have the interaction that we want to develop
• Source: if the project is a redesign, and we’re designing off an existing page then that page would be considered the source
• Template: e.g. A (one column), B (two column 75/25), etc
• Annotations: reinforces the interactions that the diagram illustrates
• Client feedback: comments, approval status, etc
• Callouts to the client/creative/development

The designs that I came up with before the brainstorming session look like this:

When I was working on wireframes in the last two weeks, I had a lot issues with the ratio that came with a landscape orientation. If the pages are long–and pages are often longer than they are wide (even though screens are wider than they are long)–I find myself trying to cramp everything together. For example, I would shrink a textarea to look like a text field so that I can fit in a submit button. So we spent a good amount of time trying to decide whether we should go portrait or landscape, legal or letter.

Some conclusions

Actually, not really conclusions but things that we’re going to test with the next set of wires:

• Two different scaling of wireframes: one portrait to be used for sites with long pages, one landscape for sites with short pages.
• Annotations take up a substantial amount of time. Taking the idea from OLM, if we develop a library of reusable annotations that we can just drag and drop onto the diagram, it might save us some time. Especially if we reuse interactions like the accordion or the flyout.
• Have a change log to keep track of revisions and client approval.
• Reference numbers at the top left hand corner to be screen friendly and the bottom right hand corner to be print friendly.
• A mini sitemap visualization on all pages to put current page into context. This requires a lot of effort to maintain, and we’re not sure whether it’s worth the reward. If we change the site map, we’d have to update every page.
• Reserve certain colours/styles for annotations.

My task for tomorrow will be designing the change log page.

I don’t think I did him justice. The personality is off. Alternatively, I would have liked him and Hughes or Hawkeye back-to-back but it’s difficult for me to paint two characters convincingly on the same canvas.

I still haven’t started the second season yet. I’m getting missed reviews and I would like to judge for myself soon.

I had my first day of work today, and… getting used to a Mac will take some time. I use the CTRL key so frequently that without it I was handicapped (until I found that the window’s key was the Apple’s equivalent, but it’s still at an awkward location on the keyboard). I’m a bit undecided about the toolbar being detached from the application window. While the integration of applications with the OS is part of reason why Mac’s are supposed to be great, and I like being see my background apps, it’s a tad infuriating when I can’t figure out how to close the foreground application or save my file.

Other than some grips with technology, everything else was pretty good. People are nice (learned five names today, although I certainly met more people than that), projects are interesting, and awesome location. In terms of projects, I’ve gotten started on two: Conquest — revisiting the navigation around the keywords “Security”, “Excellence” and “Luxury”, and Mindblossom — realigning and reworking some of its issues. Other projects for the summer will include KFC, CitiCards, and Reebok. I love the breadth of the projects I get to work on.

Creative meeting and team lunch tomorrow!

It’s been a long time since I did any painting. I’m sooo rusty, and my tablet has been literally collecting dust on my desktop. But exams will be over in a few days, so hopefully I’ll be able to get back into the routine of a painting a day while working.

The end of exams also means that I can catch up on my backlog of entertainment, and any resulting fanart!

• Sanji (?) from One Piece: It started out as a sketch of Sanji, although it’s turning out a lot like Zoro…
• Lockon from Gundam 00: Only Gundam series I ever watched, and despite my initial reluctance of mecha series, this turned out to be pretty good.

To be done:

• Piece for SM Fanswap
• Kakashi from Naruto
• Roy from Fullmetal Alchemist

1. Will be starting an 12-16 months internship at Mindblossom as an Information Architect/User Experience Designer. Super excited for this! No more school for a whole year =D
2. Project with Professor Khai Truong. Details to come.
3. One painting/sketch per day round 2!
4. Anime North 2009
5. Clean up the Resource section, and some of the errors that’s still around the site.
6. Revamp Chiba. Although sadly neglected, people are still visiting and linking the site, and I feel bad for letting it collect dust. I still love Mamo-chan! School has just taken over.

Last Thursday was the feature freeze; this Thursday was the code freeze. It’s frustrating that I haven’t accomplished everything that I’ve set out to do, nor have I finished everything that I’ve started. The next best thing is to document what I’ve done so that someone else could pick up where I’ve left off.

Following the last progress report:

February

Week 2: Folded the Student and TA Controller into a User controller, and abstracted the Views to handle both types of users.

Week 3: Code sprint! Started the initial mapping of TA to groups, and played around some more JavaScript. TAs are mapped to groups, and that information is sent to the database. A count is displayed next to each TA’s name to indicate how many groups have been mapped to them. This information is not assignment specific however, because towards the end of the second day, the backend was remodeled so I didn’t want to invest a lot of time implementing something that would break with the new architecture.

Still needs to be done is the toggling of groups (e.g. groups that’s been assigned to a TA, groups that haven’t, groups that have been assigned to a certain TA, etc), automatic mapping (e.g. divide the groups evenly between all TAs), and unmapping.

March

Week 3: Since the TA mapping was at a stand-still, I spent the week polishing up the Assignment Rubric’s and Grader’s view.

Week 4 (to be done):

1. Documentation: what’s been done, what’s still left to be done.
2. Documentation hand-off details; where things are; which files are doing what.
3. Documentation within the code; make sure everything makes sense.
4. Refactor some code.
5. File tickets when necessary.

Summary of Deliverables

Screens on the top illustrates how the system was before I implemented my changes. The after shot is on the bottom for the comparison.

Read more…

Reflection

This course has been both been challenging and fun. Challenging in that Ruby on Rails had a steep learning curve and trying to pick up a new technology along with three other different technologies in other courses was difficult. Furthermore, time management is extremely important. On one hand, you’re working on a project that you have an genuine interest in so you tend spend a lot of time trying to perfect it. On the other hand, there are no deadlines. We meet on a weekly basis to report our progress, but you aren’t given an assignment and a date that it has to be done by. So there’s a temptation to push this aside and try to make for it later because something’s due at 10 tomorrow morning.

At the same time, however, it was also really fun and rewarding:

• I had the pleasure to work with Karen Reid, Geofrey Flores, Amanda Manarin, Mike Conley, Andrew Louis, and Severin Gehwolf. My favourite part of each meeting is that it always begin with a little off-topic discussion about how everyone is doing outside of this course. It’s extremely refreshing because it doesn’t feel like I’m in school.
• It’s not computer science without the technological component. Aside from picking up on Ruby and Rails, and Javascript, I was also forced to use the command line a lot more. I’m much more comfortable with writing scripts, using vim, killing processes, using subversion, searching for and through files, debugging, connecting to servers and databases… all that stuff that I learned and forgot about in first and second year came into practice.
• It’s going to be used! Deployment is in September 2009. I still remember how excited I was when I got my first paycheck as a designer. It’s awesome that you love what you do, but having other people value what you do as well is something else entirely.

When I first went into computer science, my view on the discipline was very narrow. I thought it was programming, and for the first two years, that’s what it was: writing trivial applications to solve some well-defined problem that I was never going to revisit. That, and a lot of theoretical analyses about algorithms and runtime and calculus. This year, I’m doing stuff that’s a lot more exciting: development processes, development practices, development teams, and writing software that have actual applications, software that’s actually being used. One of them being the OLM project I’m working on. That’s a really rewarding experience.

But the really interesting things are being developed in grad school, something that I wasn’t even thinking about considering. Until the Research in Motion showcase yesterday. The projects that I found most interesting were:

• SketchPad, an tablet application that allows an architecture/designer to very quickly iterate through floor plans and furniture placements. They have the ability to divide up space with multiple doors, glass walls, workstations, etc. All of the renders were 3D so you’re able to see the space from virtually any perspective. What was really impressive was the walk-through feature. After the floor plan has been laid out, you can draw a trace around the floor, and a movie is generated to show the new layout based on the path that you chose; it shows you the space from the perspective of someone walking through the space.
• This is just fucking remarkable. I have no words, because I was watching the project representative, Seok-Hyung Bae, draw for an hour. Although I’m not sure how easy it would be to draw organic matter with the system. It’s relatively simple to imagine the wireframe of a spacecraft, or a car, especially with the system’s aid in perspectives, but for something like a human being, the planes are suddenly a lot more complex. I imagine it might still be easier to paint with colours and values, and rely on the brain to subconsciously resolve how it all comes together. Regardless, I need an ILoveSketch.

The video browsing by direct manipulation project was also really fun. Given a video clip, you’d click on an object, and the system will show it’s movement over time so by dragging the mouse, you move it back to where it was before or where it will be after. Then there was a video tracking system that studies various characteristics about people entering and leaving the space. E.g. demographics, how people are responding to an ad, etc. Tag clouds meet reviews. Using an adjective-noun extraction technique, you’re able to generate a visualization of all user-submitted reviews. In the end, you’re given a cloud of 20-30 keywords, and the context in which they were used. Remote control cars and airplanes were cool when you’re a kid, but a remote control robots are in another league entirely. It’s a whole new level of animation when control is transferred from a library of motion algorithms to the animator himself.

The breadth of this discipline is just amazing. It does’t matter what you’re interested in, there’s a place for it in computer science.

Other things that I’ve stumbled across that is worth sharing:

• Aurora: a new approach to the browser experience.
• How it All Ends: in reference to global warming.
• Everything’s Amazing, and Nobody’s Happy: we are spoiled with technology.

I don’t find the arguments particularly interesting, but the question has been cropping up a lot. I was first engaged in the debate while I was in the AWC, and then in the WPR community (partly because they overlapped). The topic came up again while I was CUSEC in a talk that compared software design/engineering/coding to art. Most recently, I was asked where rationality fit in as a designer because a lot of it is irrational, right?

Two years ago, I argued that “web design isn’t art and shouldn’t be”. That was a poor choice of words. I see design as a subset of art, that is, all design is art, but not all art is design. All apples are fruits, but not all fruits are apple. All students are people, but not all people are students. For simplicity’s sake, I’m going to treat art and design as mutually exclusive concepts, i.e. when I say “art” hereafter, I mean {art}-{design}.

What bothers me about the comparison is that a lot of new designers would chalk their poor decisions up to artistic freedom. Art is not a scapegoat for the lack of usability. That’s no excuse for illegible text, misleading navigations, loss of user control, incomprehensible content, etc.

When I think of design, interaction is the first word that comes to mind. (It used to be function and intention, but I realize now that they are criteria of the bigger concept.) Early in the creative process, there should be no limits because it’s all in the name of exploration. However, at the end of the day, everything should come together in some cohesive manner. The product must accomplish what it was commissioned to do (goal) and perform it in the way that the user (actor) expects. Making the connection between that crazy idea (design) and the given business objective (goal) is very much a logical process. The creation of it might be irrational, but the end result is organized chaos; it’s okay as long as the user is aware of the goal and the path to it is clear. (Read: actor <=> design <=> goal)

On the other hand, you don’t interact with art. Instead, art is intended for reactions; glamorously, it’s seeking a emotional response. (I suppose another reason why people like mingle art and design is that there’s a prestigious aspect in that.) Beyond that, there isn’t any function or purpose. Not in the sense that its existence was created to accomplish a user-centric goal. Think paintings, photography vs. posters, postcards, i.e. graphic design. Think sculptures vs. furniture, i.e. industrial design. Then think about how music, drama, theater, architecture, software, and fashion fit into the picture.

Design, inherently interactive, poses certain constraints that can’t be ignored because they threaten the goal. They deal with people. If the user makes a mistake and doesn’t know how to recover from it then you have failed. Maybe failure is a little harsh, but it’s certainly an indication that the solution falls short. You can always blame the user for trying to do something that the system is not intended for, but as the designer, you should have expected it. You’re designing for people, after all. That sounds crazy because we hear stories about people trying to do crazy things all the time, yet that’s the reality of it. Your users are not like you! It’s frustrating. It pisses me off. It has me at my wits end(–damn you, why can’t you just use Firefox?!), but I love it.

But getting back to reality, it is feasible because you’re not trying to cater to everyone. You have a target audience. You have stakeholders. You have a domain, a market in which you operate. Then you have everyone else. You only need to satisfy the people who matter.

To be continued. Everything is just coming together from hobbies, from school, from work, from everything around me, really.

February 28th, 2009: A new homepage layout was in order to emphasize some of the new sections now that HindiGym has left the ground. The image on the left was the previous homepage; the image on the right is the redesigned layout. You’ll notice that the overall width of the design has also been expanded to adapt to increasing screen resolutions.

April 1st, 2008: A design for an upcoming Web site called HindiGym, an educational resource providing worksheets for kids and their guardians who wanted to learn or teach the Hindi language. Green and orange were specific colours that was requested to make the layout fresh and vibrant for target audience.

The logo was provided by the designers are Blue Sky Designs.