If Designers Were Worshipped Like Pop Stars

Here’s an idea that I’m interested in exploring (at least right now): how would an admirer of a designer express his or her obsession with the designer? How would a “fan site” look like? Would it be like MySpace, or would it be like the cheesy, over-designed fan sites you see for musicians and actors? Would there be links like “gallery,” and “media,” and “tour”?

If I were to have a fan site for a designer I really like, the designer would have to have Stefan Sagmeister, no doubt. (A semi-distant second would be Josef Müller-Brockmann.) The site would be well-designed, of course, and it would reflect Sagmeister’s style, though I’m not sure what it is exactly. I would imagine, though, that it would involve a lot more organic forms: handwriting and fruits come to mind.

The typography must be unique, whether it’s digital or handwritten. As is everything else. It would probably be about the experience of the site that reminds viewers of Sagmeister; it couldn’t be a boring grid of text in Verdana or Georgia and straight photography that doesn’t evoke any personal connections.

I haven’t thought much about this (I just thought of the idea less than an hour ago), but I’m interested in other people’s ideas for “designer fan sites.” It would be even cooler if someone actually built it!

Flush.

Flash Experiments Portal: Auto Rounding Width et al

I’ve been taking care of other aspects of my life for the past week or so, and today I was able to spend some time to continue building my Flash Experiments Portal. Honestly, I did not expect something that looks this simple to take so long. But I think that it’s a design worth pursuing, partly because in the process, I’ve learned some stuff in JavaScript that it made me realize that I have a love-hate relationship with JavaScript, just like with ActionScript and Kinko’s.

The image above may not look that different from the one before, but I’ve added many features, all of which are exclusively in JavaScript and would still function like before if JavaScript is turned off or is not available in the browser.

First, I made all the “frames” fit to the length of the text but also rounded them up to the next frame. If I had just left it at auto, the frames would not end at the grid lines, which defeats the purpose of having the grid.

Then, I added up all the lengths of the frames in each row and determine the minimum page width I need to display all the frames in their own row. If I didn’t specify the page width, the frames would actually start floating/stacking under the layer names. That doesn’t happen in Flash, of course; I just used the float trick to make it look like Flash, but it certain doesn’t behave it like it.

Finally, I made the boxes where the layer names go have a fixed position so that as you scroll to the right for more frames (if the row of frames goes longer than the page width), the left side stays there like in Flash.

I spent a good chunk of the day working on this locally, and it seemed to work fine in Firefox and Opera, with a little bit of glitch in Opera that I fixed relatively quickly. But when I uploaded it to the site, Opera seemed to have completely ignored my JS, so now I have to figure out what’s happening there. And IE has the same situation as last time. Inconsistencies with paddings, margins, and border widths among browsers are a pain.

Nonetheless, I made real progress today, especially in my JavaScript skills. I’ve become more comfortable with arrays and for loops now. Scripting is so powerful; I can’t wait to learn all the other kinds.

Flush.

Will As Script

Has anyone looked at a will as a conditions-heavy programming document? For example in ActionScript:

var bob; //testator
var joe;
var sue;
var sam;
var x=200000; monetary assets

if (!bob){
    joe=100000;
    sue=x-joe;

    if (!joe){
        joe-=100000;
        sue+=50000;
        sam=(x-joe)-sue;

        if (!sue){

                ...


I know I probably broke the script when i made joe=100000 but later conditioned that he doesn't exist, but you get the idea. So many if’s.

Flush.

Give Peace A Chance

The peace symbol is 50 years old today.

I don’t usually do that thing where I post links to other people’s entries with no personal analysis, but I think other people are more knowledgeable about this than I am, and that I think it’s an always-important topic.

A little post on the peace symbol, via swissmiss: http://www.hossli.com/observations/2008/02/16/50-years-of-symbolic-peace/

The entry on the peace symbol on Wikipedia: http://en.wikipedia.org/wiki/Peace_symbol Interesting how the peace symbol is designed.

Flush.

Flash Experiments Portal

Worked on the Flash experiments portal today. Making something look like something else proved difficult, but I think that when one is done with it, satisfaction takes over.

I’m not done with it yet, though. I still have to:

• Code it so the width of the frames on the timeline are determined by the length of the frame label, but still conform to the 8px widths of individual frames.
• Make it work in IE 7 (grr.)
• Make the arrows clickable to expand/collapse the folder (which I practiced in the web experiments section), and have the arrow and folder icons change accordingly.
• Make it have auto horizontal scrolling instead of a defined body width.

At first, I wanted to make the portal Flash-based, but I figured that might be too crazy and not that accessible if people have slow connections or don’t have Flash Player installed. This is a fun alternative, I believe.

Flush.

The Job Search Campaign

Does anyone else feel that looking for a job is a lot like being in a presidential campaign (not that I’ve been in a presidential campaign)? I mean, technically, they both have the same goal: to get the job. But they’re really different in terms of the number of employers you’re dealing with (the entire nation, or at least the voters).

However, one thing that I’ve noticed in looking for a regular job is that you have to sort of provide a platform from which you derive your answers at the job interview: what you believe in, what you think one should do in certain situations, etc.

While I’m talking about job interviews, I also want to make the connection that campaign speeches are like job interviews, except that you have a lot more interviews in a presidential campaign. And you need to know what words to use, and more importantly, what words to never mention.

Finally, but not final, calling people for references is like asking for endorsements. While you don’t need too much convincing when asking for references, it’s basically the same idea. You want, or actually you need people backing you up and saying that you can do the job.

Needless to say, being in the career that I plan to live my life on, I’m currently in a state of constantly thinking about job search. And with this year being an election year, I couldn’t help but take a few strategies from the candidates and personalize them for my job search. So we’ll see how that goes.

Flush.

Later, By Definition

“Later, by definition, will never come.”

Just something I thought of while briefly visiting Stefan Sameister’s “Things I Have Learned in My Life So Far” web site promoting the exhibition.

Flush.

Transparency in the Sky

I want to try to something different. This is just an idea. If I’m sticking with this idea, I will clean up the type and the lines. I’m still thinking about making the coding and the interactivity work.

Flush.

What Am I Doing? (Feb 2008)

The Sims 2 obsession has faded (fortunately), and the words “portfolio,” “site,” and “job” have become the three most used terms in my daily mental query.

Live Site

The most significant thing that I’ve worked on this past month, I believe, was my site. On January 28 or 29, I suddenly had the motivation to start my web site with a “just do it” attitude, constructing it in public and requesting feedback. This process is moving along, and I’m glad I got started, not only because I’ve moved onto the next step, but also because it makes me realize how much work (and time) I need to put in to have a fully functional, content-rich, informative web site about me and my work. Therefore, I’ve decided to not wait anymore for this site to complete and move ahead to search for a side job.

Job and Sagmeister

Yesterday, I ordered a ticket to attend a now soldout lecture featuring Stefan Sagmeister in San Francisco on March 6. For those who don’t know (although I might have mentioned it here on Flush), Sagmeister has sort of been my hero ever since I’ve heard of him last year, when I was researching for my “Why Don’t We Care?” project. In any case, I made my first not-directly-related-to-portfolio,-site,-or-job purchase in a long time, under the condition that I get a job/side job before I go to the lecture. We’ll see how that will turn out.

Portfolio Review and Helvetica

Last Friday, a couple of my design friends and I met up to present and review our portfolios (By the way, Y.I. and T.P., the address to my main site has always been in the About sidebar). It was a very helpful experience for all of us, and I’m glad we did it. Somewhat sticking to the promise to myself, I unwrapped and watched Helvetica with my friends. Maybe it was the mentally highered expectation, but 1) I thought it was supposed to be longer, and 2) it was a different experience watching it with friends. I think caring about what others think of the film (which none of them had seen) distracted me from paying attention to the film. I shall watch it by myself next time, including the bonus material and take names and ideas for future reference.

Words Pondered

Here are a few things that I’ve been thinking about in the past month:

• “Safe is Risky.” —Seth Godin
• “Trying to look good limits my life.”—Stefan Sagmeister, from his Things I Have Learned in My Life So Far Series
• “Love all, trust a few, do wrong to none.” —William Shakespeare, from the wrapper of some chocolates my cousin-friend gave me for Christmas.
• “Hope”
• “Change”
• “Honesty”
• “Dreams”

Flush.

Why Don’t We Use a Chinky Font?

Happy Chinese New Year to those who celebrate it! I didn’t plan on posting anything about Chinese New Year today until I saw this a few minutes ago.

I don’t want to seem ultra-sensitive or too politically correct or whatever, but really? This font? I’m not going to go too deep into it in this post, but it still needs to be mentioned.

My request is simply this: can we just not use this type of fonts? At least for sites like msn; I can see it (and I have seen it) being used on the Simpsons, but there’s a difference. And while I remember being fascinated by doing lettering like this in handmade school posters in middle school to show my roots, I have since known better that this more or less perpetuate the old stereotype of how Americans have thought of Chinese and Asians.

While it is a nicer version of the typefaces in this style (maybe just the “2008”), I still think it’s too much. If I had to think of a visual substitute right off the top of my head, I would suggest Optima. It’s a significant downgrade, but it still gives off that essence without jumping at your face.

Here’s my disclaimer on this post: While I am an Asian American, I do not represent all Asian Americans. I’m sure there are some who do not find this offensive at all, or that some don’t even care. But as someone who does care, I think this is not appropriate for institutions like msn, not anymore at this day and age. I’m speaking as someone who is concerned about this topic, because I feel that if I don’t say anything, no one else will.

Flush.

A Bit of Beta House Cleaning

I did a bit of site house cleaning today. I know, I don’t have that much on my beta site to clean yet, but I made some messes while creating those pages, like writing messy non-validatable XHTML and illegal characters, as well as inconsistent page titling.

I also began a format for the web experiment pages, which I’m bound to change so they’d go more with the rest of the site, which has yet to be created. I’m starting to see that this entire site is going to some time to build. But I don’t feel defeated at all; I am so excited to see how this site is going to turn out. Anyway, less talk, more walk.

Flush.

Voting and Polling (Places Photo Project)

It’s probably annoyingly tiring to hear people say, “I voted!” today, so I won’t say it, even though you know what I did.

For the past few days, I wondered if I should participate in the Polling Places Photo Project, organized this time by the New York Times and AIGA. The main reason for not doing it was that I was scared, scared that the poll workers would yell at me and kick me out, or that the other voters would feel uncomfortable with someone taking photos. But fortunately, that didn’t happen. The poll workers were very nice.

At first, there was some confusion about where I was in their roster since I registered “late.” But it got all cleared up and I painlessly cast my ballot on the fancy electronic ballot. Turns out that supposed iPod-like thing that I saw in the sample ballot was huge; I thought it was going to look like a BlackBerry and whatnot.

Anyway, I didn’t take the photos of the space, but just the machines, because I was scared that other voters were uncomfortable, and I didn’t want to ask them personally for permission. I did ask for permission from the poll workers to take photographs, and I said that it was for a “national project” called the Polling Places Photo Project by the New York Times, but they didn’t seem to know about it. I mentioned “national” and “New York Times” just to gain some credibility that I’m not doing this just for myself or as some sort of partisan spy.

I took a few pics of the machines and quickly left the polling place to take photos of the signage outside, which I believe are as important as the inside. (I guess I should mention now that (for the locals), I voted at Westborough Rec Building on Galway Place in South San Francisco. I looked up the city on the NYTimes site and they don’t have any photos from SSF posted, so I’ll see mine up there soon and hopefully, someone else will post theirs, too, especially someone who had the guts to photograph the space inside.)

Here’s the farthest sign I found from the entrance. The cones were leading towards the alley-like path to the venue. Notice the yellow sign temporarily slipped between the rock things to let you know where to go.

Here’s a more official, intentional sign for the event. (Same sign as the one off-right on the previous photo.)

Here’s the alley that leads you to the entrance. It kinda made voting a shady thing where you go to the back of some building to do it.

Here’s a Photomerged composition of the end of the alley and the entrance (Click here for the entire image). Lots of blue painter’s tape with information in three languages. I didn’t bother to read them; I don’t know who does/did. Nice touch with the American flag, with the blue painter’s tape.

So that concludes my voting experience for the presidential primary. I want to thank my old roommate Mike for informing me that citizens vote for the primaries, too, and making me register, because I probably would’ve been apathetic about it and wait for the candidates battle it out before I do it for sure in November.

Flush.

Background Change By Time

Been a few days since posting an update on the web site. Before you make snap judgments on the image below, hear me out. That’s not how the site is going to look, exactly. Think of the idea, the concept behind it. Concept, concept, concept.

The point is that I figured out how to control color using time, as well as brightness and saturation control just like the HSB panel in Photoshop and the like. This might be a sarcastic BFD for geeky programmers, but I’m still proud that I figured this out in one night, part of it without power because of some storm.

Background Change By Time

I may or may not continue applying a time-based background color on the home page. This is actually the same saturation and brightness as the original dull blue background color, but I guess it’s just too bright and saturated-looking in other hues.

Shaun Inman

The idea for this came from Shaun Inman’s site, which I heard about from a (relatively) recent BADG podcast interviewing Shaun Inman. His site has a changing background that repeats every year, and on top of that, his older articles fade to white as a metaphor that writings on web programming and such get outdated very quickly over time, even stuff written in 2002.

I will continue to play around with the background color; I’ll probably make it darker and muted if I was to keep the script on the home page, because frankly, I don’t really have a strong concept and reason like Shaun's to have the script on the home page.

The process of writing the script is documented under Experiments > Web > JavaScript.

Flush.

Voting is Confusing

So I got my sample ballot and Vote-By-Mail ballot in the past two days, and I couldn’t help but notice the continuing lack of good visual and information design in these election documents.

Front Cover

Let’s start with the front cover. There just seems to be just too much information. The key word is seems. There’s actually not that much information, but it’s just arranged on the page so that it looks like a lot. In terms of the white arrows, the left one points to the improper outlining of type (more on that on the next image). The top right points to what I believe to one of the many instances when they unnecessarily stretched the type. And the bottom arrow points to just too many individually centered type that together ironically lacks unity.

This is a close up of the front cover. Notice the gray outline around the yellow “Non-partisan” all against a lighter gray background. While at first glance, the solution of “NO OUTLINED TYPE!” immediately came to me, but when I realize that if the outline wasn’t there, the yellow would start to get lost in the light gray. The easiest, cleanest solution I have for it (at least as a start) is to have a darker gray background. No, it won’t match the gray of “non-partisanship” that the cover takes on, but it’s definitely the same hue (or lack thereof) so it’s not a big deal if it’s not the same shade of gray.

On Outlined Type: Ever since Davis, I had learned that outlined type is bad. But since leaving Davis, I’ve become more tolerant of outlining type, while still conservative compared to the billions of commercial type I’ve seen. Outline type is not evil; it’s just abused.

Voting’s so cool, it’s like a magazine!

Anyone want another card-stock half-page that inherently reminded me of the same kinds in magazines? I know, they want to save paper, blah blah. But they should not stick them in the middle of spreads like that. Give it its own space and people will not ignore it like I had (except for taking this photo).

Technical Stuff

Elements outside the lines when they’re not meant to. This makes me think of the first one or two Illustrator class assignments that students would produce (for some people, it’s in all projects). This would not happen under my watch. “If I were elected San Mateo County’s next sample ballot designer, I promise to make sure that all lines would not stick out of their containers like hangnail!”

The second image involves grammar. Being a Grammar N-word (the other N-word). This is more upsetting than the hangnail. I am beginning to be convinced that this document is made entirely in Illustrator, because of the use of Myriad as its body typeface, the hangnail, and now, the missing closing quotation mark typical of the “designing on the spot” spirit of the designer who does not look back for accuracy. The right arrow is where the quoting began, and the left arrow is where the quoting is supposed to stop. “If I were elected San Mateo County’s next sample ballot designer, I will make sure that the disappearance of closing quotation marks will seize, and I will pass legislation to make sure that there will be No Quote Marks Left Behind.

Voting is Like, So Kewl!

This is the deal sealer (“seal-dealer?”) about Illustrator. Preset strokes to make it look like you used a wax pencil to draw that arrow, and then your pencil suddenly turned into a pen, and your handwriting has identical k’s and e’s and pretty much every letter in the alphabet.

Oh, and look, the new electronic voting system is just like an iPod! How cool! Voting is so cool, all the kids are doing it!

The Important Stuff

This probably has the least problem, because it’s not about color, and it’s not about being “cool.” It’s about the content that has stood the test of time, constantly perfecting the best layout. Even so, I think there’s still the problem of overall typographic arrangement. Maybe they’re doing this to be neutral and as boring as possible because it’s the actual ballot design, but the lack of contrast in type confuses me and causes more frustration than it should.

Set in Helvetica Roman or something, there are only four font sizes to distinguish all words, and all but the smallest font are set in caps. My problem with this is that the separation of one question with another is very subtle, by a single line, the same width of line used to separate names of districts, which I have no idea what they mean (See top of image). I’m sure it’s important to display that information, but how should that relate to the actual reading of the proposition descriptions below that?

Those three lines for the district names completely distracted me from the Instructions for the ballot, which is more important to me as a voter to know how to do this right and not where in the state I’m doing it, because I know where I am. A simple solution I could think of is to just make those lines between propositions thicker and not the same width of the type stroke. It shows that this is the end of this proposition, and this is the start.

The other problem is the names of the proposition of category being hidden into the rest of the entry, and if I get lost in thinking about the proposition’s pros and cons, I might accidentally subconsciously fill in No for the previous question just because I see the current question closer to the Yes/No boxes. While they obviously give generous whitespace to show the Yes/No boxes, I think they should be next to or below the proposition number and not right before the next one, so they know for sure they’re voting for the right choice.

Too Much Red

I’m gonna go for a guess that they used red as an emphasis of things you should do before sealing the envelope and mailing it in. But this is a ridiculous amount of red type and lines and boxes. Emphases are meant to emphasize a limited amount of the most important thing(s), not everything you think is sorta, kinda important.

What Am I Looking at?

And finally, the back cover. What am I looking at? Did you know there’s a perforation across the middle where you tear off and mail it in to get a Vote-by-Mail ballot? Did you know that before I told you? And did you know what is the most important information you should know as a voter on this back cover? I haven’t found it yet, because I don’t want to look at it for more than three seconds at a time, kind of like the sun.

I realize that I sound really cynical and sarcastic with this pamphlet to a point of appearing arrogant and cocky, but I’m just upset that an official government publication failed to uphold the highest standards in print design, be it aesthetically, like the outlined type and the red-emphases-saturated envelope, or technically, like the missing closing quotation mark (which led me to think that you didn’t proofread this government document or any government document.

I can’t promise that as a beginner designer I can produce the best sample ballot pamphlet, because I know some of these problems involve a lot of bureaucracy and politics as well as dealing with many people who think they know what the best design should be, based on their own interests. But I can say that I would do my best to make sure that little (yet representative) problems like this don’t appear.

It’s interesting to see that the Polling Place Photo Project is continuing and growing via New York Times. I’d like to see a similar project in the documents involved in the voting process.

Flush.