Wireframes
Whom, why, when, what and WTF
Should you do wireframes?
Tell me why?
Answer
Word of Warning
"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)
Word of Warning
"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)
Word of Warning
"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)
Word of Warning
"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)
Word of Warning
"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)
Word of Warning
"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)
Word of Warning
"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)
It's OK if you don't
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
"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”
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
✨
Industry Icebergs
"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
Industry Icebergs
"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
Industry Icebergs
"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
Industry Icebergs
"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
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."
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."
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."
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."
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."
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
Challenge: Impossible
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
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
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Shape Up
"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. [...] Counterintuitive as it may seem, the more specific the work is, the harder it can be to estimate. [...] On the other end of the spectrum, projects that are too vague don’t work either. When a project is defined in a few words, nobody knows what it means."
Ryan Singer
Shape Up (2019)
Abstraction
Scott McCloud
Understanding Comics (1993)
Abstraction
Scott McCloud
Understanding Comics (1993)
Abstraction as Modality
Abstraction as Modality
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
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.
Abstraction as Modality
Abstraction as Modality
Abstraction as 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."
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."
The Product
Closer Modality
Further Modality
Closer Modality
Further Modality
Abstraction
Emulation
Production
Closer Modality
Further Modality
Abstraction
Emulation
Production
Closer Modality
Further Modality
Abstraction
Emulation
Production
Emergent Complexity
"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
Content
Layout
Device
Material
Interaction
💀
UI as Hyperobject
"I do not access hyperobjects across a distance, through some transparent medium. Hyperobjects are here, right here in my social and experiential space. [...] They are indeed more than a little demonic, in the sense that they appear to straddle worlds and times, like fiber optic cables or electromagnetic fields."
Timothy Morton
Hyperobjects (2013)
UI as Hyperobject
"I do not access hyperobjects across a distance, through some transparent medium. Hyperobjects are here, right here in my social and experiential space. [...] They are indeed more than a little demonic, in the sense that they appear to straddle worlds and times, like fiber optic cables or electromagnetic fields."
Timothy Morton
Hyperobjects (2013)
UI as Hyperobject
"I do not access hyperobjects across a distance, through some transparent medium. Hyperobjects are here, right here in my social and experiential space. [...] They are indeed more than a little demonic, in the sense that they appear to straddle worlds and times, like fiber optic cables or electromagnetic fields."
Timothy Morton
Hyperobjects (2013)
UI as Hyperobject
"I do not access hyperobjects across a distance, through some transparent medium. Hyperobjects are here, right here in my social and experiential space. [...] They are indeed more than a little demonic, in the sense that they appear to straddle worlds and times, like fiber optic cables or electromagnetic fields."
Timothy Morton
Hyperobjects (2013)
UI as Hyperobject
"I do not access hyperobjects across a distance, through some transparent medium. Hyperobjects are here, right here in my social and experiential space. [...] They are indeed more than a little demonic, in the sense that they appear to straddle worlds and times, like fiber optic cables or electromagnetic fields."
Timothy Morton
Hyperobjects (2013)
Placing Your Pins
- Language / Adjectives
- Real Product
On Humans
"We humans are complex beings, and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that can appeal to such wide-ranging perspectives?”
Aaron Walter
Designing for Emotion (2011)
On Humans
"We humans are complex beings, and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that can appeal to such wide-ranging perspectives?”
Aaron Walter
Designing for Emotion (2011)
On Humans
"We humans are complex beings, and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that can appeal to such wide-ranging perspectives?”
Aaron Walter
Designing for Emotion (2011)
On Humans
"We humans are complex beings, and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that can appeal to such wide-ranging perspectives?”
Aaron Walter
Designing for Emotion (2011)
On Humans
"We humans are complex beings, and can be difficult to design for. We all have distinct personalities, emotional baggage, and unique dispositions, so how can we design something that can appeal to such wide-ranging perspectives?”
Aaron Walter
Designing for Emotion (2011)
Closer Modality
Further Modality
Abstraction
Emulation
Production
Abstraction
Emulation
Production
Closer Modality
Further Modality
Abstraction
Emulation
Production
Closer Modality
Further Modality
Abstraction
Emulation
Production
Closer Modality
Further Modality
Paper
Click-through
Prototype
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Paper
- Precedes Internet
- Easy to Create
- Human Emulated
- Tactile Experience
- Different Modality
Click-Through
- Easy to Iterate
- Motor Skills, Glare, etc.
- User's actual device
- Figma (InVision, Axure)
Click-Through
- Easy to Iterate
- Motor Skills, Glare, etc.
- User's actual device
- Figma (InVision, Axure)
Click-Through
- Easy to Iterate
- Motor Skills, Glare, etc.
- User's actual device
- Figma (InVision, Axure)
Click-Through
- Easy to Iterate
- Motor Skills, Glare, etc.
- User's actual device
- Figma (InVision, Axure)
Click-Through
- Easy to Iterate
- Motor Skills, Glare, etc.
- User's actual device
- Figma (InVision, Axure)
Prototype
- Truest modality
- Technical concerns
- Existing competencies
- Harder to iterate
Prototype
- Truest modality
- Technical concerns
- Existing competencies
- Harder to iterate
Prototype
- Truest modality
- Technical concerns
- Existing competencies
- Harder to iterate
Prototype
- Truest modality
- Technical concerns
- Existing competencies
- Harder to iterate
Prototype
- Truest modality
- Technical concerns
- Existing competencies
- Harder to iterate