Material of Interfaces

Exploring the strangest canvas

Table of Contents

Complexity
How interface design became so hard.
 

Ways of Seeing
Why do we need to go into all this?
 

Problem of the Page
Why interface design is not graphic design.

🤯
👓
📄

🤯 Complexity

How interface design became so hard

Interface Design
 

Y U so hard?

Emergent Growth

"An emergent behavior or emergent property can appear when a number of simple entities (agents) operate in an environment, forming more complex behaviors as a collective. If emergence happens over disparate size scales, then the reason is usually a causal relation across different scales. In other words, there is often a form of top-down feedback in systems with emergent properties. The processes causing emergent properties may occur in either the observed or observing system, and are commonly identifiable by their patterns of accumulating change, generally called 'growth'."

 

Wikipedia: Emergence

Emergent Growth

"An emergent behavior or emergent property can appear when a number of simple entities (agents) operate in an environment, forming more complex behaviors as a collective. If emergence happens over disparate size scales, then the reason is usually a causal relation across different scales. In other words, there is often a form of top-down feedback in systems with emergent properties. The processes causing emergent properties may occur in either the observed or observing system, and are commonly identifiable by their patterns of accumulating change, generally called 'growth'."

 

Wikipedia: Emergence

Emergent Growth

"An emergent behavior or emergent property can appear when a number of simple entities (agents) operate in an environment, forming more complex behaviors as a collective. If emergence happens over disparate size scales, then the reason is usually a causal relation across different scales. In other words, there is often a form of top-down feedback in systems with emergent properties. The processes causing emergent properties may occur in either the observed or observing system, and are commonly identifiable by their patterns of accumulating change, generally called 'growth'."

 

Wikipedia: Emergence

Emergent Growth

"An emergent behavior or emergent property can appear when a number of simple entities (agents) operate in an environment, forming more complex behaviors as a collective. If emergence happens over disparate size scales, then the reason is usually a causal relation across different scales. In other words, there is often a form of top-down feedback in systems with emergent properties. The processes causing emergent properties may occur in either the observed or observing system, and are commonly identifiable by their patterns of accumulating change, generally called 'growth'."

 

Wikipedia: Emergence

Emergent Growth

"An emergent behavior or emergent property can appear when a number of simple entities (agents) operate in an environment, forming more complex behaviors as a collective. If emergence happens over disparate size scales, then the reason is usually a causal relation across different scales. In other words, there is often a form of top-down feedback in systems with emergent properties. The processes causing emergent properties may occur in either the observed or observing system, and are commonly identifiable by their patterns of accumulating change, generally called 'growth'."

 

Wikipedia: Emergence

A

C

B

A

C

B

D

D

Roundhay Garden Scene (1888)

Credited Crew: 7

Marvel Avengers: Endgame (2019)

Credited Crew: 497

Interfaces

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Is This Design Hell?

"Initially, developers and designers tried to navigate this new reality by creating new rules. But the problem was that the goalposts kept moving. [...] Today’s Web is a wild place. The Web has never been a static platform, no matter how much people might wish it were so. [...] That statement will only grow more true with every passing day. Standards are changing on, in some cases, a daily or weekly basis, new devices are coming online at a furious pace, and browser vendors are going at it tooth and nail to innovate their way to the top of the league tables."

Rob Larsen
The Uncertain Web (2014)

Save Yourself

"The web platform is Write Once,
Cry Everywhere."

Yehuda Katz
W3C and TC-39 Commitee Member

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Or Design Heaven?

"Instead of worrying about the fracture in the Web and wishing that it was something else, accept the Web for the blessing that it is. And it is a blessing. Because the core technology can run, unaltered, on billions of devices in the hands of billions of people, you have immediate access to all of those billions of people and all of those billions of devices. How great is that?"

Rob Larsen
The Uncertain Web (2014)

Content

Writing

Style

Writing   Graphic Design

Fidelity

Writing   Graphic Design   Broadcasting

Reactivity

Writing   Graphic Design   Broadcasting   ?

Asynchrony

Writing   Graphic Design   Broadcasting   ?   ?

Immersion

Writing   Graphic Design   Broadcasting   ?   ?   

👓 Ways of Seeing

What are the implications of how we think about interfaces?

Limits of Human Senses

Christophe Galfard
The Universe in Your Hand (2016)

"When left alone, quantum particles behave as multiple images of themselves (as waves, really), simultaneously moving through all possible paths in space and time. Now, again, why do we not experience this multitude around ourselves? Is it because we are probing things around us all the time? Why do all experiments that involve, say, the position of a particle make the particle suddenly be somewhere rather than everywhere? No one knows."


                     

Limits of Human Senses

Christophe Galfard
The Universe in Your Hand (2016)

"When left alone, quantum particles behave as multiple images of themselves (as waves, really), simultaneously moving through all possible paths in space and time. Now, again, why do we not experience this multitude around ourselves? Is it because we are probing things around us all the time? Why do all experiments that involve, say, the position of a particle make the particle suddenly be somewhere rather than everywhere? No one knows."


                     

Limits of Human Senses

"When left alone, quantum particles behave as multiple images of themselves (as waves, really), simultaneously moving through all possible paths in space and time. Now, again, why do we not experience this multitude around ourselves? Is it because we are probing things around us all the time? Why do all experiments that involve, say, the position of a particle make the particle suddenly be somewhere rather than everywhere? No one knows."


                     

Christophe Galfard
The Universe in Your Hand (2016)

Limits of Human Senses

Christophe Galfard
The Universe in Your Hand (2016)

"When left alone, quantum particles behave as multiple images of themselves (as waves, really), simultaneously moving through all possible paths in space and time. Now, again, why do we not experience this multitude around ourselves? Is it because we are probing things around us all the time? Why do all experiments that involve, say, the position of a particle make the particle suddenly be somewhere rather than everywhere? No one knows."


                     

Limits of Human Senses

Christophe Galfard
The Universe in Your Hand (2016)

"When left alone, quantum particles behave as multiple images of themselves (as waves, really), simultaneously moving through all possible paths in space and time. Now, again, why do we not experience this multitude around ourselves? Is it because we are probing things around us all the time? Why do all experiments that involve, say, the position of a particle make the particle suddenly be somewhere rather than everywhere? No one knows."


                     

The Treachery of Images

"The relation between what we see
and what we know is never settled.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled
.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled.

Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

The Treachery of Images

"The relation between what we see
and what we know is never settled.
Each evening we see the sun set.
We know that the earth is turning away from it.
Yet the knowledge, the explanation,
never quite fits the sight
"


                      John Berger
                      Ways of Seeing (1972)

This is not a Pipe

This is not a Webpage

It is a slide in a presentation of a screenshot of specific state of web page displaying specific user data at a specific point in time to the user himself by means of a desktop computer.

It is a slide in a presentation of a screenshot of specific state of web page displaying specific user data at a specific point in time to the user himself by means of a desktop computer.

It is a slide in a presentation of a screenshot of specific state of web page displaying specific user data at a specific point in time to the user himself by means of a desktop computer.

It is a slide in a presentation of a screenshot of specific state of web page displaying specific user data at a specific point in time to the user himself by means of a desktop computer.

It is a slide in a presentation of a screenshot of specific state of web page displaying specific user data at a specific point in time to the user himself by means of a desktop computer.

Interface Design as a Job

"The old PSD-to-HTML workflow served us well for many years, but isn’t able to stand in the face of all the complexity that responsive web design and the multi-device web have introduced. Internal processes have already begun to change. Likewise, how we craft webpages and what we deliver to our clients must mature."

Dave Rupert
Responsive Deliverables (2013)

Interface Design as a Job

"The old PSD-to-HTML workflow served us well for many years, but isn’t able to stand in the face of all the complexity that responsive web design and the multi-device web have introduced. Internal processes have already begun to change. Likewise, how we craft webpages and what we deliver to our clients must mature."

Dave Rupert
Responsive Deliverables (2013)

Interface Design as a Job

"The old PSD-to-HTML workflow served us well for many years, but isn’t able to stand in the face of all the complexity that responsive web design and the multi-device web have introduced. Internal processes have already begun to change. Likewise, how we craft webpages and what we deliver to our clients must mature."

Dave Rupert
Responsive Deliverables (2013)

Interface Design as a Job

"The old PSD-to-HTML workflow served us well for many years, but isn’t able to stand in the face of all the complexity that responsive web design and the multi-device web have introduced. Internal processes have already begun to change. Likewise, how we craft webpages and what we deliver to our clients must mature."

Dave Rupert
Responsive Deliverables (2013)

Interface Design as a Job

"The old PSD-to-HTML workflow served us well for many years, but isn’t able to stand in the face of all the complexity that responsive web design and the multi-device web have introduced. Internal processes have already begun to change. Likewise, how we craft webpages and what we deliver to our clients must mature."

Dave Rupert
Responsive Deliverables (2013)

The Workspace

"In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come."

Ethan Marcotte
Responsive Web Design (2011)

The Workspace

"In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come."

Ethan Marcotte
Responsive Web Design (2011)

The Workspace

"In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come."

Ethan Marcotte
Responsive Web Design (2011)

The Workspace

"In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come."

Ethan Marcotte
Responsive Web Design (2011)

The Workspace

"In every other creative medium, the artist begins her work by selecting a canvas. A painter chooses a sheet of paper or fabric to work on; a sculptor might select a block of stone from a quarry. Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come."

Ethan Marcotte
Responsive Web Design (2011)

 📄 Problem of the Page

Why interface design is not graphic design

Liminal Spaces

"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. [...] If you ever get the chance to watch early television drama you’ll find a strong example of this. Because radio required a voice-over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could.


                      John Allsop
                      A Dao of Web Design (2000)

Liminal Spaces

"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. [...] If you ever get the chance to watch early television drama you’ll find a strong example of this. Because radio required a voice-over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could.


                      John Allsop
                      A Dao of Web Design (2000)

Liminal Spaces

"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. [...] If you ever get the chance to watch early television drama you’ll find a strong example of this. Because radio required a voice-over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could.


                      John Allsop
                      A Dao of Web Design (2000)

Liminal Spaces

"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. [...] If you ever get the chance to watch early television drama you’ll find a strong example of this. Because radio required a voice-over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could.


                      John Allsop
                      A Dao of Web Design (2000)

Liminal Spaces

"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. [...] If you ever get the chance to watch early television drama you’ll find a strong example of this. Because radio required a voice-over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could.


                      John Allsop
                      A Dao of Web Design (2000)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

Teenagers as Liminal

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] I believe that the old kind of design’s value is not increasing any more—it’s decreasing, because the computational materials are so different than materials of the past. [...] Design is now maturing — expect some awkwardness"

 

John Maeda

How to Speak Machine (2019)

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

We are Here

"The page metaphor has served its purpose helping users familiarize themselves with the web, and provided creators with the necessary transitional language with which to create for a brand new medium. But to build thoughtful interfaces meant to be served to a multitude of connected devices, the time has come for us to evolve beyond the page [...] Right now, our entire industry is drowning in a sea of devices, viewport sizes, and online environments. And things aren’t slowing down anytime soon"


                      Brad Frost
                      Atomic Design (2016) 

Looking to Architecture

"But in recent years, a relatively new design discipline called 'responsive architecture' has been challenging some of the permanence at the heart of the architectural discipline. [...] Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other"

Ethan Marcotte
Responsive Web Design (2011

Looking to Architecture

"But in recent years, a relatively new design discipline called 'responsive architecture' has been challenging some of the permanence at the heart of the architectural discipline. [...] Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other"

Ethan Marcotte
Responsive Web Design (2011)

Looking to Architecture

"But in recent years, a relatively new design discipline called 'responsive architecture' has been challenging some of the permanence at the heart of the architectural discipline. [...] Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other"

Ethan Marcotte
Responsive Web Design (2011)

Looking to Architecture

"But in recent years, a relatively new design discipline called 'responsive architecture' has been challenging some of the permanence at the heart of the architectural discipline. [...] Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other"

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

Responsive Design

"A flexible layout provides us with a foundation for the future: it allows us to step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet. [...] at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible."

Ethan Marcotte
Responsive Web Design (2011)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

When "Killer" is was Cool

"“Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released,” but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

John Allsop
A Dao of Web Design (2000)

You Decide: Heaven/Hell?

"I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology.


                      Frank Chimero
                      The Web's Grain (2015)

You Decide: Heaven/Hell?

"I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology.


                      Frank Chimero
                      The Web's Grain (2015)

You Decide: Heaven/Hell?

"I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology.


                      Frank Chimero
                      The Web's Grain (2015)

You Decide: Heaven/Hell?

"I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology.


                      Frank Chimero
                      The Web's Grain (2015)

Responsive Design

By Schalk Venter

Responsive Design

Exploring the strangest canvas

  • 501