I thought it would be cool to dish out interesting links you can check out this weekend. Hope you find inspiration in them.
Pixar’s Brad Bird on Fostering Innovation: Anybody who’s been the tiniest bit interested in art eventually finds Pixar as a haven for all creatives. Brad Bird says it’s not easy to continuously churn out successful animated movies and he lists how to keep the fire of innovation burning.
If you work in lighting but you want to learn how to animate, there’s a class to show you animation. There are classes in story structure, in Photoshop, even in Krav Maga, the Israeli self-defense system. Pixar basically encourages people to learn outside of their areas, which makes them more complete.
Satan’s Logo.: The goal is simple—figure out how Satan would sell his “brand” with a logo. This is a good exercise for all the marketing people out there. You don’t have to choose the Devil as your make-believe client, just find a popular person or brand and ask yourself how you would promote him/her/it. But there’s something to be said about the necessary deception in coming up with Lucifer’s company name. Is branding in general the same way?
The hardest part was the new brand name actually. After all we are talking about the master deceiver in all history here so his true nefarious tendencies need to be cloaked in a thin veneer of corporate benevolence.
Mother Like No Other: Yves Geleyn created a cute animated movie for Mother’s Day. It’s a special presentation from Zune Arts. I love the variety of textures used in this animation.
Set to the tranquil, melodious song “Come As You Were,” by The Bird and The Bee, the short stars a young beaver who is whiling away the time on a tree trunk. When a red cardinal flutters in and pecks at his shoulder, the beaver is jolted out of lassitude, and begins his search for a Mother’s Day idea.
Finally, I just want to let you know I’m now writing the Friday Focus posts at Devlounge. If you’re dying for more link candy, go check it out.
Happy Mother’s Day weekend!
According to the latest episode from the Boagworld podcast, “you might be wasting your time designing with CSS” because now that Flash is open source, it’s “going to be everywhere and is the platform we should now be developing on”.
Flash versus CSS? What?
Let’s backtrack a bit. Adobe recently announced the Open Screen Project, which will implement a “consistent runtime environment” for Flash (and AIR) across all platforms. All, as in every medium imaginable: computers, mobile devices, TVs, and everything in between. Adobe working hand in hand with some of the biggest names in media and electronics to make this possible. For a company that’s always created proprietary technologies, moving to an open mindset is a bold move. But this will cement the popularity and innovativeness of Flash.
So how does Flash compete with CSS? We shouldn’t take the Flash vs. CSS part literally. It should be more like Flash vs. HTML and CSS. Or HTML and CSS and JavaScript. Wait, what about AJAX? And Silverlight?
See how silly this bout has become? All these web technologies are not direct competitors. (Except for Silverlight, perhaps, but I’m not even sure if it still stands a chance.)
But there’s a very real question being posed here. Should HTML/CSS coders move on to what seems to be the greener pasture that is Flash?
I firmly believe that not every website in the world has to be done in Flash for it to be jaw-droppingly awesome. There will be Flash developers who believe exactly the opposite. There will be hybrid web designers who can straddle between both and don’t really feel the pressure. Any of the three will prevail in the future, but from the looks of it right now, there’s still a place for plain old HTML and CSS no matter how big Flash has become.
Besides, both camps are still considerably immature. The web in general is, actually. It’s just that with all the effort spent into creating websites and the money that can be made from them, web technologies seem complete already. But they are just as dynamic and unpredictable as the web itself.
Perhaps one of the most well-designed and organized compilation of information design patterns, this website created by Christian Behrens is actually part of his master’s thesis.
It’s designed in Flash, which makes it a lot easier to demonstrate the non-static design patterns (e.g. layering) as they change over time. One can also look up the patterns according to different characteristics (e.g. order principle, user goal, graphic class, number of dimensions).
Anybody who wants to learn the variety of ways to present data—it’s a very elegant craft if it’s done right—should go visit this website. Truth is, Christian is not the first to come up with such a site, though he certainly did an awesome job with it.
User interface design is not the same as information design, but in several environments they can go hand in hand. Yahoo! has its own Design Pattern Library, which provides examples using the YUI Library and Yahoo! sites themselves. UI-Patterns.com is another such site. Even Chris Messina used a Flickr photoset as a repository for them (along with other equally useful collections: user flows, applications, etc.). Another personal project is this pattern library by Martijn van Welie.
Clearly, there’s a growing need for websites that would prove useful to information designers and interface designers. Perhaps even other types of designers. The problem is what’s out there right now are difficult to update and not exactly open to external contributions, mostly because they’re personal creations done during someone’s spare time. They’re dead ends. There is no way for other people to come in and suggest new patterns, or even share code, images, videos, and links that can help demonstrate them. There is no growth, no learning, no exchange of ideas. No community.
Design patterns keep people from reinventing the wheel, but all these collections of design patterns are redundancies themselves.
Am I looking for yet another niche social network like tlbox? Or a whole new breed of “inspiration” and “showcase” websites? Hey, if somebody can create a website with over 1 million user-generated colors, why not add another weapon to the designer’s arsenal? Move over, CSS, it’s time for ID and UI (or UX, or UIE, or whatever) to shine!
Beautiful, practical, flexible typography on the Web is practically non-existent and still remains a web designer’s dream. We’ve drawn a few steps closer through Flash- and CSS-based inline replacement techniques but at the price of accessibility and elegant code. Fortunately a member of the W3C’s CSS Work Group, Jason Teague, volunteered to be the primary advocate for the CSS3 typography modules. And he’s asking for our input.
These are the typography modules for CSS3:
CSS Fonts Level 3
…contains the properties to select fonts, as well as properties for font “adjustments”, such as emboss and outline effects, kerning, and smoothing/anti-aliasing. Font selection is identical to the similar section in CSS2. The font adjustment properties are new to CSS3.
CSS Web Fonts Level 3
…provides syntax for describing fonts: their name, their style, which characters they cover and also where to download them from. Adding such descriptions to a style sheet allows a designer to be more precise in font selection and, if the browser supports font downloading, to use fonts that people are unlikely to have installed, including fonts that the designer created himself for the purpose. Web fonts are also used by SVG and, conversely, one can use SVG to create fonts for download. Web fonts existed already in CSS2.
If you ask me, and I’m speaking as a non-expert in typography, I just want the type size renderings to be normalized across all browsers first. With all the new properties about to hit as CSS3 becomes mainstream (it’s working on Safari already), web designers will face even more problems just trying to keep websites sane-looking across different browsers.
Problem is, the W3C is not the right venue for raising this problem since it’s the browser vendors that render styles differently. And I’m not just referring to Internet Explorer here. We all want pixel perfection, do we not? But is it even possible? Not having to choose between px, em, and pt font sizing would be a good starting point.
Regardless, it’s good that there’s an open communication line between the general Web community and the working group. It doesn’t matter if you’re a type fiend or a casual web surfer. All you have to do is leave a comment (you have to register first), and your voice will be heard. So, what have you been wishing for when it comes to web typography? Sound off at Jason’s blog now!
Jeffrey Zeldman’s article, The vanishing personal site, brings to light what many of us have been wondering about in the back of our heads for a while now. Social networks that provide features often found in a personal website captured our fancies and stretched our virtual personas in all directions. That goes for both the knowledgeable and not so knowledgeable in web development.
The Question
It’s not really a bad thing, which Zeldman also stresses. The question is, now that you’ve scattered yourself all over the place, how are you going to put yourself back together?
Not that you need to; I’m sure not everyone would be interested in painstakingly picking up the pieces one by one and gluing them together. That’s why FriendFeed became an instant hit. But if you ask me, using another social network to put them all together does not feel good. Not one bit. I’d consider it another convenient (even organic) way to spread my own content. But that’s it. I still dream of the day I manage to tastefully put my stuff together in one place. Like these websites:
more
Created with programmers, system administrators, and web designers in mind, tlbox takes the very simple idea of saving bookmarks online. Now before you dismiss it as another one of those bookmarking websites like del.icio.us or Ma.gnolia, within minutes of using it you’ll find out it’s different enough.
How tlbox Works
tlbox integrates with Firefox (compatible up to Firefox 3). Once the add-on is installed, it appears as a dropdown menu much like your typical Bookmarks folder, except that it has a fixed set of iconized subfolders, ranging from “.net” to “xml”—basically categories that are relevant to computer geeks.
I thought this was a really great idea because previously, I was trying to organize all the web design resources I might find useful later on. I use del.icio.us for my online bookmarks, but even if I kept them neatly arranged with the help of tags, it’s became cumbersome to come back later and look them up. For example, if I wanted to look at my CSS-related bookmarks, I had to type in del.icio.us/sofimi/css into my browser.
But I wanted to do that within my browser window quickly. I tried it out with a local bookmarks folder, but I couldn’t share them with anyone else, or take them anywhere else for that matter (discounting syncing services like Google Browser Sync).
On the web, you can check out what other users are bookmarking, arranged by popularity and recency, and add them to your own “box”.
It’s also interesting to note the use of icons corresponding to each available category. This helps improve the user experience especially since bookmarking sites are almost always filled with text.
Improvements
I personally believe tlbox is a lifesaver. Unfortunately, it’s a very niche service, which means any chance of feature improvements will be slim to none, but I thought talking about it might draw in more geeks, more fans, and perhaps even potential investors! Seriously, I really wish the web gurus would take a hard look at it and see where it could improve.
The only thing that bothers me about tlbox is that when I save a site, the title of the page is truncated to 32 characters.
Rigidity vs. Flexibility
Even if its current capabilities are limited to computer-related bookmarks, it’s definitely easy to accommodate other categories. tlbox just needs to be a little more flexible. Just a little. I quickly got sold on this service exactly because it was not infinitely flexible like the tag-based bookmarking ones. I needed rigid categories in order to keep my links organized and easily discover related ones. And I believe other people might feel the same way.
Baby Websites is a pretty interesting proposition. It’s a sub-section of hosted blogging platform Squarespace that caters specifically to the doting parents who want to show off their babies online.
The praise given by Business Week on the homepage reveals the competition Baby Websites is up against: .Mac. Sure, one can compare it to the rest of the blog software out there, but Baby Websites and .Mac pride themselves in more user-friendly interfaces and easier customization for a price.
But that’s where the similarities end. The design of Baby Websites is Squarespace’s arrow that aims squarely at the target market. For once, the design of an Apple product looks like an afterthought! After you have seen Baby Websites, the .Mac website will look only satisfactory especially since it inherited its look from the rest of Apple.com.
Of course, it’s the inside that counts. And Apple’s consistency with its subsites is no small feat. But you cannot discount the effects of pretty packaging. Apple knows that well. But good design is not just about making beautiful things. It’s also about purpose.
If I am a mother looking for a publishing solution for my baby’s website, which site will I seal the deal with? I would definitely prefer a product that shows exactly what it can do upfront. More moms will go, “I want to make a site that looks like that!” rather than examine all the pretty icons, specs, or videos one by one.
The .Mac page looks a bit too overwhelming for blogging newbies. Sure, it has great graphics and its features are neatly arranged in a grid, but that’s it. It’s just sitting pretty like that. Again, it now looks mediocre because exactly because it’s following a design convention it wasn’t meant to follow if it was supposed to appeal to its audience.
The first time I saw Squarespace I was enamored by it. Since then, I often find myself surprised whenever I discover a blog hosted on Squarespace for the simple reason that it looks different from the themes on the more popular blogging systems. Even the custom-designed ones seemed to carry the same airy, whitespace-filled aesthetic the default templates have. I believe a baby website is the perfect place to transfer that aesthetic, and Squarespace is an expert at it.
Whether you love it, hate it, or don’t get it, Twitter is a thing of fascination on so many levels. It’s supposed to be a one-trick pony, designed for the restless, the narcissists, and the stalkers (pick one) to answer one simple question: “what are you doing?”
Ironically, it has managed to spawn more innovations and hype—clients, web applications, memes, contests, meetups—than any of the big, bloated social networks. This is interesting because Twitter is not just a “web application”, which, literally, is an application that exists on and uses the Web. It’s an activity taking on many different forms in scattered locations, whose very nature seems viral, and whose openness seems almost unprecedented.
Identity and Branding
Twitter has a stylized blue bird as its mascot. Although you don’t get to see it as often as its logotype, many Twitter apps have adopted the general idea of a bird to associate themselves with their mother app.
The birds don’t even have to be blue, they don’t even have to look like the original Twitter bird. And the Twitter homepage doesn’t even show it, just several bird-themed illustrations.
Twitter’s colors and images have also been adopted by 3rd-party applications. Patterned backgrounds are definitely “in vogue” once more.
The design elements we can easily associate with Twitter has been called the Twitter Identity Transference Syndrome, TwITS. It’s clearly in effect when someone calls a completely unrelated bird logo a Twitter rip-off.
Interfaces
Twitter users spend most of their time on their respective Twitter clients, whether it’s on the mobile phone, the Web, or the desktop. The most notable clients don’t vary greatly in features, although the biggest trend is integration with supporting Twitter applications like URL shorteners (more on that later), photo sharing, search, Hashtags, etc.
Snitter’s users have created various custom themes, showing how versatile the Adobe AIR platform can be.
Now here’s a completely different way of interacting through Twitter. Botanicalls lets plants “send” updates to their owners via Twitter when they need to be watered.
Design and Development
People are constantly looking for new avenues for their design and development experiments. Twitter, with its casual, even playful, atmosphere is the answer. Novel ideas, lots of bold colors, and almost always there are vector-based illustrations below.
As an aside, one can always resort to mimicking the Twitter look. Twitterverse does not adopt the light blue color scheme but the logo and layout are a dead giveaway.
Twitterholic clearly admits in its footer that it “ripped directly, and we mean directly, from Twitter.com”. Stealing the look, no matter how blatant, is an acceptable means of associating itself with Twitter. It’s on the opposite end of the TwITS spectrum.
Ironically, Twitter’s extensibility has more than made up for its lack of features. The websites above are the best examples of how you can create “groups” within Twitter. zefrank thought Twitter would be the perfect venue for Color Wars, and the whole thing just grew into a life of its own.
- Hashtags lets you tag and track keywords within tweets.
- Quotably makes threaded conversations possible.
- Twubble finds your friends’ friends for you to follow.
- Twixxer provides photo and video sharing features.
Twitter search is also another feature that is being improved upon by 3rd-party services. Why isn’t Twitter’s search function enough?
Linking, Popularity
Because tweets are limited to 140 characters only, Twitterers have to use URL shortening services when they share long links in their messages. Twitter uses TinyURL by default, but so many others have popped up since. URL shorteners have been around for a while, but Twitter is probably the web app that skyrocketed their popularity. I personally use is.gd as it is the shortest one I’ve seen, though I’m curious how other people choose theirs.
- nsfw.in - for websites that are not safe for work!
- linkbun.ch - for combining multiple websites into one
- rickroll.it - not limited to rickrolling people though!
For the “Twitter purists” who believe you should only tweet what you are doing, not what website you find interesting, then are you saying all the clever little Twitter apps shouldn’t exist? There are even half a dozen websites built solely to track the most buzzworthy links on Twitter:
And websites that rank Twitter users according to popularity:
Humor
Early birds (excuse the pun) in the Twitter game will fondly remember LOLcats serving as the website’s error messages. It was very crude compared to the rest of the look of the site, but people loved it. And because Twitter wentgoes down a lot, many people saw and grew accustomed to it. They have since disappeared and have been replaced.
What is it about Twitter that’s got everyone a-twitter?
There was a time then the words Paul “Scrivs” Scrivens and 9rules were synonymous to Wisdump. It feels like those days are so far away, but every once in a while something takes us back, like today.
9rules Relaunch and Submission Rounds
9rules is one of those communities that you have to be part of to understand. There’s no community on the Web that is quite like it.
It’s both exclusive—official members are handpicked during each submission round—and open—my.9rules brings everyone else into the conversation. It’s not just a social network, it’s a social content network. It’s constantly evolving, growing, and concocting experiments that redefine what it means to socialize on the web.
On April 30th, 9rules will launch a new (or is it old?) version of its website, but that’s not the only date present and future members should mark on their calendars. There’s also a new set of submission rounds, the first of which is on May 7th (followed by August 6th and November 5th).
More from 9rules
As an aside, check out these 9rules-related links they’ve been cooking up:
- 3by9, a blog written by the 9rules team
- Quofda, which stands for question of the day
- Expert Idiot, a blog about internet companies
There’s one more website I’ll discuss with more detail below.
Emersian, a design blog by Paul Scrivens
Just how prolific Paul Scrivens is boggles the mind. Emersian is an unpretentious blog about design. One of his latest entries, You Are Not A Designer, is sheer proof of that. I particuarly enjoyed this bit:
The problem is how many people can design solutions to fix the problems a site has? How many people can take the ideas of their client and translate them properly to the screen? How many designers can look passed their own style and design a site that fits the current project?
… Push your limits. Test your boundaries. Designers like to work within their comfort zone because they know what they will like. Make something ugly to possibly come up with some ideas on how to make something beautiful. When you need inspiration create your own.
He ends the piece saying Emersian is an exercise in expressing his love of design, not his expertise in it. Once again we come across a website redefining what popular notions dictate otherwise. That design is more about learning prevailing over knowing, purpose over trendiness, foundations over superficiality, possibilities over limits. It’s always a struggle balancing these pairs, but that’s part of the job.
Websites are built almost solely on its communities. In the case of blogs, the communities hang out in the comments section. That’s where all the socialization and exchange of ideas take place. But writing a thoughtful comment alone is difficult enough. Don’t make it any harder for your readers.
This is one of the most horrifying comment areas out there:
Now that’s a long scroll. This isn’t from a product landing page or a shopping site with pages upon pages of “special” offers. This is a blog, for crying out loud!
Let’s assume for a second that only the top box (which is the actual comment form) exists and focus on that. It’s just too busy! My eyes were all over the place with the sprawling combination of boxes and text.
I know it takes effort to align form elements. (Or not, since this particular site uses tables to do that.) But it would be much easier on the eye if all the input fields appeared in a linear fashion, one after the other, to minimize the confusion.
Linear is not always necessary, but always keep forms as simple as possible, if you can help it. Take a cue from Smileycat’s comment form design showcase and note how functional and uncluttered those forms are.
Okay, so you get through the ordeal of leaving a comment, but this blog says you’re not done yet! It continues to nag you with the “Blog this at your site” and the “Tell a friend” sections. It doesn’t help that the lack of comments subconsciously discourages the reader from actually commenting. Even if there are any comments, those two extra panels have already separated the reader from the “leave a comment zone” since the comment box is now too far away.
The Share This button is certainly more desirable, both in form and function, than these bulky boxes. If you don’t think a button will cut it, what about collapsible panels with JavaScript?
Since the comment form above belongs to a blog in a blog network, many more readers will be turned off and confused by this comment form on several different blogs. It’s not too difficult to elminate this usability problem: Don’t complicate the process. Don’t ask too many questions. Don’t look desperate. Just let them comment.
