Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.
See also: Andy P.’s experience of working with Jon this way.
Here, have some colour palettes.
My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).
A nice navigable timeline of historical events from Wikipedia.
What a lovely bit of progressive enhancement—styling data tables to display as charts.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.
This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.
I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.
These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.
Curiosity’s journey so far, nicely visualised.
Beautiful visualisations of science and nature.
Made with love by a designer with a molecular biology degree.
This visual approach to demonstrating how CSS selectors work is really handy.
Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting
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".
Dopplr Blog Â» Blog Archive Â» Dopplr presents the Personal Annual Report 2008: freshly generated for you, and Barack Obamaâ€¦
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...