Adactio: Links

Proposal to CSSWG, Sept 2016 // Speaker Deck

Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.

The Future of Browser History — Free Code Camp

I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.

Chromelens

A handy Chrome extension to simulate different kinds of visual impairment.

The Joy of Sparks

This is so cool! The logs of the Indie Web Camp IRC channel visualised as a series of sparklines in the style of Joy Division/Jocelyn Bell Burnell.

Jon Aizlewood | Visual inventories for agile design

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.

LOL Colors - Curated color palette inspiration

Here, have some colour palettes.

Design without touching the surface – Leapfroglog

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).

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

NTH-TEST | nth-child and nth-of-type Tester

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.

Visual Essentials for Product Design — Cennydd Bowles

This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

28 Months on Mars - NYTimes.com

Curiosity’s journey so far, nicely visualised.

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.

Patatap

Fun!

Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting

A terrific piece of well-illustrated data-driven journalism.

If the Moon Were Only 1 Pixel - A tediously accurate map of the solar system

A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.

4 Million Ravelers

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.

Earth wind map

A beautiful real-time visualisation of winds on our planet.

WTF Visualizations

Data visualisations that make no sense.

The perils at Great Falls - Washington Post

On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

100,000 Stars

A gorgeous interactive visualisation of our local galactic neighbourhood.

Here is today

A long-zoom data visualisation.

Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004

This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.

Swatch you doing?

A cute and fun way to put together a colour palette.

Flickr, codeswarming

A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.

Medaler.com

I know have a visualisation of my public data in the form of 3D-printed snowflake, thanks to Medaler.

Jan V. White

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.

10 Years of Scrobbling Timeline – Last.fm

A really nice interactive timeline of data from ten years of scrobbling music to Last.fm.

Data Visualization Reinterpreted by VISUALIZED on Vimeo

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.

Distant Shape: 10 Years of Daring Fireball

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.

The Evolution of the Web

A nice timeline visualisation of recent history.

KyleBean.co.uk - Portfolio: Mobile Evolution

Kyle’s Matryoshka phones are as cool as they are cute.

Sound of Summer

This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.

NoisePNG - Generate noisy PNG-images with alpha-transparency

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.

Myself, quantified | Extenuating Circumstances

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 Time-Lapse Map of Every Nuclear Explosion Since 1945 - by Isao Hashimoto - YouTube

A beautiful and disturbing piece of data visualisation. The numbers are quite astonishing.

A List Apart: Articles: Style Tiles and How They Work

Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.

Rebecca Cottrell » Where visual design fits in a design process

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.

10 Charts About Sex « OkTrends

This is may just be the best thing on the internet about data visualisation and statistics. And sex.

See something or say something - a set on Flickr

These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.

European detail map of Flickr and Twitter locations

Layer Styles

A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.

Dribbble - My Secret for Color Schemes by Erica Schoonmaker

A very useful tip for creating cohesive colour palettes.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

Samantha Warren’s Web Design Blog | Design ~ Web Typography ~ Inspiration

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.

Tell-all telephone | Data Protection | Digital | ZEIT ONLINE

A dataviz demo of creepiness: displaying the movements of Malte Spitz by correlating her phone activity and web usage.

Tidy Street electricity usage | Flickr - Photo Sharing!

I really like this idea: one street in Brighton is openly displaying its electricity usage over time.

a world of tweets

A very pretty visualisation of tweets on a map using canvas.

MTA.ME

The New York subway schedule converted into sound by treating each line as a string.

YouTube - Tracking 18th-century “social network” through letters

Visualising the Republic of Letters.

Victorian Infographics - a set on Flickr

Some beautiful pieces of data visualisation.

Geological Map of the State of Pennsylvania 1858 (detail)

Notabilia – Visualizing Deletion Discussions on Wikipedia

Visualisations of the history of controversial Wikipedia articles.

GELLED!

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.

Mashup Breakdown - Girl Talk

A visual representation of each track on the new Girl Talk album.

Journalism in the Age of Data: A Video Report on Data Visualization by Geoff McGhee

Telling stories with data — the video.

Did you have a nice day? - Made by Rattle

A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.

Periodic Table of the Elements - Josh Duck

Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).

Polymaps

A JavaScript/SVG library for displaying maps in a variety of interesting ways.

prettymaps

Beautiful map visualisations by Aaron Straup-Cope.

flickr shapetiles / july 2010

Aaron's lovely visualisation of Flickr's shapetiles.

aM laboratory

A beautiful piece of musical mathematical poetry.

CanvasMol

Beautiful chemistry visualisations using canvas.

Geonames Maps « optional.is/required

Brian documents his beautiful Geonames SVG maps.

Understanding Graphics — Design For The Human Mind

A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.

If San Francisco Crime was Elevation | Doug McCune

Beautiful mapping visualisations of crime data.

A Practical Guide to Designing with Data

Excellent news: Brian is writing a book.

The Case For An Older Woman « OkTrends

A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!

Román Cortés » Pure CSS Coke Can

A nifty little CSS experiment.

MikeMake

Beatles infographics.

Digital Podge 2009 - Measurable Fun | 17th December 2009

This is a gorgeous-looking website. I have no idea what it's about.

Is modern web design too like print design? (Phil Gyford’s website)

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 Landscape of Music

The geography of musicians.

Humanising data: introducing “Chernoff Schools” for Ashdown – Blog – BERG

Matt gets an opportunity to use the Chernoff effect for visualising school data.

cyoa

An in-depth study mapping all the permutations in "choose your own adventure" books.

Venn Diagrams as UI Tools « optional.is/required

A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.

Information Is Beautiful | Ideas, issues, concepts, subjects - visualized!

A blog devoted to data visualisation.

Building Rome in a Day

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

Table of Condiments That Periodically Go Bad

Pulse Laser: Here & There influences

Jack Schulze goes into detail on the genesis of the wonderful Here & There map/visualisation.

http://schulzeandwebb.com/hat/

This is the best location visualisation I have ever seen.

Visible Tweets – Twitter Visualisations. Now with added prettiness!

A visualisation of Twitter messages designed for display in public spaces. From the mad genius that is Cameron Adams.

Wikirank

A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.

Part 1/5, My Favorite Graph: at the Equator

"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."

[ws] Color Scheme Designer

A handy tool for putting colour palettes together.

maxgadney.com

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.