Link tags: visual

Visual Design Inspiration from Agency Websites–And Other Tangential Observations | Jim Nielsen’s Weblog

Tyring to do make screenshots of agency websites is tricky if the website is empty HTML with everything injected via JavaScript.

Granted, agencies are usually the ones pushing the boundaries. “Pop” and “pizazz” are what sell for many of them (i.e. “look what we can do!”) Many of these sites pushed the boundaries of what you can do in the browser, and that’s cool. I like seeing that kind of stuff.

But if you asked me what agency websites inspired both parts me, I’d point to something like Clearleft or Paravel. To me, they strike a great balance of visual design with the craft of building for an accessible, universal web.

Emma Willard’s Maps of Time

The beautiful 19th century data visualisations of Emma Willard unfold in this immersive piece by Susan Schulten.

Same HTML, Different CSS

Like a little mini CSS Zen Garden, here’s one compenent styled five very different ways.

Crucially, the order of the markup doesn’t consider the appearance—it’s concerned purely with what makes sense semantically. And now with CSS grid, elements can be rearranged regardless of source order.

CSS is powerful and capable of doing amazingly beautiful things. Let’s embrace that and keep the HTML semantical instead of adapting it to the need of the next design change.

The Map of Mathematics | Quanta Magazine

An absolutely gorgeous piece of hypermedia!

Data visualisations and interactive widgets enliven this maze of mathematics. Dig deep—you may just uncover the secret passages that join these concepts together.

Draw all roads in a city at once

A lovely little bit of urban cartography.

Kinopio

I’m finding this tool to be very useful for the kind of chaotic mind-mapping I do when I’m preparing a conference talk.

The Deep Sea

After showing us the size of space, here’s a fascinating intereactive visualisation of the ocean depths.

The New York City Subway Map as You’ve Never Seen It Before - The New York Times

The design history of the New York subway map.

The Size of Space

Celestial objects ordered by size, covering a scale from one astronaut to the observable universe.

Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com

Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!

How using component-based design helps us build faster

A case study from Twitter on the benefits of using a design system:

With component-based design, development becomes an act of composition, rather than constantly reinventing the wheel.

I think that could be boiled down to this:

Component-based design favours composition over invention.

I’m not saying that’s good. I’m not saying that’s bad. I’m also not saying it’s neutral.

Spurious Correlations

Correlation does not imply causation.

Lights at sea

Lighthouses of the world, mapped.

Complexity Explorables

A cornucopia of interactive visualisations. You control the horizontal. You control the vertical. Networks, flocking, emergence, diffusion …it’s all here.

Earth day at Clearleft

Isn’t this just lovely?

Cassie made a visualisation of the power we’re getting from the solar panels we installed on the roof of the Clearleft building.

I highly recommend reading her blog post about the process too. She does such a great job of explaining how she made API calls, created SVGs, and calculated animations.

Atlas of Urban Expansion

Oodles and oodles of data on cities, including gorgeous animations of urban growth over time.

Brendan Dawes - The Art of Cybersecurity

Some lovely data visualisation by Brendan:

The work features three main components — the threats, represented by black obelisk style objects, the system which detects and deals with these threats, represented by an organic mesh like structure, and finally the creativity that is allowed to flow because the threats have been neutralised.

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

• Root elements
• Scripting
• Interactive elements
• Document metadata
• Edits
• Tabular data
• Grouping content
• Embedded content
• Forms
• Sections
• Text-level semantics

Sparkline Sound-Off – Chris Burnell

Chris has made sonic sparklines on his site too, but they’re far more musical than mine. Here’s his explanation of how he did it.

Tinnitus Tracker

Rob has turned his exhaustive spreadsheet of all the concerts he has attended into a beautiful website. Browse around—it’s really quite lovely!

Rob’s also writing about the making of the site over on his blog.