Schalk Venter PRO
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
Cloud Before The Horse
....
Complexity
"For a long time I have been concerned by the apparent informality in which user interfaces are constructed. [...] There is a widespread belief throughout the software industry that user interfaces are easy to develop; a belief that has been strengthened by the proliferation of user interface development tools. Yet despite the obvious power and sophistication of such tools, the user interface part of a system is typically the most problematic. User interface code often contains more bugs and is usually more difficult to test and enhance than other types of code in a system."
Ian Horrocks
Constructing the User Interface with Statecharts (1999)
WTF a Design System
The Vague Answer
A design system is a set of interconnected patterns and shared practices coherently organized. [...] They may contain, but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation.
UX South Africa 2022
Actual footage of a Twitter thread on anything UX related
Roundhay Garden Scene (1888)
Credited Crew: 7
Marvel Avengers: Endgame (2019)
Credited Crew: 497
Roundhay Garden Scene (1888)
Credited Crew: 7
Marvel Avengers: Endgame (2019)
Credited Crew: 497
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
The Cost
Eliyah M. Goldratt
The Goal (1984)
"I want people at those furnaces standing by, ready to load and unload twenty-four hours a day, seven days a week. [...] "But you know you’re talking about two, maybe three people per shift.’’ "Is that all?’’ I ask. "Don’t you remember what lost time on a bottleneck costs us?’’
<TABLE BGCOLOR="#CCCCFF" BORDER="10" ALIGN="CENTER">
<TR>
<TD>
<H1 ALIGN="CENTER">
<FONT SIZE="3" COLOR="red" FACE="arial">
Welcome to the World Wide Web!
</FONT>
</H1>
</TD>
</TR>
</TABLE>The Shape of the Web
"Cyberspace. A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts... A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity."
William Gibson
Neuromancer (1984)
The Pay-off
"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)
UI DESIGNER:
Let me add a basic text input
BASIC TEXT INPUT:
Asking the User
No Conflict
Conflict
What is it Made Of?
Schrodinger's Data
Schrodinger's Data
Flow Chart
Interface Design
Y U so hard?
The Speaker
Who the heck is this guy even?
The Vurnerability
Setting the stage for the discussion
The Stigma
The cost of shame
The Tech Industry
Mental health of those in tech industry
The Discussion
Making space for honest conversation
👤
🐸
👹
🤖
👂
A
C
B
A
C
B
D
D
Save Yourself
"The web platform is Write Once,
Cry Everywhere."
Yehuda Katz
W3C and TC-39 Commitee Member
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.
XMLHttpRequest
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
MVC MVVM
"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
Front-end Gainz
"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
Front-end Gainz
"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
Front-end Gainz
"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture (2011)
Specialization of Labour
"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Specialization of Labour
"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Specialization of Labour
"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Specialization of Labour
"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Specialization of Labour
"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Drawbacks
"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."
Mathias Billman & Phil Hawksworth
Modern Web Development on the Jamstack (2019)
Types of Code
Imperative
Declarative
Douglas Crockford
"The Web is the most hostile software engineering environment imaginable."
The Web
Holy Crap!
- Where should I start?
- How do I advance my career?
- What approach is the best?
- How do I keep up?
- Where should I focus?
- How will I get a job?
🤖
What do we do?
🤖
Bolted-on
The End
Thank you.
The Longer Answer:
Computer Submission
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Computer Submission
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Computer Submission
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Computer Submission
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Computer Submission
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Checkboxes
How does it work?
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Ship of Theseus
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Ship of Theseus
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
.stepper {
background: rgba(0, 0, 0, 0.75);
color: rgba(255, 255, 255, 1);
}
.stepper:hover {
opacity: 0.8;
}
.stepper.disabled {
cursor: not-allowed;
background: rgba(0, 0, 0, 0.1)
}.stepper>div>div>div>div>a{
color: transparent !important;
}
stepper>div>div>div>div>span{
color: transparent !important;
}
.stepper>div>div>div:nth-child(1)>div>a:after, .stepper>div>div>div:nth-child(1)>div>span:after{
color: rgb(52, 58, 64);
content: '4' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(2)>div>a:after{
color: rgb(52, 58, 64);
content: '3' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(3)>div>a:after{
color: rgb(52, 58, 64);
content: '2' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(4)>div>a:after{
color: rgb(52, 58, 64);
content: '1' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(4)>div>span:after{
color: rgb(52, 58, 64);
background-color: rgb(108, 117, 125);
content: '1' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(3)>div>span:after{
color: rgb(52, 58, 64);
background-color: rgb(108, 117, 125);
content: '2' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(2)>div>span:after{
color: rgb(52, 58, 64);
background-color: rgb(108, 117, 125);
content: '3' !important;
margin-left: -10px;
}
.stepper>div>div>div:nth-child(1)>div>span:after{
color: rgb(52, 58, 64);
background-color: rgb(108, 117, 125);
content: '4' !important;
margin-left: -10px;
}
When Good design
becomes Worse design
than No design
Taming CSS
Justin Meyer
GOTO Conference 2015
"The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application."
Mental Illness & Vurnerability
Messy Humans in an Age of Clean Code
Text
Eliyah M. Goldratt
The Goal (1984)
"Al, the trouble is there is nothing for the guys down there to do while heat-treat is cookin’ the parts. You load up one of the damn furnaces, shut the doors, and that’s it for six or eight hours, or however long it takes. What are they supposed to do? Stand around and twiddle their thumbs?’’
Uncommon Sense
Eliyah M. Goldratt
The Goal (1984)
"Al, the trouble is there is nothing for the guys down there to do while heat-treat is cookin’ the parts. You load up one of the damn furnaces, shut the doors, and that’s it for six or eight hours, or however long it takes. What are they supposed to do? Stand around and twiddle their thumbs?’’
Uncommon Sense
Eliyah M. Goldratt
The Goal (1984)
"Al, the trouble is there is nothing for the guys down there to do while heat-treat is cookin’ the parts. You load up one of the damn furnaces, shut the doors, and that’s it for six or eight hours, or however long it takes. What are they supposed to do? Stand around and twiddle their thumbs?’’
Uncommon Sense
Eliyah M. Goldratt
The Goal (1984)
"Al, the trouble is there is nothing for the guys down there to do while heat-treat is cookin’ the parts. You load up one of the damn furnaces, shut the doors, and that’s it for six or eight hours, or however long it takes. What are they supposed to do? Stand around and twiddle their thumbs?’’
Uncommon Sense
Eliyah M. Goldratt
The Goal (1984)
"Al, the trouble is there is nothing for the guys down there to do while heat-treat is cookin’ the parts. You load up one of the damn furnaces, shut the doors, and that’s it for six or eight hours, or however long it takes. What are they supposed to do? Stand around and twiddle their thumbs?’’
Uncommon Sense
Content
Layout
Device
Material
Interaction
💀
Hello, who dis?
Sir Tim Berners-Lee
The creator of the mother-flippen Internet!
Still Kicking
http://info.cern.ch/hypertext/WWW/TheProject.html
The Goal
Document Sharing Platform of the Future
1996
1996
1996
1996
1996
1996
1996
1996
1996
1996
1996
1996
1996
The Consensus
"By 2005 or so,
it will become clear that the Internet's impact
on the economy has
been no greater
than the fax machine"
Paul Krugman
The Consensus
"By 2005 or so,
it will become clear that the Internet's impact
on the economy has
been no greater
than the fax machine"
Paul Krugman
The Consensus
Paul Krugman
"By 2005 or so,
it will become clear that the Internet's impact
on the economy has
been no greater
than the fax machine"
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
A Toy for Kids
Brian McCullough
How the Internet Happened (2018)
"... touting it as a revolutionary medium that would completely change our lives. [...] others who looked at the net and saw, yes, a toy. And we have to admit that these skeptics had a valid point of view, even with the benefit of hindsight. Because so much of the early web was decidedly amateur."
1996
1996
1996
1996
Hi, my name is . . . Slim Shady.
No, really, my name is Slim Shady.
Just kidding, my name is Mark Zuckerberg (for those of you that don’t know me) and I live in a small town near the massive city of New York.
I am currently 15 years old and I just finished freshman year in high school."
Web 2.0
Web 2.0
The Roots
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
The Roots
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
The Roots
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
The Future of Yesterday
"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."
Design Indaba
Design Indaba lines up the beta generation (2007)
The Future of Yesterday
"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."
Design Indaba
Design Indaba lines up the beta generation (2007)
John Maeda
How to Speak Machine (2019)
"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. [...] Design is now maturing — expect some awkwardness"
Digital Product Design
John Maeda
How to Speak Machine (2019)
"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. [...] Design is now maturing — expect some awkwardness"
Digital Product Design
John Maeda
How to Speak Machine (2019)
"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. [...] Design is now maturing — expect some awkwardness"
Digital Product Design
John Maeda
How to Speak Machine (2019)
"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. [...] Design is now maturing — expect some awkwardness"
Digital Product Design
"What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
As Delivery Platform
http://info.cern.ch/hypertext/WWW/TheProject.html
http://info.cern.ch/hypertext/WWW/TheProject.html
The Early Phase
http://info.cern.ch/hypertext/WWW/TheProject.html
The Akward Phase
The Akward Phase
http://info.cern.ch/hypertext/WWW/TheProject.html
The Akward Phase
Humans
http://info.cern.ch/hypertext/WWW/TheProject.html
The Akward Phase
Humans The Web
http://info.cern.ch/hypertext/WWW/TheProject.html
The Akward Phase
Humans The Web
http://info.cern.ch/hypertext/WWW/TheProject.html
The Akward Phase
Humans The Web
http://info.cern.ch/hypertext/WWW/TheProject.html
The JavaScript Phase
The Web
The JavaScript Phase
The Web
The Akward Phase
Humans The Web
"Even now, technology continues to change the things we make and use at a rate we don't understand yet. [...] We're no longer on the shore watching the information age approach; we're up to our hips in it."
John Maeda
How to Speak Machine (2019)
Shifting Ground
"Even now, technology continues to change the things we make and use at a rate we don't understand yet. [...] We're no longer on the shore watching the information age approach; we're up to our hips in it."
John Maeda
How to Speak Machine (2019)
Shifting Ground
"Even now, technology continues to change the things we make and use at a rate we don't understand yet. [...] We're no longer on the shore watching the information age approach; we're up to our hips in it."
John Maeda
How to Speak Machine (2019)
Shifting Ground
"Even now, technology continues to change the things we make and use at a rate we don't understand yet. [...] We're no longer on the shore watching the information age approach; we're up to our hips in it."
John Maeda
How to Speak Machine (2019)
Shifting Ground
"Even now, technology continues to change the things we make and use at a rate we don't understand yet. [...] We're no longer on the shore watching the information age approach; we're up to our hips in it."
Shifting Ground
John Maeda
How to Speak Machine (2019)
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
"If we're going to be successful in this new world, we need to see information as a workable material and learn to architect it in a way that gets us to our goals. The most important thing I can teach you about information is that it isn't a thing. It's subjective, not objective"
Abby Covert
How to Make Sense of Any Mess (2014)
Brave New World
Release the VS Code
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
"Working together is difficult when stakeholders see the world differently than we do. [...] Most of the time, there is no right or wrong way to make sense of a mess. Instead, there are many ways to choose from. Sometimes we have to be the one without opinions and preferences so we can weigh all the options and find the best way forward for everyone involved."
Abby Covert
How To Make Sense of Any Mess (2014)
One-Size-Fits-All
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Ryan Singer
Shape Up (2019)
"Over-specifying the design also leads to estimation errors. Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. That’s because making the interface just so can require solving hidden complexities and implementation details that weren’t visible in the mockup. "
Paradox of Planning
Human are terrible at
🤔estimating complexity
DRAW A BICYCLE
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
The planning fallacy is a phenomenon in which predictions about how much time will be needed to complete a future task display an optimism bias and underestimate the time needed. This phenomenon sometimes occurs regardless of the individual's knowledge that past tasks of a similar nature have taken longer to complete than generally planned.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
The planning fallacy is a phenomenon in which predictions about how much time will be needed to complete a future task display an optimism bias and underestimate the time needed. This phenomenon sometimes occurs regardless of the individual's knowledge that past tasks of a similar nature have taken longer to complete than generally planned.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
The planning fallacy is a phenomenon in which predictions about how much time will be needed to complete a future task display an optimism bias and underestimate the time needed. This phenomenon sometimes occurs regardless of the individual's knowledge that past tasks of a similar nature have taken longer to complete than generally planned.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
Human are terrible at
🤔estimating complexity
The planning fallacy is a phenomenon in which predictions about how much time will be needed to complete a future task display an optimism bias and underestimate the time needed. This phenomenon sometimes occurs regardless of the individual's knowledge that past tasks of a similar nature have taken longer to complete than generally planned.
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
It always takes longer than you expect, even when you take into account Hofstadter's Law
Hofstadter's Law
Human are terrible at
🤔estimating complexity
It is really cool! You can see how people recognize the basic visual shape of the bike, but don't actually understand how the different parts of the bike work together to make it function. It's like seeing the difference between recognition and understanding in people's minds.
It always takes longer than you expect, even when you take into account Hofstadter's Law
Hofstadter's Law
😭
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
What can we learn from design systems that became problems themselves instead of solutions?
Cloud Before The Horse
By Schalk Venter
Cloud Before The Horse
...
