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-and-shaping

By Schalk Venter

wireframes-and-shaping

The whom, why, when and WTF

  • 37