Monday, November 24, 2008

Forbidden Color Combinations?

Color theorists and designers in fashion or computer graphics have coined phrases based around what colors shouldn't go together. A recent forum post, Red and Green Should Not Be Seen? discusses two of the sayings ("Red and Green Should Not Be Seen" and "Blue and Green Should Never Be Seen Without Something in Between"), and some lovers have even responded in protest, showing how there is no 'wrong' in love. Here are some palettes and applications of the forbidden colors that really work.

Oddly, these color rules work under specific contexts, which follow 'clashing' colors. Sure, red flowers on green leaves make perfect sense, and can be beautiful, but red text on a green background doesn't always work, so there is some weight to the statements. Of course, that weight really shouldn't be the end-all. Other color combinations that are said to not work are as follows:

What I've found to be true about what's "right" and "wrong" is that a good general rule, opposed to gospel. Because colors are flexible, it follows that these rules don't always apply. What it really seems to come down to is using colors correctly. Using colors that 'clash' properly can give a wonderful contrast. In the world of color, I've found that there's no such thing as 'no' in the world of color.

Red and Green Seen

Blue and Green Seen

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Benefits

* This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
* It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
* You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

The HTML markups


CSS Gradient Text

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Sunday, November 16, 2008

Interview of Plinko Artist-Mark Wasserman

Max · Where did you study? How Long have you been in the biz?

Mark · I went to college at UC Santa Cruz, a public university about 75 miles south of San Francisco. They have a good design program, but it never even occurred to me to take a course. I graduated with a degree in Sociology.

My father was a Professor of Computer Science, so I had grown up with all sorts of computers, early modems, etc around the house from an early age, and I pretty much dismissed all of it. There was the fun novelty of sending an international email that would take about 8 hours to arrive, but it really held little interest for me. Still, even though I wasn't always paying attention, I guess some of that early computing knowledge stuck with me.
In college, the club/rave scene began really picking up in the U.S., and I got together with a few partners to stage some events. As I became immersed in that scene, I started noticing this whole world of club flyers and graphics that hadn't really been around before. At the same time, Raygun and a lot of the 4AD artwork was coming out. I already had a Mac, along with a few basic design applications. I went out and got books by David Carson and Neville Brody, and literally copied their designs to learn how they had done what they did.

As I started understanding the tools a bit better, I went back to school to the Multimedia program at San Francisco State. I took about a year's worth of classes there, enough to make me feel comfortable working on both print and web projects, and then started working professionally as a graphic designer at c|net — that was around 9 years ago. Actually, the first Plinko site was just done in order to get hired as a designer somewhere.

My first design job was at c|net, where I stayed for about a year. I truly did learn more there in the first 2 weeks than my entire stint at San Francisco State. It was a really vibrant, exciting place at the time, and my first boss was a former art director at the New York Times. I was lucky enough to pick up a lot of the education I'd missed from not going to a proper art/design school from her. Once she left c|net, I quit within a month or so. Soon after, I convinced my then-girlfriend Irene Ng to quit her design job and join forces as Plinko. That was back in 1997, and we eventually got married in 2002.

Max · What kind of artist/designer would you call yourself?

Mark · As much as I'd love to be called an artist, I definitely lean more towards the designer side. We did recently have our first gallery "show"-- it was 50% prints, and 50% photography, so I'd like to step out in that direction more.

I'd like to think of ourselves as versatile. There's amazing designers who I really admire that put their stamp on everything, but we've never really been about that. Some people have said there's a "Plinko look" but I don't really see it. I get quite bored rather easily, so trying out new styles and strategies is the best way for me to keep things interesting. Plus, we're always working with different clients, and I don't want them to feel as though we're bullying them into making their project look a certain way.

Max · What kind of projects interest you the most?

Mark · Honestly, I would probably give a different answer next week, because these things just change so quickly. At the moment, I'm really enjoying working on projects where there's an element of humor. Something where either the client gives us the freedom to make it funny, which I think is a real rarity these days. People are so concerned with needing it to either be "cool" or "important", and I don't think either of those leave much room for humor.

The most obvious example of our current projects has been designing the "Haggis-On-Whey World of Unbelievable Brilliance" books, where we get to create page after page of really graphically stylized work that's just absurd.

On the Web side, I've become really revitalized over the past year as the promise of convergence really seems to be happening. There's just so many nifty Web apps and sites popping up all over the place. I think it's an incredibly exciting time to be a designer.


LINKS
www.plinko.com

BOOK
Rethink Redesign Reconstruct

Design Critique of the Chicago 2016 Olympics logo


Flame
It's said that the skyline seen in the olympic flame represents how Chicago rose out of the ashes of a fire. That's really cool. They did a very fine job of making it look like a flame first, and our skyline second. When I first saw this logo, I totally thought it was a flame, and THEN I saw our skyline. Great effect. However, does it disturb anyone that when you really look at this flame and the building that it's kinda ghost-like? Or that our city is make of flames? Ah well, you can't be that literal with it, because it's got a fantastic metaphor about our city's history.

Handle
The blue and green in the handle are supposed represent the lake and green parks. That is one thing that people around the world should remember about chicago--our fantastic unencumbered lakeshore. It was a great part of Daniel Burnham's Plan of Chicago in 1909. in Personally, I think the green really represents how sustainable chicago is).

Pencil marks
The entire logo is composed of pencil-like sketch marks, which show action and energy. It also shows the real grit of Chicago. We're not some slick city. We play it real. However, the sketchy style is reminiscent of many logos from the 1980s, but hey, this is the logo for an event 10 years from now, maybe that sort of style will come back around and be back in by then.
Actually, I wouldn't mind this style coming back in, because it would really help erik's and my pencil rubbing cause.

Font
I'm not sure what the font is. My first guesses were Avenir, Frutiger, and Vectora; however, they aren't quite it. If anyone knows the name of the font used, please leave the font name in the comments below. At any rate, it's a nice clean font. I'm thankful that the font Optima (found in parts of the CTA underground stations) was not used here.

Reproducibility
It appears that this logo is a raster file, but lately i've been amazed by some of the effects vector art has been able to achieve. Maybe this was created with individual vector lines, which would have helped them fine tune the exact look of the logo.

Conclusion
Chicago is the city that works. We have a Mayor that totally gets things done. This IS our time. It's time to live that same Chicago pride that SHOCKED THE WORLD with the 1893 World's Fair. Daniel Burnham the legendary city planner said a century ago, "Make no small plans. They have no magic to stir men's blood." That IS Chicago. We have the vision. We have the blood. We have the sweat. We should have the Olympics.

This is a fine logo that should make the city of Chicago proud. Many years from now we will look back on this logo with happy nostalgia. This fire will continue onward to the future to ignite the Olympic games in the Windy City.

Sunday, November 9, 2008

Making an Icon from Sketch


This is actually not some tutorials but just the process of how Io make an icon after the skecth.

Below is a 5 min screencast and the actual time to make this icon after sketch was about 25 minutes(Check out the full length verions on Vimeo).


A cover that’s beautiful but keeps us awake


Cover by Misha Van Tol
Midnight. Pillow. Bedside. Slumberous words. Soft, comfy linen in calm, neutral colors. What could be more sleep inducing? Even the author’s name is, well, gray. But there are some culprits here that mess up the somnolent mood. One is the word “tales,” which suggests intrigue, mystery, suspense, especially since it involves a bed—at midnight. Another is the pillow’s rakish angle, which is extremely active and suggestive, too, in a Hitchcock kind of way. And Mr. Graye? His bland countenance is betrayed by that rogue, ending e, which suggests, if not an exotic lineage, at least a British one, รก la Sherlock Holmes.



Watch those lines
The pillow’s not moving, but your eye sure is! All lines create motion. Angled lines create fast motion, which is great for skateboarding but not for sleeping. It does, however, bring up a useful technique . . .


Angles are active . . .
To generate tension, followed by excitement, all you have to do is make an angle. It’s unsteady — will it tip? — and all those triangles create converging lines, which move the eye rapidly from wide to narrow. Need more excitement? Add more angles!


Neutral colors
Neutral palette is all soft edges and quiet colors, beautiful without being arousing. An A for this part. Watch those lines Angles are active Neutral colors

Sunday, November 2, 2008

Web Design Experience

Frames Vs Tables
Some people like to use frames on their sites. I would recommend you avoid them if you can ... and you probably can.
Frames can be useful on occasion but "the pain is greater than the gain". Too many people complain of problems with frames than you can afford to ignore. So if you insist on using them, you'll need to create an alternative no-frames set of pages for these users. Honestly ...
... it's just not worth the trouble!
As If that wasn't enough reason, many search engine spiders also encounter difficulties with frames.
This means you'll either have to spend additional time learning how to overcome these shortcomings or be doomed to low search rankings. Convinced?
I hope so - for your sake!
In most of the situations in which you might feel you need to use frames you can usually use tables equally effectively. If not on their own, then in conjunction with SSI - Server Side Includes - which also allow you to write separate pages for inclusion in another 'main' page.
The left column navigation bar, for example, is one area that it may seem appealing to place in it's own frame. The content remains the same on every page and should you need to change it, you can effect a global change just by altering a single file.
What many people don't realize that you can achieve almost the same result by using an SSI callout in a table cell within the page. This will reference another file on the server which will be written into this location when called. To browsers and search engine spiders alike the page appears as a normal web page and doesn't give rise to any of the problems associated with the use of frames.
The Long Wait!
Whilst we're on the subject of tables...
... don't make the same mistake I did when first using them!
Tables are great for page layout - you can put things just where you want them to appear on the page. So I made one big table for the whole page, split it up into various rows and columns, then put (nested) other tables inside these and in some places yet smaller ones inside them ...
Wrong! Wrong! Wrong!
Those of you that are quietly chuckling can stop now, thank you! Don't pretend you've never made the same mistake!
Where was I ...?
Oh yes ... tables. Now the thing with tables is that the browser downloads all the contents of the table BEFORE it actually draws anything on the screen. This includes the contents of any nested tables. So what did that mean for my beautiful page?
It took DAYS to download!
Actually, it didn't really take that much longer, but it *seemed* like it did. The page remained completely blank until the browser had downloaded every single component and then suddenly flung them all onto the page at once! Leaving your visitors staring at a blank page for ages like this is not a good way to keep them on your site!
As ever, learn from your mistakes - or my mistakes! - and split your page up into several separate tables. Keep the whole lot as simple as possible and try to avoid nesting more than one layer of tables inside another. Browsers also take longer to draw tables if you don't specify the sizes. This is because the browser has to calculate how big the table needs to be to fit in all the contents.
You can also employ tables to add color to a page in preference to slow loading graphics. Or to effectively draw attention to text placed in a colored box on the page.
Tidy and Businesslike
Forget about loud colors, blinking or scrolling text, fancy animated graphics ...
... anything that distracts the eye.
Your visitor needs to concentrate on your text if you want to get them to 'bite'. Compare your site to it's offline 'brick and mortar' equivalent.
Would you paint that bright yellow and deck it out with flashing lights?
... 'Nuff said!
Keep your pages clean and well organized. People must be able to find things easily.
Imagine calling into a supermarket in a strange town to buy a box of tissues. You're in a hurry. To your dismay you find that none of the isles are labelled and you are forced to walk all over the store to find what you want.
How annoyed and fed up would you feel?
Sure, you'd still buy ... but only because of the hassle involved in leaving the store and going to another. Online this is as easy as ...
... click ... "I'm outta here!"
Actually, when you go to a supermarket you'll normally find that everything's neatly labelled and tidily displayed in rows with signs above them... build your online store along the same lines.
Apply what I call 'the three clicks rule'... make sure your visitor can find whatever they're looking for within three clicks. If not you run the risk of them becoming frustrated and leaving.

Extending Card-Sorting Techniques to Inform the Design of Web Site Hierarchies

When developing hierarchies for information-rich Web sites, designers and usability researchers often turn to card sorting for help in making design decisions. Card sorting offers a systematic and statistically significant process for answering questions about hierarchy design. However, those of us who have run card sorts know there is an art to conducting successful card sort studies, and there are many variables that can affect the usefulness of results. In this column, I’ll discuss the challenges and limitations of card sorting and review alternative and complementary techniques that designers can leverage when developing an information hierarchy for a large-scale Web site.
Challenges of Card Sorting
Part of the appeal of card sorting today is that researchers have the option of conducting studies either online or in person. When using an online tool, large numbers of participants can complete the exercise, lending additional statistical weight to the findings. In some organizations, the large sample size and statistical basis of online card sorting is helpful in dealing with decision makers. In-person card sorts let researchers interact with participants and ask probing questions to determine their organizational strategies, as well as other follow-up questions. A number of resources are available online that provide detailed steps on running and analyzing studies in both contexts.
Sounds easy, right? Just load your content into a card sort application or create actual cards, have participants complete the exercise, and the right organization for your site will be revealed! Unfortunately, it is not usually quite that easy. As Sam Ng wrote in an article on UXmatters, there are a number of issues to consider when conducting a study, from the timing of a card sort to setting proper expectations with stakeholders. Two of the points Sam mentioned in his article ring true and concur with my experience:
Run multiple studies. Designers can expect participants to sort a maximum of 80–100 cards during any one study. For sites with a large volume of content—such as intranets, retail stores, or research portals—such a limited number of cards may not accurately reflect the full breadth of content on the site. For such a site, you’ll need multiple studies to understand each individual level or section of the site. Running multiple studies adds significantly to the time and effort completing the process requires, and you should account for this when planning. Count on doing some subjective analysis. Although you can apply statistical methods to results, you’ll still need a certain level of subjective analysis to interpret the intent of card sort participants, as well as the consequences of content relationships. As a result of this necessary subjectivity, designers may have different interpretations of the same results, depending on their depth of domain knowledge and previous experience with the content. User researchers have proposed several analysis templates, involving spreadsheets and visualizations in place of dendrograms, but their analysis still involves a level of subjectivity. In addition to the points Sam Ng raised, I’ve found some other challenges to conducting successful card sort studies.
selecting and naming cards—Creating the cards for an online sort is very difficult in some domains. For physical objects, the process is easier. Choosing objects that have universally recognized names—and, potentially, using images—helps ensure respondents will understand the cards. But on an informational Web site, complex pieces of content are more difficult to describe, so you must make significant effort to ensure respondents will interpret the names of cards consistently, without introducing bias to the groupings participants will create. labeling groups—One of the most important elements of a site hierarchy is the labeling for each category or menu item. While open card sorting can provide insights to users’ view of content relationships, designers should not necessarily expect open card sorting to provide useful solutions for the names or labels of the resulting content groups. During a card-sorting exercise, participants give names to the groups they create, but each participant may create groups of varying sizes, with different intents. As a result, looking for trends among group names from different participants is difficult and may not yield helpful insights. While closed card sorting lets you test group labels, you can test only one set of labels at a time, and it does not allow any interplay between the labels for multiple levels of the hierarchy.