Schalk Venter
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
Wireframes
Why, Whom, When, and WTF
Why?
Why? Someone said so.
Darkest Secret
"When you engage in a new client project how do you get started? A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry."
Samantha Warren
Director of Design at Adobe
"When you engage in a new client project how do you get started? A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry."
Samantha Warren
Director of Design at Adobe
Darkest Secret
"When you engage in a new client project how do you get started? A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry."
Samantha Warren
Director of Design at Adobe
Darkest Secret
"When you engage in a new client project how do you get started? A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry."
Samantha Warren
Director of Design at Adobe
Darkest Secret
Artefacts
Artefacts
Artefacts
Artefacts
Process
Artefacts
Process
A Poem
"And if our weakness has been to confuse
the bright and bloody colors of our calendars
with the true weather of days,
and the parchment’s territory of our maps
with the land spread out before us, never mind.
We have always been on our way to this new place,
that is no place really, but it is real."
William Gibson
Memory Palace (1991)
Artefacts
Process
A Poem
"And if our weakness has been to confuse
the bright and bloody colors of our calendars
with the true weather of days,
and the parchment’s territory of our maps
with the land spread out before us, never mind.
We have always been on our way to this new place,
that is no place really, but it is real."
William Gibson
Memory Palace (1991)
Artefacts
Process
A Poem
"And if our weakness has been to confuse
the bright and bloody colors of our calendars
with the true weather of days,
and the parchment’s territory of our maps
with the land spread out before us, never mind.
We have always been on our way to this new place,
that is no place really, but it is real."
William Gibson
Memory Palace (1991)
Artefacts
Process
A Poem
"And if our weakness has been to confuse
the bright and bloody colors of our calendars
with the true weather of days,
and the parchment’s territory of our maps
with the land spread out before us, never mind.
We have always been on our way to this new place,
that is no place really, but it is real."
William Gibson
Memory Palace (1991)
Artefacts
Process
A Poem
"And if our weakness has been to confuse
the bright and bloody colors of our calendars
with the true weather of days,
and the parchment’s territory of our maps
with the land spread out before us, never mind.
We have always been on our way to this new place,
that is no place really, but it is real."
William Gibson
Memory Palace (1991)
Cargo Culting
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
Cargo Culting
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
Cargo Culting
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
Cargo Culting
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
Cargo Culting
"Groups labeled as cargo cults were subject to a considerable number of anthropological publications throughout the 1960s [...] The term has largely fallen out of favour and is now seldom used among anthropologists, though its use as a metaphor (in the sense of engaging in ritual action to obtain material goods) is widespread outside of anthropology in popular commentary and critique”
Cargo Culting
"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
Human are terrible at
🤔estimating complexity
Minimize Waste
Eric Reis
The Lean Startup (2011)
“seeks to eliminate wasteful practices and increase value-producing practices during the earliest phases of a company so that the company can have a better chance of success without requiring large amounts of outside funding, elaborate business plans, or a perfect product.”
Human are terrible at
🤔estimating complexity
Minimize Waste
Eric Reis
The Lean Startup (2011)
“seeks to eliminate wasteful practices and increase value-producing practices during the earliest phases of a company so that the company can have a better chance of success without requiring large amounts of outside funding, elaborate business plans, or a perfect product.”
Human are terrible at
🤔estimating complexity
Minimize Waste
Eric Reis
The Lean Startup (2011)
“seeks to eliminate wasteful practices and increase value-producing practices during the earliest phases of a company so that the company can have a better chance of success without requiring large amounts of outside funding, elaborate business plans, or a perfect product.”
Human are terrible at
🤔estimating complexity
Minimize Waste
Eric Reis
The Lean Startup (2011)
“seeks to eliminate wasteful practices and increase value-producing practices during the earliest phases of a company so that the company can have a better chance of success without requiring large amounts of outside funding, elaborate business plans, or a perfect product.”
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
Cap Watkins
The Boring Designer (2019)
Not Just Your Salary
"With infinite time and resources we could do anything, but the boring designer knows we have neither of those things. We have super talented people working together for a finite period of time. [...] Sometimes that means re-skinning a UI and making some light design/copy changes to enable the engineering team to focus on making the page loads lightning fast."
Cap Watkins
The Boring Designer (2019)
"With infinite time and resources we could do anything, but the boring designer knows we have neither of those things. We have super talented people working together for a finite period of time. [...] Sometimes that means re-skinning a UI and making some light design/copy changes to enable the engineering team to focus on making the page loads lightning fast."
Not Just Your Salary
Ryan Singer
Shape Up (2019)
"When we shape the work, we need to do it at the right level of abstraction: not too vague and not too concrete. Product managers often err on one of these two extremes."
Common Footguns
Ryan Singer
Shape Up (2019)
"When we shape the work, we need to do it at the right level of abstraction: not too vague and not too concrete. Product managers often err on one of these two extremes."
Common Footguns
Ryan Singer
Shape Up (2019)
"When we shape the work, we need to do it at the right level of abstraction: not too vague and not too concrete. Product managers often err on one of these two extremes."
Common Footguns
Ryan Singer
Shape Up (2019)
"When we shape the work, we need to do it at the right level of abstraction: not too vague and not too concrete. Product managers often err on one of these two extremes."
Common Footguns
Abstraction
Scott McCloud
Understanding Comics (1993)
Abstraction
Scott McCloud
Understanding Comics (1993)
How to Draw an Owl
?
How to Draw an Owl
?
How to Draw an Owl
How to Draw an Owl
How to Draw an Owl
How to Draw an Owl
✨
Visual Fidelity
"In audio, "fidelity" denotes how accurately a copy reproduces its source. In the 1950s, the terms "high fidelity" or "hi-fi" were popularized for equipment and recordings which exhibited more accurate sound reproduction. [...] In the 1976 edition of the Oxford Dictionary, lo-fi was added under the definition of "sound production less good in quality than 'hi-fi,'" and in the glossary of the 1977 book The Tuning of the World, was defined as "unfavourable signal-to-noise ratio."
Visual Fidelity
"In audio, "fidelity" denotes how accurately a copy reproduces its source. In the 1950s, the terms "high fidelity" or "hi-fi" were popularized for equipment and recordings which exhibited more accurate sound reproduction. [...] In the 1976 edition of the Oxford Dictionary, lo-fi was added under the definition of "sound production less good in quality than 'hi-fi,'" and in the glossary of the 1977 book The Tuning of the World, was defined as "unfavourable signal-to-noise ratio."
Visual Fidelity
"In audio, "fidelity" denotes how accurately a copy reproduces its source. In the 1950s, the terms "high fidelity" or "hi-fi" were popularized for equipment and recordings which exhibited more accurate sound reproduction. [...] In the 1976 edition of the Oxford Dictionary, lo-fi was added under the definition of "sound production less good in quality than 'hi-fi,'" and in the glossary of the 1977 book The Tuning of the World, was defined as "unfavourable signal-to-noise ratio."
Visual Fidelity
"In audio, "fidelity" denotes how accurately a copy reproduces its source. In the 1950s, the terms "high fidelity" or "hi-fi" were popularized for equipment and recordings which exhibited more accurate sound reproduction. [...] In the 1976 edition of the Oxford Dictionary, lo-fi was added under the definition of "sound production less good in quality than 'hi-fi,'" and in the glossary of the 1977 book The Tuning of the World, was defined as "unfavourable signal-to-noise ratio."
unfavourable signal-to-noise ratio."
Visual Fidelity
unfavourable signal-to-noise ratio."
2006 - 2010
High Fidelity
Low Fidelity
Credit: Ian Jepson
High Fidelity
Low Fidelity
Credit: Ian Jepson
High Fidelity
Low Fidelity
Credit: Ian Jepson
High Fidelity
Low Fidelity
Credit: Ian Jepson
High Fidelity
Low Fidelity
Credit: Ian Jepson
High Fidelity
Low Fidelity
Credit: Ian Jepson
How to Draw an Owl
✨
High Fidelity
Low Fidelity
How to Draw an Owl
How to Draw an Owl
How to Draw an Owl
Data Availability
Conversions
UI Libraries
Testability
Copywriting
State Management
Legacy Code
Legal Implications
Accessibility
Brand Adherence
Customer Support
Older Devices
How to Draw an Owl
Data Availability
Conversions
UI Libraries
Testability
Copywriting
State Management
Legacy Code
Legal Implications
Accessibility
Brand Adherence
Customer Support
Older Devices
Workshopping
Data Availability
Conversions
UI Libraries
Testability
Copywriting
State Management
Legacy Code
Legal Implications
Accessibility
Brand Adherence
Customer Support
Older Devices
Workshopping
Data Availability
Conversions
UI Libraries
Testability
Copywriting
State Management
Legacy Code
Legal Implications
Accessibility
Brand Adherence
Customer Support
Older Devices
Cartesian Complexity
A
C
B
A
C
B
D
D
Modality
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
Modality
"In semiotics, a modality is a particular way in which information is to be encoded for presentation to humans, i.e. to the type of sign and to the status of reality ascribed to or claimed by a sign, text, or genre. [...] Thus, the sensory modalities will be visual, auditory, tactile, olfactory, gustatory, kinesthetic, etc. A list of sign types would include: writing, symbol, index, image, map, graph, diagram, etc. Some combinations of signs can be multi-modal, i.e. different types of signs grouped together for effect."
This is not a UI
This is not a UI
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI 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 a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
It is a slide in a presentation of a screenshot of specific state of a UI displaying specific user data at a specific point in time to the user himself by means of a desktop computer.
This is not a UI
This is not a UI
Encoded Information
Is this a UI?
Is this a UI?
A
C
B
D
Closer Modality
Further Modality
Higher Fidelity
Lower Fidility
Modalities
Closer Modality
Further Modality
Wireframes Why, Whom, When, and WTF
wireframes-and-shaping
By Schalk Venter
wireframes-and-shaping
The whom, why, when and WTF
- 117
