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

Wireframes

By Schalk Venter

Wireframes

The whom, why, when and WTF

  • 12