On his website, French designer Mathieu Badimon presents new possibilities for designing in Flash—new now, but these will shortly be les applications du jour. Visit and play with his fascinating and entertaining array of lab experiments to see what’s in store. Liquid form and gravity ball are especially amazing to me, but all of Badimon’s designs demonstrate what can be achieved with Flash and intense scripting.
The simplicity of the site’s appearance certainly belies the complexity behind it. Badimon’s selection of simple shapes and colors are just right, and he combines them expertly to create a game board of sorts, which lends an extra element of play to this exercise. The navigation tabs allow the user to control the orientation of both the game board and the activity within each square, offering all sorts of 3-D angles and a near endless assortment of views. Navigation is easy, even for a non-NetGen user like me. It occurs to me that maybe the NetGen user would find Badimon’s activities to be a little ho-hum, but I remember when telephones were rented from the phone company, and so perhaps I have a different threshold for surprise.
Speaking of surprise, there is a German website for an ad campaign about horses that is well worth checking out, if you are at all interested in innovative uses of Flash Video. The video is dramatic, captivating, and brings the horses up close and personal, as they snort and cavort through diverse landscapes. (Actually, they gallop, but I like to rhyme). Anyway, the site displays in full picture, with the Flash navigation bar remaining wisely hidden throughout the video. I admit, however, to worriedly seeking navigation while the film ran by clicking near the progress bar. "Good move," I thought, as the navigation appeared. Next thought: "Am I old? Does the need to see website navigation right away place me squarely within an older generation of less confident users?" Could be—or perhaps I’m just a control freak. (I think I'll go with that)! In any case, I imagine that many users, especially younger ones, would simply wait for the navigation bar to appear, and it does. So, when you enter this site, remember that there is no need to hunt for navigation. It's coming. Just relax and enjoy this fine work.
Oh yes, the link to the site. It's also coming. Here it is.
Sunday, March 25, 2007
Sunday, March 18, 2007
WEB 2.0 II
In their March 10-16, 2007 publication, The Economist featured an article on Tim Berners-Lee and his outlook on Web 2.0. Not surprisingly, Berners-Lee is especially "excited about three areas of the web's development: its spread to millions of new users via mobile devices, the growing interest in the technology's social and political impact and the 'semantic' web, in which information is labeled so that it makes sense to machines as well as people." It's definitely worth a click to read the full article!
Saturday, March 10, 2007
WEB 2.0 PRIMER
Web 2.0 refers to a process that is occurring within the Web. Some say the Web is growing up, that it is witnessing a maturation process, and they accept Web 2.0 as conventional wisdom. Others have a more “wait and see” attitude at best, or they decry Web 2.0 as nothing more than marketing hype. Still others think that Web 2.0 offers the possibility to change the world.
The word “Web 2.0” was coined by Tim O’Reilly, of O’Reilly Media, Inc. In an article entitled quite simply, What Is Web 2.0, O’Reilly provides a detailed description of Web 2.0 that is interesting, if somewhat complicated for the layperson. If you think about it a bit, though, it’s really not that complicated. Most of us who have been on the Web at all, even those of us who are indifferent or impervious to developments such as Web 2.0, have bumped into it on eBay or Wikipedia. Still, here are the cliff notes!
O’Reilly tells us that Web 2.0 doesn’t have a boundary, but rather, a gravitational core. He envisions Web 2.0 as “a set of principles and practices that tie together a veritable solar system of sites that demonstrate some or all of those principles at a varying distance from the core.” His meme map, pictured below, shows what he means. (Click on the image to view or print out a better version).
In O’Reilly’s interpretation of Web 2.0, the Web is positioned as platform and the user positioned to control his or her own data. Companies that demonstrate Web 2.0 qualities are pictured in the green ovals above the orange square, with those closest to the square exhibiting the most Web 2.0 characteristics. The more of the following qualities that a company exhibits, the more Web 2.0-oriented it is:
- Services, not packaged software, with cost-effective scalability
- Control over unique, hard-to-recreate data sources that get richer as more people use them
- Trusting users as co-developers
- Harnessing collective intelligence
- Leveraging the long tail through customer self-service
- Software above the level of a single device
- Lightweight user interfaces, development models, and business model
Unlike Amazon, a company such as Barnes and Noble, for example, would not be described as Web 2.0-based, even though they sell the same products. Amazon’s trademark is “user engagement,” and they utilize the results from such, that is, the wisdom of the masses, to lead customers to the most popular items first. Barnes and Noble, on the other hand, is smaller, features less user participation, and a search on their site is likely to yield the company’s products first. Their business model is presumably more traditional than Amazon’s.
That some Web 2.0-based companies claim not to possess or be able to describe their business model has been worrisome to some observers who blog on the Web 2.0 phenomenon. Among these bloggers is Mark Evans, who provides a distinctly Canadian perspective on the world of telecom and technology. Others such as Dion Hinchcliff, a self-described Bubble 1.0 survivor, acknowledge that there’s a lot of money to be made and a lot of “stuff” being made for Web 2.0, and wouldn’t we love to cash in, but they’re watching to see if we’re headed for another version of the 90’s dot.com bubble. Then there are those who exhibit open antipathy toward alleged Web 2.0 hype, as found in humorous sites such as EmptyBottle.org.
In his article, What is this thing called Web 2.0?, Kenneth Ronkowitz, Adjunct Instructor at New Jersey Institute of Technology, lists a number of current Web 2.0 applications. His list got me thinking about the implications of Web 2.0 for non-profit organizations (NPOs). Web 2.0, after all, appears to democratize the web in many respects—at least it seems so at this point. According to Thomas L. Friedman, Web 2.0—the technology, culture and business—mashes geography and flattens the world. Indeed! Besides this, another happy reality for NPOs is that many web tools and applications are free or low-cost. Thus, it is not surprising to find a growing number of services and applications targeting the fundraising and social networking needs of non-profit organizations.
Daniel Ben-Horin, founder of CompuMentor, NetSquared, and its subsidiary TechSoup, was quoted by MSNBC in a June 2006 article as follows: “Information technology is moving away from what nonprofits have the least of (money) and toward what we have the most of (people and community). Web 2.0 is a buzzword that may not last, but the social Web will, and what we’re seeing now is just the beginning."
He's right about that. Web 2.0 is the beginning of an adventure--for commerce, for non-profits, for many, if not all of us. The MSNBC article should serve to remind us that there are those who will be left out--the elderly, those without access, those whom non-profits serve. There are those, too, who may be endangered by the ability to more easily express their opinions from dangerous places. In addition, the of growth of Web 2.0 ushers in an era of greater concern about copyright, governance, privacy and numerous other issues that were cited in this blog several posts ago in relation to the Michael Wesch video, The Machine is Us/ing Us. As with many social trends and technological developments, Web 2.0 presents promise as well as problems. It will take time to understand and figure it all out.
Thursday, March 1, 2007
VISUAL DESIGN STYLE
In The Devil Wears Prada, Meryl Streep tells her young assistant that she has no style. Ouch! What precisely is Ms. Streep’s character looking for? Rightly or wrongly, she obviously wants to see more flair and visual appeal. For her, there is something missing that enhances desirability. This would seem to be the core issue for any designer or visual design style, whether on the web, in photography, in packaging, and beyond, i.e., how to enhance desirability by appealing to our aesthetic sense and our emotions
Creating desirability varies across media and depends on the purpose and content of the piece. If we compare a few websites, we find differences in design style depending on their purpose and how market-driven they are. On Apple’s website, they open immediately and effectively with "hot news"--a montage of film clips that contains famous "hello's" from the movies to introduce their new iPhone. (By the time you read this, however, it may have been changed to something else, but it was great)! It would seem that the montage was timed to coincide with the 79th Annual Academy Awards, and it worked beautifully on TV in the days leading up to the show and even thereafter. The advertisement is simple, classic, engaging, entertaining and effective, and this seems to be Apple’s trademark design style from their unmistakable and memorable logo to their elegant video, print and web advertisements. We are intrigued and pulled in. Maybe we’ll even buy some of their attractively designed items. Contrast this with Bank of America’s website. Their logo, too, is well-known, uses the American colors, and appears throughout. On their websites, both Apple and Bank of America make good use of redundancy to give context and order to complex information. The websites are readable, uncluttered and useable, but we expect a more sedate image and design style from a bank, and we get it, which is probably intended to give a feeling of stability (even as banks routinely gobble each other up)! The bank’s website is also more task-driven. Many users are simply doing their online banking, not looking for fashion, attractive electronics, or entertainment.
In a bit of a different vein, the U.S. World Wildlife Federation website is also well-known and attractive. It has great deal of text. The text imparts a serious tone, and supplies much information that those attracted to the cause will likely get through. If they don’t, there are other interesting pages to scan or read more thoroughly, including a fun and games page. The panda logo appears on every page, and each is filled with beautiful photos—no video. The WWF design style is simple, serious, and attractive, and their website is very easily navigable and eminently useable. The elegance and sex appeal we get from Apple is not called for here, and would probably be counterproductive. Nonetheless, WWF is certainly marketing itself with their design style, albeit quite differently than Apple or the bank.
By developing and applying a recognizable design style, a company or visual artist makes themselves known, often with few words or no words at all. Thus, they maintain and attract the attention of their existing audience, and by repetition and variations on the theme, they can grow their base--especially if quality products are behind the visuals!
Creating desirability varies across media and depends on the purpose and content of the piece. If we compare a few websites, we find differences in design style depending on their purpose and how market-driven they are. On Apple’s website, they open immediately and effectively with "hot news"--a montage of film clips that contains famous "hello's" from the movies to introduce their new iPhone. (By the time you read this, however, it may have been changed to something else, but it was great)! It would seem that the montage was timed to coincide with the 79th Annual Academy Awards, and it worked beautifully on TV in the days leading up to the show and even thereafter. The advertisement is simple, classic, engaging, entertaining and effective, and this seems to be Apple’s trademark design style from their unmistakable and memorable logo to their elegant video, print and web advertisements. We are intrigued and pulled in. Maybe we’ll even buy some of their attractively designed items. Contrast this with Bank of America’s website. Their logo, too, is well-known, uses the American colors, and appears throughout. On their websites, both Apple and Bank of America make good use of redundancy to give context and order to complex information. The websites are readable, uncluttered and useable, but we expect a more sedate image and design style from a bank, and we get it, which is probably intended to give a feeling of stability (even as banks routinely gobble each other up)! The bank’s website is also more task-driven. Many users are simply doing their online banking, not looking for fashion, attractive electronics, or entertainment.
In a bit of a different vein, the U.S. World Wildlife Federation website is also well-known and attractive. It has great deal of text. The text imparts a serious tone, and supplies much information that those attracted to the cause will likely get through. If they don’t, there are other interesting pages to scan or read more thoroughly, including a fun and games page. The panda logo appears on every page, and each is filled with beautiful photos—no video. The WWF design style is simple, serious, and attractive, and their website is very easily navigable and eminently useable. The elegance and sex appeal we get from Apple is not called for here, and would probably be counterproductive. Nonetheless, WWF is certainly marketing itself with their design style, albeit quite differently than Apple or the bank.
By developing and applying a recognizable design style, a company or visual artist makes themselves known, often with few words or no words at all. Thus, they maintain and attract the attention of their existing audience, and by repetition and variations on the theme, they can grow their base--especially if quality products are behind the visuals!
Wednesday, February 21, 2007
PICTURE WORTH 1000 WORDS
This wrongly translated Chinese proverb produces eyerolls from many who believe it to be a gross exaggeration. They counter by saying that a picture is really worth only a picture. Well, a thousand words are a lot of words, and ten thousand words, which was the actual number in the proverb's literal translation, are a lot more. It’s pretty hard for a single picture to hold up under all that pressure. Still, there is no denying how an image can captivate. Certainly, images add dimension and powerful meaning to text. Illustrations, icons, charts, graphs—the visual world is rich with examples of how these elements summarize or elaborate upon co-existing text, sometimes even replacing the text entirely.
If you look at the toolbar on your computer screen, you’ll see any number of icons that replace words, and most of us (at least those who are computer literate) have no problem comprehending their meaning. Because they are widely understood, icons can be used to great effect in advertising. On the Windows homepage, for example, Microsoft skillfully uses four of their common icons to introduce Windows Vista.
Graphs and charts are frequently used to provide financial data, usually supplementing and clarifying the figures contained on balance sheets and such. But here, on the website of a Philadelphia-based non-profit organization, we find posted a 2005 annual report that uses only pie charts to show revenue and expenses—perfectly appropriate for an audience that may not be interested in scrutinizing all the little financial details. (You’ll find the charts on page 6 of the pdf).
In advertising and for other purposes, illustrations are often used in conjunction with or in lieu of actual photographs of products. Why use a photo of dish soap when an illustration might offer a more interesting visual representation of a common household item? The Skippy website, for example, uses illustrations as well as sound to create a feeling of child-like fun and exuberance. Images such as those on their Trail Mix page would be impossible to create as photos, and they would probably not be as entertaining. Throughout Skippy's website, we have many crayon-like illustrations and also photos and games, all geared for kids (but great for adults, too)! The only pages without images are the more serious ones, i.e., the allergy information and FAQ pages. (There are just a few peanuts on the latter)!
In a world where people are mainly scanning documents or websites for what they need or want, words alone may often be overlooked. Add a great illustration, and you may at least catch their attention and possibly even say a lot more, if not 1000 words. Let’s not get carried away!
If you look at the toolbar on your computer screen, you’ll see any number of icons that replace words, and most of us (at least those who are computer literate) have no problem comprehending their meaning. Because they are widely understood, icons can be used to great effect in advertising. On the Windows homepage, for example, Microsoft skillfully uses four of their common icons to introduce Windows Vista.
Graphs and charts are frequently used to provide financial data, usually supplementing and clarifying the figures contained on balance sheets and such. But here, on the website of a Philadelphia-based non-profit organization, we find posted a 2005 annual report that uses only pie charts to show revenue and expenses—perfectly appropriate for an audience that may not be interested in scrutinizing all the little financial details. (You’ll find the charts on page 6 of the pdf).
In advertising and for other purposes, illustrations are often used in conjunction with or in lieu of actual photographs of products. Why use a photo of dish soap when an illustration might offer a more interesting visual representation of a common household item? The Skippy website, for example, uses illustrations as well as sound to create a feeling of child-like fun and exuberance. Images such as those on their Trail Mix page would be impossible to create as photos, and they would probably not be as entertaining. Throughout Skippy's website, we have many crayon-like illustrations and also photos and games, all geared for kids (but great for adults, too)! The only pages without images are the more serious ones, i.e., the allergy information and FAQ pages. (There are just a few peanuts on the latter)!
In a world where people are mainly scanning documents or websites for what they need or want, words alone may often be overlooked. Add a great illustration, and you may at least catch their attention and possibly even say a lot more, if not 1000 words. Let’s not get carried away!
Sunday, February 18, 2007
HELLO "NEW" WORLD!
In his skillful video, The Machine is Us/ing Us, Michael Wesch, Assistant Professor of Cultural Anthropology at Kansas State University, uses Web 2.0 technology to illustrate the potential that Web 2.0 offers. This proves to be an extraordinarily effective technique. The Machine is Us/ing Us was released on YouTube on January 31, 2007, and it quickly went viral, becoming the most popular video in the blogosphere and the #1 video on YouTube on February 7th.
Wesch’s success is not surprising. His video is visually interesting, compelling, thought-provoking, even moving. Though younger viewers may differ with me on this, his choice of music (There’s Nothing Impossible by Deus) was superb, and it imbued the video with emotion, a crescendo of connection and possibility that leads the viewer to consider a number of undeniably important issues. As XML (Extensible Markup Language) ushers in Web 2.0, Wesch posits that we will have to rethink a few things such as copyright, governance, privacy, authorship, rhetorics(?), even family, love and ourselves. (I hate to be picky, but the use of the plural “rhetorics” hints that a little spell-check might be needed)!
From a design perspective, the Wesch video is successful at leading the viewer in precise and gripping fashion from one visual element to the next. The rhythm of the piece, the speedy movement of text on the screen, and the typographical changes that occur are amazingly complex. Some of the feedback on Wesch’s video suggests that different interfaces and desktops environments be represented in the forthcoming final version. Perhaps this is so, though most viewers will find The Machine is Us/ing Us to be effective and memorable just as it is.
Wesch’s success is not surprising. His video is visually interesting, compelling, thought-provoking, even moving. Though younger viewers may differ with me on this, his choice of music (There’s Nothing Impossible by Deus) was superb, and it imbued the video with emotion, a crescendo of connection and possibility that leads the viewer to consider a number of undeniably important issues. As XML (Extensible Markup Language) ushers in Web 2.0, Wesch posits that we will have to rethink a few things such as copyright, governance, privacy, authorship, rhetorics(?), even family, love and ourselves. (I hate to be picky, but the use of the plural “rhetorics” hints that a little spell-check might be needed)!
From a design perspective, the Wesch video is successful at leading the viewer in precise and gripping fashion from one visual element to the next. The rhythm of the piece, the speedy movement of text on the screen, and the typographical changes that occur are amazingly complex. Some of the feedback on Wesch’s video suggests that different interfaces and desktops environments be represented in the forthcoming final version. Perhaps this is so, though most viewers will find The Machine is Us/ing Us to be effective and memorable just as it is.
Saturday, February 3, 2007
TYPOGRAPHY AND THE WEB
Typography is part and parcel of our visual world, allowing us to distinguish CNN from NBC or Taco Bell from McDonald’s. Yet, most people tend to ignore it. The only time people really notice typography is when a composition doesn’t work or they can’t read the type. Technology is changing our relationship to type rather quickly. Anyone who has the right software package can design a typeface and create a layout, though probably not very well.
There are any number of guidelines and standards on typography for print materials, which made me wonder how the rules differ when designing for the Web. It seems there are significant differences, and these are created and complicated by the fact that each line of text, each font and typestyle is recreated by the user’s Web browser, server and computer operating system. Two resources on the Web offer a logical presentation of issues to consider when designing for the Web: Access by Design and Webstyle Guide. Here are a few basics that relate specifically to typography:
There are any number of guidelines and standards on typography for print materials, which made me wonder how the rules differ when designing for the Web. It seems there are significant differences, and these are created and complicated by the fact that each line of text, each font and typestyle is recreated by the user’s Web browser, server and computer operating system. Two resources on the Web offer a logical presentation of issues to consider when designing for the Web: Access by Design and Webstyle Guide. Here are a few basics that relate specifically to typography:
- Typefaces are rendered at lower resolution on the Web, and this affects legibility. Times New Roman, considered the most legible typeface for print materials, does not translate well to the screen. Better choices would be Georgia, Verdana, and Trebuchet, all of which come with most operating systems. However, dense text passages are likely to be printed out by the user. If a website builder suspects that users will print out the text, then Times New Roman remains a good choice.
- Left justification of text is safest to reproduce and easiest to read on the Web. Technological issues make it hard to control for excess space and other problems that may arise with full justification, and right justification is simply hard to read. As for headlines, when type is left justified, they should be, too.
- On most Websites, line lengths are too long for easy reading. While restricting line length is complicated by technological issues, a line length of fifty to seventy characters per line remains the ideal.
- As with print materials, the standard combination of upper and lower case characters enhances readability.
- Italics, bold, and underlined and colored text are variations that make it easier for goal-oriented Web users to scan for information. The use of all capitals for this purpose is, not surprisingly, less effective.
Obviously, I’ve just scratched the surface of this issue. There are a tremendous number of resources with variations on the theme. While researching this subject, I came across two interesting tidbits with which I will close this discussion...
Who knew? Helvetica typeface is celebrating its 50th birthday this year with an independent documentary film by Gary Hustwit. The film examines the proliferation of Helvetica in our visual world as part of a larger conversation of our global visual culture and how type affects our lives.
Check out Mark Simonson’s humorous piece, Let’s Talk Type, which he wrote in 1977, but contains a few eternal truths!
Subscribe to:
Posts (Atom)