Learn CSS Selectors interactively
This visual approach to demonstrating how CSS selectors work is really handy.
This visual approach to demonstrating how CSS selectors work is really handy.
A terrific piece of well-illustrated data-driven journalism.
A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.
A lovely bit of data celebration from Ravelry on the occasion of their 4 millionth user.
I’ve said it before and I’ll say it again: if you want to see a successful example of a real social networking site, don’t look at Facebook; look at Ravelry.
A beautiful real-time visualisation of winds on our planet.
Data visualisations that make no sense.
On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
A gorgeous interactive visualisation of our local galactic neighbourhood.
A long-zoom data visualisation.
This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.
A cute and fun way to put together a colour palette.
A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.
I know have a visualisation of my public data in the form of 3D-printed snowflake, thanks to Medaler.
Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.
All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.
Jan V. White is a mensch.
A really nice interactive timeline of data from ten years of scrobbling music to Last.fm.
Peter Saville talks about the enduring appeal of his cover for Unknown Pleasures.
I like to think of all the variations and mashups as not just tributes to Joy Division, but tributes to Jocelyn Bell Burnell too.
A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.
Oh, and happy birthday, Daring Fireball.
A nice timeline visualisation of recent history.
Kyle’s Matryoshka phones are as cool as they are cute.
This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.
If you’re adding some noise texture to your backgrounds, this little service might be handy. I usually base-64 encode these kinds of background images: it would be nice to see that added as an option here.
Dan writes about how data saved his life. That is not an exaggeration.
He describes how, after receiving some very bad news from his doctor, he dived into the whole “quantified self” thing with his health data. Looking back on it, he concludes:
If I were still in the startup game, I have a pretty good idea of which industry I’d want to disrupt.
A beautiful and disturbing piece of data visualisation. The numbers are quite astonishing.
Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.
I think Rebecca is on to something here. Everyone has been so quick to self-identify as a UX designer while marginalising visual design as a purely surface-level layer …but it’s all part of the design process.
This is may just be the best thing on the internet about data visualisation and statistics. And sex.
These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
A very useful tip for creating cohesive colour palettes.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!
The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.
A dataviz demo of creepiness: displaying the movements of Malte Spitz by correlating her phone activity and web usage.
I really like this idea: one street in Brighton is openly displaying its electricity usage over time.
A very pretty visualisation of tweets on a map using canvas.
The New York subway schedule converted into sound by treating each line as a string.
Visualising the Republic of Letters.
Some beautiful pieces of data visualisation.
Visualisations of the history of controversial Wikipedia articles.
Paul has created a site for tracking usage of the BBC’s GEL (Global Experience Language) visual design language. Nice’n’responsive it is too.
A visual representation of each track on the new Girl Talk album.
Telling stories with data — the video.
A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.
Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).
Beautiful map visualisations by Aaron Straup-Cope.
Aaron's lovely visualisation of Flickr's shapetiles.
A beautiful piece of musical mathematical poetry.
Beautiful chemistry visualisations using canvas.
Brian documents his beautiful Geonames SVG maps.
A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.
Beautiful mapping visualisations of crime data.
Excellent news: Brian is writing a book.
A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!
A nifty little CSS experiment.
This is a gorgeous-looking website. I have no idea what it's about.
Yes. Yes. YES! "We’ve shaken off the restrictions of the early days, opened up all kinds of technical possibilities, but web design seems less exciting and less experimental than it did fifteen years ago."
The geography of musicians.
Matt gets an opportunity to use the Chernoff effect for visualising school data.
An in-depth study mapping all the permutations in "choose your own adventure" books.
A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.
A blog devoted to data visualisation.
Unbelievable 3D visualisation created by extracting common points from millions of pictures on Flickr of Rome, Venice and Dubrovnik. As Matt Haughey would say, "Holy shitballs!"
Table of Condiments That Periodically Go Bad
Jack Schulze goes into detail on the genesis of the wonderful Here & There map/visualisation.
This is the best location visualisation I have ever seen.
A visualisation of Twitter messages designed for display in public spaces. From the mad genius that is Cameron Adams.
A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.
"I love this graph because in one small space, it shows the time of Sunrise and Sunset across the entire world throughout all Latitudes throughout the entire year of this tilted planet."
A handy tool for putting colour palettes together.
Information Graphics about WWII for WWII magazine and for the book proposal "A Visual Miscellany of World War II".
I can't wait to get my personal annual report from Dopplr! In the meantime, I'll content myself with the very pretty example of Barack Obama's annual report.
A visual real-time simulation that displays the carbon dioxide (co2) emissions, birth rates, and death rates of every country in the world.
Interactive visualizations of what's happening right now.
Collections of visual design patterns from web interfaces.
A collection of network diagrams and visualisations from the simple to the sublime.
A crazy way of viewing news stories courtesy of Brendan Dawes.
The new Radiohead video isn't really a video at all. It's data visualisation. Here you can interact with the data points while the song is playing. I love this.
A tool for generating beautiful visualisations from commits to code repositories.
Wordle puts a new spin on the tired old tag cloud. Here's a cloud of my del.icio.us tags.
A really nice interactive infographic from the New York Times.
Realtime visualisation of feelings on Twitter. I can't help but think that present continuous emotions would have yielded better results; loving, hating, thinking...
Browse trough your twitter friends, and your friends' friends, and your friends' friends' friends...
A recap of an excellent presentation at BarCamp Brighton 2 on data visualisation.
Gorgeous visualisation from Dopplr of all the places visited in 2007.
A series of infographics comparing Chinese and German culture. Amusing and astute.
A lovely visual of contacts of your Twitter contacts, exploring those six degrees.
A really nice visual representation of just how isolated the Imperial system is.
A collection of websites incorporating noteworthy visual design elements.
From the people who brought you Ficlets comes a nice app for creating personal timelines. Microformats and OpenID support included.
Beautiful visualisations of flight data.
A nice well-illustrated article from Larissa Meek pointing to some design trends that can be applied to the Web.
A new project from Idea Codes (Emily Chang and Max Kiesler): a tag cloud for Twitter.
Dave has made some icons — very nice ones.
A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.
Khoi has posted the slides from his grids workshop online. Download and learn.
Dan has redesigned his site and it looks gorgeous.