BlogmyQuery – BMQ

We’re designers, so it makes sense that a lot of us are visual learners and do better looking at charts and graphs than reading an article or listening to a podcast. Typography and color are two great topics that are perfectly suited for infographics, charts, and other graphical learning tools.

Below we’ve collected a good number of great infographics that will teach you how to use typefaces and colors effectively. There are guides for choosing a typeface, for combining typefaces, for figuring out what different colors mean in different cultures, and a lot more.

Typography

Dig into the history of typography and catch up on the typographic origins. Whether you need help choosing the right font or want to know how to effectively combine fonts, the graphics below can help, for both print and online design.

So You Need a Typeface
While at first this infographic appears to be a bit tongue-in-cheek, it’s actually quite useful. Start by choosing what type of project you’re working on, and then just answer a series of yes or no and good or bad questions to find a suitable typeface.

The Anatomy of Typography
Understanding all the elements that make up a typeface is an important step in learning to expertly combine typefaces. This infographic breaks down the anatomy of individual characters within a typeface, covering everything from aperture to strokes to the different types of terminals.

Periodic Table of Typefaces
The most popular fonts are graphically represented in the style of the periodic table of elements in this poster. It gives some brief history of each typeface (including the date it was first designed and who designed it), as well as the classificiation of each font. There are a number of different versions of the poster available for purchase, or you can print it yourself.

The Evolution of Typography
This infographic showcases the changes in typographic design throughout history. It covers the evolution of serif typefaces and sans-serif typefaces, as well as a brief description of the history of script and blackletter typefaces.

Mixing Typefaces
This simple chart serves as a guide for combining twenty-two different common typefaces. It offers three separate classifications for determining whether two typefaces are compatible: “Combine at will”, “Not a conservative choice”, and “Think again.”

19 Top Fonts in 19 Top Combinations
This great chart provides an instant visual reference to good combinations of popular fonts, including Helvetica, Garamond, Gill Sans, Minion, and more.

Type Palettes
Graphical representations of typography combos are a great way to see how different fonts work together. This Type Palettes article shows a number of complex typography combinations, using different typefaces for headlines, subheadings, text and captions.

Most Popular Fonts by Operating System
Not everyone is using @font-face for their website designs yet. And even those who are need a backup for older browsers (or in case their font service is down or unavailable). This chart shows all the most popular typefaces by operating system, and even includes the most commonly used fonts from Google Font Directory and FontSpring.

34 Typographic Sins
There are dozens of mistakes commonly made in typographic layouts. This poster details thirty-four of them, as well as what the correct usage is.

Color

Color science and theory is a remarkably complex field. The graphics included below, though, can offer valuable insight into the world of color, including how to effectively create color palettes and what colors mean.

Basic Color Relationships
This infographic gives all the basic information you need to know about color theory. It includes terms, the way RGB and CMYK work, and meanings of different colors, as well as a color wheel the illustrates warm and cool colors.

What Colors Mean to Different Cultures
When designing for an international audience, it’s important to note the effect your color scheme will convey to your audience. This handy chart shows exactly what different colors mean in different countries, helping to prevent any cultural faux pas.

How Color Effects Purchasing Decisions
If you’re designing an ecommerce site, it’s important to know exactly how different colors affect purchasing decisions made by your visitors. This chart shows the effects different colors have on those purchasing decisions, as well as which colors work bets for which types of buyers.

Colors of the Most Powerful Brands in the World
Certain colors have become associated with certain brands, both in the “real world” and online. This series of graphics explores the colors used in the various design schemes and logos of the biggest brands in the world. Each of these graphics explores a different aspect of the use of color in branding.

Colors of Twitter Profiles
This infographic compares the use of colors by geography, keyword, and demographic of Twitter users who have used the Colourlovers Themeleon Twitter profile designer. It also showcases the most colorful Twitter personalities, and the colors they use.

What Your Web Design Says About You
This infographic showcases the most popular color, typography, and other design options in web design are most popular, and what the different choices say about the site itself. The graph also delves into color science and theory, with interesting graphics representing each hue.

Top Voted Colors of 2010
Staying current on trends in color is important for designing a site that looks current (or stays timeless). This infographics shows the results of a survey of over 1000 people chose the most popular colors of 2010 and the words that the colors represent.

His and Hers Color Names
A useful, interactive infographic that displays the results of XKCD’s color survey, which used five million plus samples to judge what men and women consider accurate names for all the colors of the spectrum. Some are downright hilarious, while others are incredibly creative. In either case, it gives a good indication of how the sexes feel about different colors across the spectrum.

The Color Strata
Here’s another visualization of the XKCD Color Survey dataset, broken down into the 200 most common color names. The format used here is really interesting, and not something commonly seen.

Recognizing Brands by Color Scheme
An interesting study that seeks to simplify brand logos by breaking it down into it’s basic color and circles to represent text and lines. A useful way to see where the color scheme of a logo works it’s magic, which can help you design color schemes with more impact.

Useful Infographics

Why Does Gen Y Buy
This infographic is useful to anyone creating an ecommerce site that’s aimed at Generation Y, who spend about $20 billion online each year.

Interesting Facts and History of CSS
This infographic combines the history of CSS with a number of interesting facts about it. It includes the different versions of CSS, as well as support by different browsers.

WTF is HTML5 and Why We Should All Care
This is a brilliant infographic that shows what new features HTML5 has added, and what those features mean for the future of the internet.

User Centered Design
This infographic breaks down the elements of user-centered design, as well as the process of creating such designs.

HTML5 & CSS3 Readiness
This interactive infographic breaks down exactly which browsers support which new features of HTML5 and CSS3.

The Visual FAQ of SEO
This infographic gives a great breakdown of what you need to know about search engine optimization. It covers things like site architecture and structure, link building, and SEO tactics.

The State of Web Development 2010
Here’s a great rundown of the state of web development in 2010, including the popular browsers (desktop and mobile), OSs, and more.

Bounce Rate Demystified
This infographic from KISSmetrics showcases how bounce rate statistics work, and how they’re calculated.

The Anatomy of a WordPress Theme
This is an incredibly useful infographic that breaks down the parts of a WordPress theme in great detail. If you’re a theme developer (or want to be), it can also serve as an excellent quick-reference guide.

The Anatomy of a Perfect Landing Page
The creation of a great landing page is equal parts art and science. This infographic breaks down exactly what goes into a great landing page.

Interesting Infographics

Salaries in the Realm of Design
This infographic compares the salaries of different design professions in the United States, India, and the UK. It also covers salaries by country depending on the type of employer (Company, College, Non-Profit, etc.).

Through the Generations: How the Web is Being Used
This infographic breaks down common internet usage patterns among different generations, including Millenials, Gen X, GI Generation, Silent Generation, and the Boomers.

The Awesome Evolution of the Internet
This is a fun infographic that breaks down the evolution of internet users from the beginning of the web.

The History and Present State of Domain Names
Ever wondered what the evolution of domain names looks like? This infographic breaks it down from the first .net domain name in 1985 through now.

The Evolution of the Blogger
An interesting infographic that shows the evolution of bloggers from those keeping online diaries to company bloggers, vloggers, and others.

The Power of WordPress
This infographic showcases the power of WordPress as both a CMS and a blogging platform. It includes a timeline of WordPress from May 2003 through September 2010, as well as details on the types of sites using WP and daily user activity.

Multiple Identities
This infographic discusses what profiles users utilize to sign up for and use different services across the internet, including Google, Facebook and Twitter.

The Internet in 2020
Here’s a great graphical representation of what the internet is predicted to look like in 2020, based on current data. It covers how many people will likely be online, who those people will be, and more.

Origin of Important Typefaces
This infographic shows a timeline of when important typefaces were developed and by whom.

Just How Massive is Google, Anyway?
Figuring out just how big Google is can be tricky. This infographic sheds some light on the subject.

The History of Programming Languages
This infographic from O’Reilly shows the history of various programming languages, from 1954 until 2004.

Dribble: What Is It Used For?
An interactive HTML5 infographic that offers details about Dribble usage and users.

The World of Data We’re Creating on the Internet
This infographic from Good Magazine shows how we use the internet and the data people create on a daily basis, including email, video, and other content.

The Brads – Learning About Contrast in Design
Contrast is a very important concept designers need to grasp if they want to be successful. This infographic/comic strip from Vectortuts+ explains contrast in an easy-to-understand way.

(ik)

User interface design grows and evolves on a continual basis. To stay current, you need to keep an eye on trends, new resources, and new techniques being implemented and talked about. And you also need to try things out on your own, and come up with original ideas and implementations.

The tools listed below can help you do all of those things. Feel free to share any more resources you’ve found useful in the comment section below.

Pattern References and Libraries

Looking at the solutions others have already come up with for common UI challenges can not only help you find the right existing solution, but can also serve as the basis for coming up with something new and original.
User Interface Design Patterns
An online catalog of articles and visual solutions to common UI design problems. The use very loose categories, and also let you sort by tag or color:

Pattern Tap
A great resource to find commonly used design pattern inspiration. Pattern Tap breaks down UI elements into collections, and also tags individual entries for additional browsing options:

Patternry
Patternry puts the emphasis on finding solutions to common UI problems, rather than just providing simple inspiration:

Mephobox
Another great resource to find commonly used design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements:

Prototyping, Mockup, and Design Feedback Tools

Any time you’re creating new UI techniques, you’ll want to create a prototype or mockup as a proof-of-concept before committing to a production site. And of course, you’ll need to test these new ideas, too.

Lumzy
Lumzy is a handy little online UI interface mockup and prototyping tool. It lets you create working functional prototypes, rather than just wireframes:

Mockingbird
Another interface mockup and prototyping tool, this time with online collaboration tools for working with teams:

UI Design Framework for Illustrator
A set of user interface elements and styles for Adobe Illustrator:

Android Asset Studio
A set of UI elements for developing Android applications:

Unique Mobile UI Design Elements
A free set of UI design elements:

Android UI Elements Set
A free set of classic Android OS UI elements:

OSX Leopard GUI Set
GUI Elements for OSX Leopard:

ALL In One Web Elements Kit
Everything you need for your web layout in layered PSD files:

iPad GUI Set
Everything you need for your iPad app layout in layered, vector PSD files:

The Pencil Project
A GUI prototyping tool plugin for Firefox:

Concept Feedback
Post your designs and concepts and get free feedback from the design community:

Landing Page Optimization
Get feedback from real people on your landing page’s 5-second impression:

Frameworks

Frameworks have become the backbone to virtually any complex UI. Here are a handful of frameworks other than MooTools and jQuery that you might not be familiar with.

DHTMLX
A JavaScript UI library and jQuery alternative that provides a number of UI widgets:

Dojo
Another JavaScript toolkit with a powerful set of base APIs as well as rich UI widgets:

Echo 3
A user interface toolkit that not only allows developers to create component-driven and event-driven API, but also client-side Javascript apps as well:

Midori
A super-lightweight JavaScript framework that packages up many commonly-used UI techniques. Uncompressed, Midori is only 51K, even with indented code:

Scripty 2
Another framework that with it’s newest release supports CSS transitions and transforms for Webkit browsers:

ZK
ZK includes over 200 ajax components, all ready to go:

jQTouch
A jQuery plugin for mobile iPhone application development:

Code Snippets and Scripts

Why reinvent the wheel? If there’s an existing snippet out there that does just what you need, you can likely find it on one of the sites below.

jQuery Labs
An enormous library of pre-made jQuery components for your website:

Snippet Library
A library of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages:

The Javascript Source
A handy guide of commonly used javascript and ajax snippets:

roScripts (beta)
Scripts, Snippets and Resources that can be voted on by users:

Snipplr
A good resource with lots of newer scripts and jQuery techniques:

Code Sucks
Javascript snippets with extremely detailed write ups about how they work:

HTML Goodies
Another jquery resource with excellent step-by-step documentation:

WebResources Depot
Included in their large directory of design resources is a number of very useful scripts and snippets:

Ajax Rain
Excellent library of snippets in a categorized and tagged format to make it very easy to find what you’re looking for:

Open Source Scripts
Providing Javascript snippets and code since 2004:

Mini Ajax
A collection of extremely elegant snippets:

Webappers
Lots of jquery components including a very good collection of image editing snippets:

Javascript Kit
One of the original javascript snippet libraries on the Internet:

Webcodr.com
A few very useful snippets for your website:

HTML Assets
A small collection of basic javascript snippets:

Miscellaneous Resources

Here are a handful of UI resources that didn’t quite fit in any of the categories above, but that we still felt were worth mentioning.

Slidenote
A simple little jQuery plugin that lets you create sliding notifications:

Editable Grid
With only a few simple lines of code, turn HTML tables into components that can be manipulated with advanced options:

Placehold.it
A service for easily generating placeholder images for your mockups:

Fillerati
A unique alternative to Lorem Ipsum. Generate blocks of real text for your mockup. Select to receive your text from a variety of public domain works:

qTip2
A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site:

(ik)

Who doesn’t like a good movie? Virtually every movie made has a film website these days, ranging from little more than an online place to park a trailer to a fully-immersive experience. And with the varied content, themes, and visual style of movies out there, it’s no wonder that film websites are just as varied.

Below are more than forty excellent examples of film websites, broken down by style, content, and features. We’ve also included some dos and don’ts for this type of site. If you have other favorite film websites, please share them in the comments below!

Sites Not Using Flash

At the moment, virtually all movie and film websites are using at least some Flash — either for video content or their entire UI. The lone exception we found is below. Of course, expect to see more non-Flash movie websites as HTML5 becomes more widely adopted, especially considering the lack of Flash support on iOS.

Red Hill
The Red Hill site uses no animation on the homepage, and the trailer page uses QuickTime rather than Flash:

Trailer-Only Sites

This is a particularly popular site style for upcoming films that don’t have much content yet. It’s not often seen on film sites once the film has been released.

True Grit
The True Grit website at first resembles a vintage, old-west poster. Click anywhere on the page, though, and a video window showing the two trailers pops up. It’s simple, but effective:

Rango
The Rango site is simple, with an animated background and what looks like a rustic, home-made movie screen, with the trailer video playing on top of it. It’s simple, but gives a good sense of the feel of the movie. If you close out of the trailer, there is some other interactive content, but it currently doesn’t do anything other than some animations and sound effects:

Gnomeo & Juliet
The Gnomeo & Juliet site starts with a brief Flash intro, and then the focus is squarely on the trailer. The only other content on the page is an option to share or like the page on Facebook:

Super 8
Leave it to J.J. Abrams to create a site that has minimal content (just a trailer and some sharing options) and yet can generate such interest for an upcoming film. It’s proof that film websites don’t need to be complicated to be effective:

Immersive Sites

Complete immersion in the world of the film is the ultimate goal of most of these sites. Some include interactive content taken right from the film itself, while others go so far as to link to sites that appear to belong to companies featured in the film itself.

Devil
The website for M.Night Shyamalan’s Devil is captivating. It puts you into the action of the movie in a way that’s engrossing and encourages you to spend more time on the site:

Skyline
The website for Skyline is visually beautiful and includes an interactive feature that lets visitors upload an image of themselves to see what they’d look like under alien control:

Accidents Happen
Having scenes from the film play in the background on the Accidents Happen site is something that isn’t often seen and really makes the site stand out:

Gamer
The Gamer website evokes the feel of the movie perfectly, and offers visitors the chance to control a slayer. The navigation takes a bit of getting used to, since the screen moves around dependent on your mouse movements:

Coraline
The Coraline site is wonderfully dark and has a great 3D effect. The look and feel of the site really evoke the movie:

Surrogates
Websites that really evoke the themes or elements of a film are way more engaging than their counterparts that only offer a trailer and some stills. The Surrogates website includes a link to Virtual Self Industries, giving the story a touch of added realism:

Iron Man 2
The Iron Man 2 website immerses visitors in the world of the film via graphics and interactivity that are reminiscent of elements within the movie:

Star Trek
The Star Trek site uses a 3D walk-through of the ship for navigation, with fantastic transparent elements and a style that’s reminiscent of the computer consoles in the film:

Daybreakers
The Daybreakers website plays clips from the movie in the background, immersing visitors in the look and feel of the film:

The Spiderwick Chronicles
Offering content straight out of the movie is a fantastic way to engage visitors, especially young ones. The Spiderwick Chronicles site lets visitors look at the Field Guide featured in the movie, which is a great way to draw users in, as is the “Create Your Own Field Guide” feature:

District 9
The District 9 website plays on the themes of the movie by looking like a map of the city, with the restricted area highlighted:

Sites With Extra Content

Extra content, like games, downloads, or music, are a great way to keep visitors coming back to your site. These sites all include bonus content, from interactive desktop downloads to interactive games.

Legend of the Guardians
The Legend of the Guardians website is perfectly suited to the target audience. The inclusion of an interactive game on the site increases the likelihood that visitors will spend more time on the site, and that they’ll come back in the future:

Alice in Wonderland
The website for Tim Burton’s version of Alice in Wonderland has a fantastic visual style that fits perfectly with the look of the movie. Plenty of extra features, including a gallery, downloads and music are all included:

Avatar
Avatar’s website is almost as spectacular, visually, as the film itself was. There’s tons of extra content here, including and Pandora Desktop app, immersive video, an app to turn yourself into an Avatar, and more. The layout of the site is simple, with a scrolling horizontal nav bar along the bottom and a slideshow of images from the movie in the background:

Cloudy with a Chance of Meatballs
The website for Cloudy with a Chance of Meatballs is fun and cheerful, just like the movie. It’s clearly aimed at kids, and includes games, downloads, music, and more:

Lemony Snicket’s A Series of Unfortunate Events
The Lemony Snicket site has fantastic, fully-animated navigation. Bonus content, including games and downloads, is also offered:

Leap Year
The Leap Year website offers interactive content (a quiz), which is not often seen in this genre of film. The design of the site is simple, with emphasis on the film’s stars:

Sweeney Todd
The Sweeney Todd official site has a fantastic black and red color scheme and gritty look that evokes the feel of the film. The “Cut Your Own Trailer” feature is a great way to get fans involved:

Celebrity-Focused

If your film has big-name stars, it only makes sense to feature them prominently on your film’s website. That’s just the strategy these designers have taken.

Public Enemies
Putting your big-name stars front-and-center is a great way for a movie website to generate more interest, as the Public Enemies site does with Johnny Depp:

Inglourious Basterds
Inglourious Basterds is another site that puts their biggest star front-and-center, this time Brad Pitt. The subtle animations on the site are also a great touch:

Tropic Thunder
The Tropic Thunder site uses the characters as part of the navigation, and uses interactive content (like the Weapons Check game) to engage visitors with the site:

Prominent Award Placement

Winning or being nominated for a big award lends credibility to your film, so it makes sense to feature that information prominently on the film’s website. This is seen most often with Oscar winners and nominees.

Pan’s Labyrinth
Showcasing awards and distinctions prominently on the homepage is an excellent strategy for an independent movie site:

The Hurt Locker
The Hurt Locker is another site where awards are given prominence on the homepage. This is especially popular on sites that have won major awards, such as the Academy Award for Best Picture:

Mongol
The Mongol site is another that showcases award nominations on the homepage, alongside positive reviews. The rest of the site is very simple, with downloads, video content, and e-cards:

Other Film Sites

Some sites take a different approach entirely. Maybe they go a bit more minimalist, or fit more into what most would consider a “traditional” film website. But they all do an excellent job of representing the films they promote.

Four Lions
The Four Lions site is simple, with a crow animation and links to watch the trailers, find out more about the film (including where to watch it and reviews) and options to share it on Facebook or sign up for updates. Everything is displayed on the homepage, with sliders to show new content:

Sanctum
The site for Sanctum is fairly minimal, with a Flash interface and three pages: “Story”, “Video”, and “Gallery”. The UI is slick and works seamlessly, offering a great user experience. The only thing out of place here is the social media links in the upper left, which don’t really fit in with the aesthetics of the rest of the site:

Charlie and the Chocolate Factory
A movie website should always evoke the feel of the movie itself, and the site for Charlie and the Chocolate Factory does just that, with a whimsical design and color scheme:

Paper Man
The Paper Man website is very simple, with a comic-book look that fits with the feel and theme of the movie. They put the trailer link and reviews prominently on the home page:

My Girlfriend’s Boyfriend
Here’s a simple site that includes all the relevant information a film site needs. There’s a section for where the film is playing, you can watch the trailer, follow the stars on Twitter, and view information about the film on IMDB:

Beowulf
The Beowulf site is a bit different in that it uses horizontal scrolling rather than new pages or vertical scrolling:

The X-Files: I Want to Believe
The X-Files: I Want to Believe website is simpler than many film sites, with an animated background and links to the trailer and videos, downloads, and synopsis, and other content. Visually, it’s a very minimalist site, with clean typography and navigation:

Inkheart
The Inkheart website includes information about the movie, video content, a still gallery, downloads and more, all in a visual style that evokes the style of the film:

Robin Hood
The Robin Hood website is another that uses horizontal scrolling, with images from the movie serving as the background for different sections of the site:

Lord of the Rings
Sites for movie trilogies or series pose additional design problems, as it’s important not to give away plot points from the later movies in the imagery, while still representing all the films in the series. The Lord of the Rings site does this beautifully. They also include extras like an interactive desktop download and information about related video games:

Astro Boy
The Astro Boy website starts out with an animated intro and short trailer before the rest of the site’s content loads. There’s plenty of content, though, including downloads, photos and links to merchandise:

Cloverfield
The Cloverfield website puts the focus primarily on the trailer, though they do offer a widget you can put on your own site and links to purchase the DVD. The visual style meshes perfectly with the film:

Film Website Best Practices

Here are some guidelines to keep in mind when developing your own film websites. Feel free to offer more in the comments!

• Do evoke the style and feel of the film being marketed.
• Don’t forget to give visitors the option to turn the sound off on your site. Film sites are one of the few places you can get away with autoplaying sound, but it’s still important to give users control.
• Don’t resize browser windows or automatically go into full-screen mode when visitors land on your site. Remember, your site might not be their primary focus at that time, and if you force it on them, they might just walk away.
• Do provide extra content from the film to engage visitors. This is especially important for children’s films.
• Do feature any big-name stars prominently on the site.
• Don’t be afraid to try new or experimental UI ideas if they work well for the film. But make sure they’re relevant to the film and will add to the user experience.

(ik)

Infographics are a great way to present information in a way that’s easy for most people to understand. A lot of people learn visually, and can get a better grasp on what you’re trying to say if you display it graphically.

As designers, infographics can present information to us that benefits our design businesses, and gives us more insight into the technologies we depend on for our livelihoods. Below are fifty infographics that are useful and/or interesting, and pertain directly to the world of web design.

Interesting Infographics

These infographics might not provide information that’s directly related to the business and practice of website design, but they still pertain to the web in general and are likely to be of interest to designers and developers:

The Darwinian Evolution of Photoshop — This infographic shows the evolution of Photoshop, including all twelve major releases and the differences between them.

The Journey of a Tweet — This infographic shows the potential journey of a photo posted to Twitter across social media and the rest of the web.

The Biggest Shift Since the Industrial Revolution — This infographic shows the shift in content and relationships as they move to social media.

Are We Addicted to the Internet? — Here’s an extensive infographic talking about the level of Internet usage in the U.S. and potential signs and levels of addiction.

Marketing With the Masses: The Science of Word of Mouth — This infographic breaks down the effects of word of mouth marketing, as well as how it works and where it happens.

Going Local — This infographic, created for GigaOM by Column Five Media, shows the market share and other information for six of the most popular location-based web services (Gowalla, Foursquare, MyTown, Where.com, Brightkite, and Geodelic).

All You Need to Know About Web Designers — Here’s an interesting graphic that breaks down the demographics of web designers worldwide.

Why Brands Cannot Ignore Social Media Mavens — This informal infographic showcases why social media mavens are vital to a brand’s online marketing success.

B2B Social Media Marketing — Here’s an infographic that illustrates statistics about business to business social media marketing, including future predictions and effectiveness of different channels.

Everbody’s Doing It: How Marketers Are Utilizing Social Media in 2010 — This infographic offers an overview of how companies are using social media to market themselves and their products, as well as their attitudes toward social media.

Anatomy of a Search Marketer — This infographic from SEOmoz illustrates the answers to their 2010 SEO Industry Survey.

DIY Guide to Successful Linkbait Infographic — Infographics can be used to provide instruction as well as just presenting facts. This example does a great job of providing step-by-step instructions for creating popular web content.

Why Do We Follow Companies on Twitter? — This simple infographic breaks down results of a survey of 1500 consumers about what their motivations are for following brands on Twitter.

The Business Behind Facebook — Ever wondered how Facebook makes their money and what their business model is based on? This infographic explains it all in general terms and actual dollar figures.

Understanding Google PageRank — This infographic shows exactly how the Google PageRank system works, including how different types of incoming links affect your rank differently.

A Guide to Internet Memes — Here’s an infographic that shows a variety of popular memes, starting with The Dancing Baby and including Rickrolling and The Hamster Dance, with history for each meme.

The Most Popular Design Blogs by Twitter Followers and Facebook Fans — Here’s a great infographic that shows the most popular design-related blogs out there, displayed based on their Twitter followers and Facebook fans.

History of the Internet — Here’s an interesting infographic that shows some of the major milestones in the history of the Internet, starting in 1962.

Famous Rivalries: Facebook vs. Everyone — This infographic shows the history of Facebook’s rivalries with other online services.

How Android is Taking Over — This infographic from GigaOm showcases how Android smartphones are gaining market share and are likely to continue doing so by comparing all of the major smartphone OSs.

Google vs. Apple — This GigaOm infographic shows the rivalry between Google and Apple, in timeline form.

The App Store Economy — Here’s an infographic from early 2010 that shows the economy built around Apple’s App Store, by the numbers.

2010 Cloud Computing State of the Union — This infographic showcases what’s happening in the world of cloud computing and virtualization, based on a survey done by Zenoss.

The Social Buying Universe — Here’s an infographic that showcases the world of social buying, including services like Groupon and Living Social, and their influence.

The Rise of the Cloud — This infographic from GigaOm illustrates the demand for web-based software and storage, as well as public sentiment toward those services.

How to Get Rid of Villains in Social Media — This infographic, based on Todd Heim’s post “8 Villains of Social Media“, shows how to defeat the villains present in social media, including skeptics, trolls, and shameless link droppers.

Meet iPad’s Competition — This infographic shows what the iPad’s main competition is in the world of computing, gaming, and e-readers.

Social Marketing Compass — This infographic shows the different aspects of social media marketing, and which areas different types of users should be focusing on.

The Hierarchy of Digital Distractions — Here’s an infographic similar to Maslow’s Hierarhcy of Needs, but instead illustrates common digital distractions (like Twitter, email, and different kinds of users).

Flickr User Model — Here’s a visual look at the Flickr user model, and what potentially happens to a photo once it’s posted to Flickr.

Facebook Factbook — Here’s a visual look at the first six years of Facebook and it’s phenomenal growth.

The Social Media Effect — This infographic shows what can potentially happen to online content once it starts being passed around the various social media channels.

Internet Censorship — This infographic shows the state of Internet censorship around the world as of 2010, including which countries most heavily censor their internet users.

How Google Works — This infographic shows how Google indexes and ranks content on the Internet, in flow-chart format.

The CMO’s Guide to the Social Landscape — This infographic shows what different social media services are good for different kinds of content marketing (customer communication, brand exposure, driving traffic to your site, and SEO).

What Are People Really Buying Online — This pie-chart style infographic shows what people really purchase online, and compares it to what they buy in-store.

Who Participates and What People Are Doing Online — This chart shows the different kinds of internet users and what they actually do online.

Casting a Wider Net with Social Media — This simple infographic illustrates how publishing to and sharing content from social media sites can increase your site’s traffic.

Building a Company with Social Media — This infographic shows how social media can be used by each department in a company to build that company.

The Blogosphere We Call Home — This infographic breaks down the blogosphere in terms of who’s blogging, what they’re blogging about, and how much time they’re spending doing it.

U.S. Data Consumption in One Day — This is an amazing infographic that shows how much data is consumed by people in the U.S. in a single day.

Five Years in History of Online Video — This infographic shows the prevalence of online video and how it changed between 2004 and 2009.

Profile of a Twitter User — This infographic shows the most common kinds of Twitter users and what to do with them.

How Much Time is Wasted on Loading Unnecessary Data? — Since broadband Internet access is pretty much the norm these days, a lot of designers have stopped paying so much attention to file sizes and load times. This infographic shows just how much time and bandwidth is wasted by all the unnecessary data that loads on a website.

Useful Infographics

These infographics include information that’s directly useful to website design:

How Do Colors Affect Purchases? — by KISSmetrics, shows us what impact colors have on the buying decisions of online shoppers. An invaluable resource for ecommerce designers.

8 Levels of Information Technology Security — This infographic shows potential threats to IT security in a data center, as well as the typical methods used to combat them.

Global Downloads Speed Comparison — This infographic compares the various typical download speeds from all over the world.

How Popular is the iPhone Anyway — This infographic shows the popularity of the iPhone in terms of sales, market share, number of apps downloaded, and more.

Operation E-Commerce: A Game of Dissecting the Best E-Commerce Software — This infographic illustrates the necessary features of great e-commerce software, all built around the classic Operation board game.

Colours in Cultures — Here’s a handy infographic that shows what the meanings of different colors are in different cultures, including Western/American, Japanese, Hindu, Native American, Chinese, Eastern European, Muslim, and others.

(ik)

Virtually every creative out there turns to designs and images created by others to get inspired now and then. Whether you use web design galleries or other sources of visual inspiration, you’ve probably had times when you’ve felt like you’re spending too much time looking for inspiration and not enough time actually using that inspiration.

This is why collecting and organizing inspirational images is important for designers. It lets you spend your free time browsing inspirational sites, but makes the images you’ve found easily accessible when you actually need to start designing. Here, we’ve put together a guide to organizing your visual inspiration so that you can access it whenever you need it, without spending hours aimlessly browsing.

Online Bookmarking

There are dozens of great bookmarking sites out there, all of which can be used for organizing your design inspirations. While regular bookmarking sites like Google Bookmarks or Delicious can work, visual bookmarking sites are a better fit if you’re looking to save visual inspiration. One thing to make sure of when signing up for any visual bookmarking site: be sure they have a bookmarklet or browser plugin to make saving images easier. If it’s a hassle to save an image, you’re less likely to do so.

Yay!Everyday
Yay!Everyday is an invite-only bookmarking service, though they’re more about sharing images with others than keeping them to yourself. Unlike similar sites, Yay!Everyday carefully selects members, so you’ll have to send them a link to your work or your site in order to get accepted.

FFFFOUND
FFFFOUND is an invite-only visual bookmarking service, though invites generally aren’t too hard to come by now that the service has grown to reasonable size. And you don’t have to register to view the feeds of others.

VisualizeUs
VisualizeUs doesn’t require an invite, and even has a Firefox extension for saving images. You can sign up with either a Facebook or Twitter account.

Imgfave
Imgfave lets you save your inspiring images, as well as follow other users. You can create and view collections, too. It works with a Twitter or Facebook account. Imgfave is built on Tumblr, so you can also follow it with your Tumblr account.

We Heart It
We Heart It is a popular visual bookmarking site that you can save images to or browse for inspiration. You can also follow other users, as well as favorite images that have been shared by others. The tagging system is only used sporadically, so it’s difficult to do a comprehensive search of the site.

PicoCool
PicoCool is another invite-only service, though you can request an invite right on their website, rather than having to track down an existing member. The PicoCool community is dedicated to uncovering awesome images from around the world that you might not see otherwise.

Zootool
Zootool is a great image bookmarking site with tools to collect and organize your bookmarks, as well as tools for sharing them with others.

Image Spark
Image Spark is a bookmarking tool that offers upload tools for Firefox, Mac, and other web browsers. You can also favorite images that others have uploaded. And you can put together collections for specific inspiration.

Pichaus
Pichaus lets you create private collections of images, that you can keep just to yourself or share with friends. You can also follow other users for inspiration.

Ember
Ember is like an online design scrapbook. You can save screenshots and images, and share them with others. You also have the option to follow other users, or just explore the feeds of others.

Favorites on Gallery Sites

Most art gallery sites (like DeviantArt) allow users to favorite individual images. This is a fine way to save images on a particular site, though if you tend to frequent more than one or two sites, it can get confusing (“Which site was that awesome illustration on again?” is often followed by an hour of searching across five or ten sites for the image you were thinking of).

But if you tend to only visit one or two sites like this, favorites are a quick and easy way to save images for later reference. Of course, unless you also have the option to tag or otherwise organized your favorites, this can get overwhelming very quickly. It’s not the most ideal solution.

Local Folders

Saving images to local folders is another option. There are a few drawbacks to this method: first of all, it can start to take up a huge amount of hard drive space if you save a lot of images. There are also limits to things like tagging and searching.

To overcome these shortfalls, you’ll need to do two things: create a logical hierarchy of folders, and name your images properly. Using a browser plugin like Pixlr Grabber for Firefox or Chrome lets you take screenshots of any page (in whole or part), and save it to a directory of your choosing. It can also be helpful to add a description to images in their meta information.

Cleaning out your inspiration folders on a regular basis is also a good idea. When you’ve completed a project, delete the images you’d saved specifically to inspire that project. And periodically clean out your general inspiration files, as your style changes or as you start saving too many similar items.

Local Apps

Organizing your image files with an application like iPhoto can also be a good idea, as it makes browsing your images easier. You can put images into folders and then see thumbnails of all of them at once.

Another option is LittleSnapper, which lets you save screenshots of websites as well as organize and edit the screenshots you’ve captured. Their rating and commenting features are incredibly valuable, and make saving images locally a lot more like a web app. LittleSnapper also provides sharing tools that let you upload to Flickr, export images, upload via FTP and SFTP, or work with Ember, their online sharing service.

Start a Blog

Starting a blog might seem a bit extreme just to keep track of your visual inspiration, but if you think about it, a blog has all the tools you need to effectively manage your bookmarks. It has tagging and search, the popular platforms (Blogger, WordPress, Tumblr, Posterous, etc.) have plenty of tools for saving new posts, and it’s easy to access your inspiration from anywhere or share it with others.

There are a couple of things to consider if you go this route. First of all, it’s unlikely you’ll want to create a dedicated website with its own domain name just to keep track of you bookmarks. So either create a subdomain on your existing website, or sign up for a free blogging service. Tumblr and Posterous are particularly well-suited for use as a visual bookmarks site, but other free blogging platforms work, too.

Decide whether you want your inspiration blog to be private or public. Most blogging platforms will let you password-protect your blog, so that’s an option if you don’t want to share your bookmarks with everyone else. On sites like Tumblr, you might want to consider following other users who have similar aesthetic taste to your own for even more inspiration.

Install a bookmarklet or browser plugin for saving new images to your blog. This makes it quick and simple to save the images you want without having to access your blog’s back-end directly. Make sure you take the time to tag and/or categorize your images for easier searching later.

Why Bother?

I’m sure a lot of people out there wonder what the point of all this organization is. The idea behind organizing your visual inspiration for later reference is that it saves time. When you need inspiration, rather than having to search the web for hours, you can turn to your own personal inspiration files. It’s the visual equivalent to the swipe files that copywriters often use.

By keeping your own visual swipe file, you can have inspiration at your fingertips, any time you need it. If you have a set style that you usually work in, these files can save you from having to wade through tons of images that just don’t fit your aesthetic.

But There is a Downside

One thing that can work against having your own swipe file is that it can result in getting stuck in a rut. If you only ever save the same kinds of images, and then only turn to your own files to get inspired for a project, you may start to notice all of your designs looking a little too similar.

Make sure that you pull from varied sources for your swipe file. Look for images that aren’t necessarily in line with your visual style, but offer inspiration in terms of form or layout. Look for something unusual you can use to expand your design horizons. Explore new sources for finding images to add to your file, and constantly add new and varied content.

(ik)