Articles
We spend hours designing for a medium that’s interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then it’s time to make development part of the creative process.
A Dao of Web Design by John Allsopp, 2000
Calling for a change in how we design websites; inspired the responsive design revolution!
"What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and its child, the web."
"When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, “ritual,” and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’t make sense."
—
Responsive Web Design by Ethan Marcotte, 2010
The article that really kicked off the practice of responsive design among web designers. Fluid grids, flexible images, and media queries, to fit every platform.
—
No to No UI by Timo Arnall
About the downside of invisible interfaces; how invisible design propagates the myth of immateriality. A case "against seamlessness".
"Intentionally hiding the phenomena and materiality of interfaces, smoothing over the natural edges, seams and transitions that constitute all technical systems, entails a loss of understanding and agency for both designers and users of computing."
"To declare interfaces 'invisible' is to deny them a cultural form or medium."
—
A Look at Flat Design and Why It's Significant by Luke Clum, 2013
Flat design is not just for looks, it is a move away from skeumorphism, embracing the limitations of digital technology rather than trying to disguise them. Skeumorphism had some serious functionality issues.
—
Design Last by Rik Schennik, 2015
Content-First Design by Steph Hay, 2015
On the content-first approach for responsive web design. Last one uses examples from games.
—
Designing With Code by Jeremy Bell, 2012
Make development part of the design process! By a guy who went from being a developer to becoming a designer. "There was never an option to do both".
"The problem with Photoshop is that what's being created is acually a fiction." It doesn't translate accurately to code. "We spend hours designing for a medium that's interactive and responsive, but we start by producing mockups that are static and inflexible." Good design is not only about aesthetics but about how it works.
—
Spatial Interfaces by Pasquale D'Silva, 2015
Humans think spatially; imagine multi-dimensional models in our minds, to help understand the complex world around us. Software works as an extension of the human brain, so our interfaces should be spatial; live in the dimensions of space and time. D'Silva explains spatial design and proposes methods for doing so, showing examples where these methods are used well (along with some really bad examples)
"One can encode quite a lot of meaning using movements and space."
—
Atomic Design by Brad Frost, 2013
The forerunner article to his book by the same name. A case for the atomic design approach to websites; "we're not designing pages, we're designing systems of components"; 'design systems'; using chemistry as a metaphor.
—
Programming Sucks by Peter Welch, 2014
All programming teams are constructed by and of crazy people; all code is bad.
"The human brain isn't particularly good at basic logic and now there's a whole career in doing nothing but really, really complex logic. Vast chains of abstract conditions and requirements have to be picked through to discover things like missing commas. Doing this all day leaves you in a state of mild aphasia as you look at people's faces while they're speaking and you don't know they've finished because there's no semicolon. You immerse yourself in a world of total meaninglessness where all that matters is a little series of numbers went into a giant labyrinth of symbols and a different series of numbers or a picture of a kitten came out the other end."
—
Development is Design by Brad Frost, 2013
A case against the view that front-end development is something detached from the design process. HTML/CSS development is design. It is not programming, but it's still code. Include front-end development from the beginning of the process!
"It’s impossible for designers working in static environments to realistically articulate every device, user setting, and variable that effects how a design is realized."
"Front-end developers often exist in a weird purgatory, somewhere between the design world and the ultra-geek programming world. We serve as translators between these two worlds, and I feel it’s our responsibility to bridge this chasm between design and development."
—
Thinking Responsively: A Framework for Future Learning by Paul Robert Lloyd, 2015
About creating a framework, or set of design principles, for the responsive design practice.
Content first, modular components, etc. Mildly interesting.
—
A Richer Canvas by Mark Boulton, 2011
All paper-based design starts with paper. "Paper that has edges, ratios that can be repeated. A canvas. And here’s the thing. Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up."
On content first design and embracing the fluidity of the web.
—
Understanding Progressive Enhancement by Aaron Gustafson, 2008
Before responsive web design and content first there was "progressive enhancement vs graceful degradation".
—
Why physics needs art to help picture the universe by Frank Wilczek, 2015
"Many of the central ideas of modern physics are unfamiliar to most people. They can seem abstract and forbidding if they are introduced abruptly, in the strange contexts that are their natural habitat. That’s why those of us who try to bring those ideas to a broad audience must often work in metaphors and analogies."
Story of how science has collaborated with art, and how art has been inspired by science.
"Physicists often, and rightly, extol the beauty of their concepts and equations. On the other hand, humans are intensely visual creatures. It will be fruitful to use the modern resources of signal processing and computer graphics to translate those beautiful concepts and equations into forms that the visual cortices of physicists can grasp, and that people in general can admire and enjoy. We need, in particular, better ways to put ourselves in sensory contact with spaces of high dimension, such as the ones we meet in quantum theory and when handling big data. Awesome opportunities await modern champions of Brunelleschi’s spirit."
—
3 Powerful Lessons I have learnt as an Information Designer by Angela Morelli, 2015
1 It's all about the process (DIKW diagram etc)
2 Cognition is in the detail (why infographics are great, perception and cognition theories)
3 Beauty will save the world (beauty, joy, engagement, sense of wonder are a crucial part of designing information effectively; Kahnemann's System 1, the emotional/storytelling system)
How information design and data visualisation can help bridge the gap between scientists and their audiences.
—
Fuck Content by Michael Rock, 2009
Form without content is not just an empty shell; there is a misconception that design without deep content is reduced to pure style. "We seem to accept the fact that developing content is more essential than shaping it."
Paul Rand: "There is no such thing as bad content, only bad form."
"Stellar examples of graphic design, design that changes the way we look at the world, are often found in service of the most mundane content: an ad for ink, cigarettes, sparkplugs or machinery."
As a popular film critic once wrote, “A movie is not what it is about, it’s how it is about it.” Likewise, for us, our What is a How. Our content is, perpetually, Design itself.
—
The Role of the Web by Andrew Hinton, 2015
The Web and the intentions behind the development of it, hyperlinking (HTTP), "the most public space in the world"
"If we measure reality by where meaningful human activity takes place, these places are not merely “virtual” anymore. They are now part of our public infrastructure."
—
Not Just Unicorns: A Designer Beastiary by James Reffell, 2013
Just for fun, comparing the variety of new roles of the graphic designer to mythological creatures.
—
The Myth of the Myth of the Unicorn Designer by David Cole, 2013
The myth is holding back our field and deserves to be debunked. "Picking up Python won't make you forget how to kern." A unified process fosters better work. Why are some designers so eager to place limitations on their potential?
Also: Designers Will Code
"the ability to implement your vision is the hallmark of great craftsmanship. It teaches you both the limits and the possibilities of your medium."
"We spend hours designing for a medium that’s interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then it’s time to make development part of the creative process."
The question isn't "should designers code?" but "how can code work in a way that empowers designers?"
—
The Web Aesthetic by Paul Robert Lloyd, 2012
"As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them."
—
A Simpler Page by Craig Mod, 2011
On the design of digital vs physical books; the Bibliotype template for user customisation of long form reading
—
The Web's Grain by Frank Chimero, 2015
Witty essay on the challenges of visually responsive design; the web's grain is dictating how we design websites and that's not a bad thing that we should be fighting; embrace the limitations, treat the web as a material to build with.
"It is control versus discovery, uniformity versus multiplicity."
Bicycle bear website analogy: "it is very impressive that you can teach a bear to ride a bicycle, and it is fascinating and novel. But perhaps it’s cruel? Because that’s not what bears are supposed to do. And look, pal, that bear will never actually be good at riding a bicycle.”
Edgelessness in web design:
– An infinite scrolling canvas
– Blurred lines between disciplines working on a project
Media queries as points of reassembly rather than "breakpoints"
—
What Screens Want by Frank Chimero, 2013
"We need abstractions, otherwise we’d be writing code in machine language or Assembly, there’d be no work designing interfaces, and users wouldn’t understand much unless they took the years to learn everything from the ground up."
"With enough time and exposure, a user can shed the padding and metaphors that become dead weight, like taking the training wheels off a bike."
The debate concerning flat design vs skeumorphism is irrelevant; the screen doesn't care either way. "Web and interaction design are just as much children of filmmaking as they are of graphic design."
Flux, the capacity for change; designing to manage this capacity. "Movement, change, and animation are a lot more than ways to delight users: they are a functional method for design."
"People believe there’s an essence to the computer, that there’s something true and real and a correct way to do things. But—there is no right way. We get to choose how to aim the technology we build. At least for now, because increasingly, technology feels like something that happens to you instead of something you use. We need to figure out how to stop that, for all of our sakes, before we’re locked in, on rails, and headed toward who knows what.
One of the reasons that I’m so fascinated by screens is because their story is our story. First there was darkness, and then there was light. And then we figured out how to make that light dance. Both stories are about transformations, about change. Screens have flux, and so do we."
—
Meet Generation Z by Adam Renfro, 2012
On digital natives and learning; trends and characteristics. A writeup of this list.
—
Continuum by Jeremy Keith, 2014
The web is not a platform. It’s a continuum.
"It is entirely possible—nay, desirable—to use features long before they are supported in every browser. That’s how we move the web forward."