Permaculture Design Systems for a Digital Landscape

Introduction

Mick Real introduces the topic of design systems and draws a parallel between edible landscapes and digital design systems. He emphasizes the importance of understanding the energy flow within systems.

The Unseen Energy of User Interactions

Mick highlights the hidden energy consumption involved in everyday digital interactions, comparing it to the energy embedded in a banana. He uses a simple user interaction example to illustrate the complex flow of energy from front end to back end and back.

The Analogous Energy Flow in Nature

Mick draws a direct comparison between the energy flow in a digital system and the energy flow in a tree. He explains how the sun's energy acts as user input, triggering a chain reaction through leaves, branches, roots, and microorganisms, mirroring the steps of a web request.

Mick's Journey to Permaculture

Mick shares his personal experience of transitioning from city life to rural living and starting a food business. He explains his decision to learn permaculture design to grow food sustainably and efficiently.

Connecting Permaculture and Digital Design Systems

Mick reveals his realization of the similarities between permaculture design and digital design systems. He points out their shared focus on arranging functional elements and optimizing energy flow within a system.

Introduction to Permaculture

Mick provides an overview of permaculture, highlighting its origin, principles, and its goal of harmonizing human needs with nature's ability to provide. He emphasizes permaculture's focus on observing natural patterns and leveraging systems thinking to design sustainable ecosystems.

The Ethics of Permaculture

Mick explains the three core ethics of permaculture: Earth Care, People Care, and Fair Share. He discusses their significance in guiding design decisions and ensuring sustainability and ethical considerations in both the digital and physical realms.

The Principles of Permaculture

Mick outlines the 12 principles of permaculture, connecting each principle to its application in digital design systems. He emphasizes the importance of observation, energy efficiency, leveraging existing resources, minimizing waste, and designing for evolution and resilience.

Key Elements of Permaculture Design

Mick introduces the core elements of permaculture design, focusing on water/energy flow, access/accessibility, and structures/form. He emphasizes their significance in shaping the design based on the intended function and optimizing energy distribution.

Swales: Capturing and Distributing Energy

Mick explains the concept of swales as earthworks strategies to capture and distribute water and nutrients. He describes how swales slow down water flow, recharge the water table, and support diverse plant life, comparing their function to managing user flow and data in digital systems.

Guilds: Designing Beneficial Relationships

Mick describes guilds, or polycultures, as a design pattern for arranging functionally beneficial elements. He highlights their role in supporting biodiversity, optimizing resource utilization, and creating self-sustaining ecosystems, drawing parallels to designing component relationships in digital systems.

Zones: Organizing System Elements

Mick explains the concept of zones in permaculture, where different areas are designated based on their function and input/output requirements. He relates this to organizing digital experiences based on user needs, interaction frequency, and content categorization for efficient design and navigation.

Permadesign: Integrating Permaculture into Digital Design

Mick introduces Permadesign as a framework for integrating permaculture principles into digital design systems. He emphasizes designing for permanence, evolution, and energy flow optimization, creating a holistic approach to digital design that considers long-term sustainability and resilience.

Practical Applications of Permadesign

Mick provides practical steps for incorporating Permadesign thinking into everyday design work, including observation, energy analysis, designing from patterns to details, and making small, iterative improvements based on feedback and evolving requirements.

The Significance of Patterns and Energy Flow

Mick emphasizes the importance of understanding energy flow patterns in both natural and digital systems. He highlights the three modes of energy interaction: input, process, and output, encouraging designers to optimize each step for efficient and sustainable design solutions.

Designing the Future with Permadesign and AI

Mick explores the potential of combining Permadesign principles with modern tools like AI to design adaptive and evolving design systems. He envisions a future where design components are inherently responsive to usage patterns, feedback loops, and changing requirements, leading to more sustainable and resilient digital landscapes.

Conclusion and Call to Action

Mick concludes by summarizing the key takeaways of Permadesign and encourages the audience to explore further resources and get involved in the project. He reiterates the potential of Permadesign to create a more sustainable and resilient future for digital design by drawing inspiration from nature's enduring patterns and energy flows.

Thanks for having me here today, and thanks for joining me on this new track.

I'm pretty excited to be part of the discussion around design systems.

And hope to provide a bit of inspiration, based on nature.

And a bit of food for thought on how edible landscapes and digital design systems have a lot in common.

There's a fair bit to pack into this talk, so I'll share a link at the end with a bit more information.

And yeah, I hope that you enjoy this and see some of the connections and some takeaways.

I'd also like to acknowledge the traditional custodians of the land, the Gadigal people of the Eora nation, and the elders, and pay respect to any of the elders past, present, and emerging, and any Aboriginal or Torres Strait Islander people here today.

Okay, before I get stuck into it, I'd just like to get an idea of how many people interacted with the user interface today.

Can you just put your hands up?

Alright, that seems like just about everyone.

I think Yeah, we might have broken it because it doesn't look like there's that many people in here.

That's cool.

Could you just put your hand up again if you know how much energy went into that interaction, the transaction of that being complete?

No?

You do.

Okay.

Good, we'll talk about that later.

Alright, this might be an easier one then.

How many people ate a banana today?

Cool, there's a few people that had a banana.

That's great.

Do you know how much energy went into the production of that banana?

No.

Okay.

While a lot of focus is generally on the electrical energy side of things, it's the unseen energies that I want to focus on here.

When you stop and look at the connectedness of system elements, you and ponder for a moment whether an app or website is even functioning if there's no user to experience it.

If a tree falls in the forest and no one's around to hear it, does it even make a sound?

And we assume that it's running as there's an electricity bill.

Uptime reports and scheduled processes to prove it, but the real life and function of the app is in the users interacting with it, consuming content, and outputting further actions based on the content consumed.

So it's this pattern of energy flow, through components and across the system where things begin to get really interesting.

So I'll give you an example.

Of a user interaction, a simple user interaction from front end to back and back to front where the feedback is represented as a UI update.

So the energy flows from the user interaction through the front end framework generating an API request, which the back end framework picks up and sends to microservices and other connected services, which they pull from a database layer for back end and data processing, where the response is generated and sent back via HTTP.

And if you were to look at all of the things that get fired off along the way, you get this kind of like neural network looking diagram, and that's all of the, yeah, all of the actions and everything that's fired off from the front end to the back end.

If you were to now rotate that image, and instead of it being front end and back end, you have canopy and roots.

You start to see a very different image, but the functionality is almost identical.

For this example, for this example, consider that the user's input is the sun's energy of photons starting the interaction, tapping the interface layer of leaves.

Triggering a request via the front end framework of branches, validating and sanitizing the input, converting it to carbohydrate before sending a request for mineral data down an asynchronous trunk of dark fiber network to the back end framework in the subterranean layer, where it connects through to the roots of microservices in the form of microbiology, where they exchange the user request energy for mineral data, returning the data back through the business logic layer of the roots before preparing the response, traveling back to the front end branches, which mutate the response data and deliver it, through the interface layer of leaves, which indicate a successful response in the form of chlorophyll.

Environmental factors and season will indicate which components to use for the rendering of the interface, and the system contains a well defined set of atomic components for the interface in the form of leaves, flowers, and fruit.

And it even comes with a dark mode for display at night.

The pattern of energy that catalyze and support energy flow through a system activates function along the way and produces forms of natural design that provide an interface to a seemingly invisible transaction of energy present in abundance both in nature and digital systems.

Hopefully you're starting to see some patterns and before I go into any further detail, a little bit more about how I ended up here.

Moving, from the city life as a designer in Brisbane, Mianjin, around three years ago, and landing in rural northern New South Wales, or Bundjalung country, where I started a small batch food business, I wanted to look at ways of, growing food that meant I could have really good quality produce, and do it at a small and sustainable scale, and have a really diverse range of plants, for the product inputs.

I wanted to do all this without killing myself or the soil doing it, so conventional farming was out.

I was already aware of, permaculture and some other regenerative practices.

So I decided to hit pause on the random acts of gardening and learn a better approach.

Early in 2022, I signed up for an online permaculture design course and slowly worked my way through the mountain of learning material.

After a pretty eventful year nearing its end, it was time to put theory into practice and submit my final design exercise, where I would use a templated site, provided by the course to apply the knowledge of permaculture design that I'd been studying for the previous year.

These are some of the screens.

From the exercise.

So come March this year, and I had sent my permaculture design solution in for judgment, and a couple of weeks later, I got a response back, and I'd passed.

And I had some good feedback as well.

But now that I had my certificate, I started to think about, what it really meant.

What more it could lead to.

Beyond just growing my food.

So with all the things on the go I couldn't help but start seeing patterns and connections between pretty much everything.

But what really struck me was the similarities between permaculture design and digital design systems.

Both being systems of designating and arranging functional elements, it made more and more sense the more that I looked at it.

I started documenting some of what I was noticing and before I got very far, I saw this email from John Allsopp saying that there was a new design system track this year and there was a link to apply for speaking.

So while this was not an email address personally to myself, I thought this was a really good opportunity to get the idea together and share it with a crowd that could find it useful.

And having the opportunity to unify two different perspectives of design system thinking at a time when they're both at a peak area, a peak of interest, and so here we are today.

What I'm going to be talking about first is a quick intro to permaculture, digging into the feature set of this design system of nature.

I'll add some ideas for applying it to the digital landscape, and then I'll take a look at patterns and flows of energy through our systems, and how we can use it to design the future.

Before we break ground on this topic though, some of you might be wondering what the heck the actual amount of energy used in the transaction of the user interaction is.

And maybe some of you are just thinking about bananas.

The answer to either of these is not very simple.

So I had to bring in the big guns.

And ask ChatGPT some creative questions.

So it basically indicated that there was going to be a lot of work and this is a summarized version, those dot points were like, pages worth.

I had to refine the questioning and I still couldn't really get a direct answer.

More questions.

And eventually A very rough and probably incorrect answer, but there you have it.

As you can see, and look, if anyone wants to actually conduct this test, let's talk about it, I'd be keen to get involved in that.

It's clear that there's like a lot more energy in the production of a banana.

There's a lot of differences there, like the energy input for both is very different.

The processing energy, to make a banana is, seemingly free, and there's an element of scale.

We don't grow to five meters tall and usually only come with two hands.

Anyway, so now it's time to talk about permaculture.

Permanent agriculture and permanent culture.

It was created by a couple of Aussies, Bill Mollison and David Holmgren back in the 1970s, and it's a response to observations of an overproductive and energy hungry food and social system.

It is based on natural design and it's Indigenous agricultural practices and it's about harmonizing human requirements with nature's ability to continue providing for us and itself, and creating agricultural, agriculturally productive ecosystems which have the diversity, stability and resilience of natural ecosystems that have cycled, evolved and survived forever.

Permies, or people who practice permaculture, are the hackers of natural systems.

By looking at patterns in nature and the connectedness of functional elements through the lens of design and systems thinking, we can see intersections, with elements in ways that allow us to gain access to more potential energy than what might have otherwise been perceived.

With ethical exploitation of natural systems, We're able to leverage their nature to provide more for us while maintaining those systems abundant ability of productivity.

So with a solid foundation of ethics and principles and a component library of elements, permaculture has quite a feature set.

And I'll take you through these features with some of the connections to the digital landscape.

At the core of the permaculture philosophy is a set of three ethics.

And these guide the principles and provide a theme across permaculture thinking.

The ethics are earth care, people care, and fair share.

And by thinking from these perspectives and acting according to these ethics, we can use them to empower design decision, design decisions in alignment with permanent culture thinking.

The underlying value here is that we consider how we're interacting with and what we are creating affects things outside of our direct experience.

So the other living elements that use our creations and create connections with us, and also the earth that we come from and return to as a, as part of an ongoing energy cycle.

These ethics are succinct and easy to follow, and apply to many situations.

And I will tell you the digital landscape adaptions, while the permaculture versions will display first.

EarthCare.

Conscious co creation using sustainable and regenerative practices.

Designing with evolution and permanence.

PeopleCare.

Care for those using our creations and what it means to be and have other people involved in our creation's existence.

And FairShare, showing the benefits of thinking and working with permanence and evolution and achieve more together this way.

In addition to the digital landscape that we interact with, each of these ethics can also provide direction for other areas of the operation, such as electricity consumption, how sustainable a service is, and what companies are doing to inset or offset their energy consumption footprint.

The principles are a set of governing guidelines, that keep things aligned with the values of permanent culture.

Starting with observe and interact.

See what the landscape says, what functions are available, and what does the view and environment allow.

Catch and store energy.

Archive concepts and kick off next projects with them.

Take what's good and recycle the rest.

And retrofit the future today.

New design styles that aren't going to ship for a while, but they could be useful in another project, now, that's a real benefit to a well made design system.

And obtain a yield.

Ship the product for wild use, see what the people think, and produce and harvest creator and consumer happiness.

Apply self regulation and accept feedback.

Watch for changes in energy requirements for inputs, process, and outputs.

Use and value renewable resources and services.

So use and contribute to open source and existing services for functionality.

And leverage existing function to design form and contribute back to for design input.

Produce no waste.

So elements are designed to evolve rather than being replaced.

Use existing projects as a base and get creative from there.

Design from patterns to details.

Design from the top level pattern to the finer details.

Applying this pattern while zooming into the most atomic elements.

And integrate rather than segregate.

Elements of function that complement each other, they could have a more beneficial relationship together.

And this could reduce development time while also enhancing user experiences.

Use small and slow solutions.

This is like lean startup and MVP thinking.

Design the most succinct version making small iterations with time and evolution.

Use and value diversity.

Design for a broader audience and make it accessibly diverse.

Use edge cases and value the marginal.

So use edge cases as design considerations.

Look at the marginal areas and interaction points that otherwise get overlooked.

Creatively use and respond to change.

Look at regression testing as design inspiration.

Use, user metrics and feedback loops, these can support design decisions, just thinking outside the box really.

So as you can see we've got a pretty good governance layer there already, now for some of the tools that can get the form shaping up.

With a range of strategies, components and various recipes for designing edible landscapes, managing water flow, capturing and storing energy, there are a few core elements that are really useful and these are some of the main elements that I find.

Particularly useful for digital design systems.

Some of the primary information that is recorded about a new design site, and by having, by observing and designing around these landscape features, the most important elements of consideration can be placed according to their intended function and purpose, allowing for other supporting and feature elements to be designed around this core.

So water or energy flow into the system that flows across the key areas with catchment and distribution opportunities, and where the energy leaves the system and how we design for this.

Access or accessibility in the way of new and existing pathways where, to key areas of function, making them as energy efficient and accessibly diverse.

And structures or form, function by form the key areas of this set of, design considerations that has a dense function which dictate the form providing for energy capture generation and storage.

Positioned along contour lines, swales can be singular or as a series, depending on their environment.

With the primary swale starting at the highest point on the land, They're a very supportive element in a system.

They're an earthworks strategy that functions to capture and distribute water runoff and nutrients into the gutter.

They slow down the flow of water downhill, recharging the water table and providing a reduction in irrigation over time.

The mound will host a diverse range of plants and trees along it, and which will hold the structure of the swale in place and add to the water retention and regeneration properties.

The plants along the swale can be planted in various arrangements, with guilds being a popular format.

Arranging the food plants along an easy to access pathway, requiring less water and input energy and outputting heaps of function and food.

They can connect to dams and other water bodies.

And in a series can move water and nutrients from one to the other and around the system with no additional energy input.

Seeing a pattern in how we think about what we need to support a user base of digital products with enjoyable experiences.

Creating efficient pathways to features, ensuring that users move through the site slowly and stay on page longer.

Interacting with forms and inputting their data energy.

A well designed solution requires less creator input and maintenance and continues as a self sufficient capture and distribution system.

Guilds, or polycultures, are a design pattern for arranging companion and functionally beneficial elements into groups that can be deployed along swales, or as small veggie patches, or even large food forests.

Borrowing from rainforest layering, from the canopy to the ground, guilds can contain some or all of the layers to create a successful combination.

And these are what the, little labels there are.

Plants are chosen, plants chosen are specific in how they provide function at their layer, and across the guild.

Some are about the size and shape, while others are about what they do in the dirt, or how they, Interact with other elements of the guild.

Larger guilds and connected guilds become self sustaining ecosystems over time with elements that interact with and support this ecosystem are design considerations also.

And with the aim of creating a diversity of elements that support all life forms that interact with it.

And to understand where guilds and other system elements should be organized in the entire, project, the project area or property is divided into zones.

By understanding these relationships between elements, they can be designed more consciously and benefit other areas of the system by their design.

Zones are used to allocate, areas of the system for different input and output requirements and, as a result, perform different functions across the system, while having a designed intent around how they interact, and connect with each other.

Using zones to give experiences logical places to live, we can prioritize design inputs.

This is an example of how it might fit into a digital design system.

And it starts with zone 00, which is the individual, or the creator, or the user.

And from this perspective we can consider what the picture looks like and how we're going to design for it.

How we fit into this picture also plays part in how the decisions from this perspective are made.

Zone one is like the home view of our app, where, the place where people enter it and, providing convenient pathways to other zones.

Zone one is the primary navigation views.

These are the top level pages that may sit in the main menu and while they're frequently used, they're generally not as, they come after the primary interaction.

Once a user navigates away from home.

Zone two, back pages, content areas, blog posts.

These areas can be somewhat self supporting once they are at a level of function.

They don't require as much upkeep as the primary views and would usually hold a bulk of the site or app's content.

Zone three is account pages and user input areas.

These areas rarely change once they've been implemented and usually see the least amount of ongoing updates.

By design, they're resilient areas that allow for self managed use by the people experiencing them.

Zone 4 is IM groups, chat rooms, forums and social discourse.

And it's nearing the outer region of an app or website's experience.

Often even external to the native experience.

These areas tend towards a more wild formation in terms of the energy that is captured and distributed across this system.

And Zone 5, which was on there, is other areas of the, other areas, like other app sites or services, or off screen printed media, perhaps advertising, anything that connects to the brand or user experience, of that product.

It could, be used to analyze user experiences, with other parts of the app also.

So zones also have a particular size, ratios in relation to the intensity in which they are maintained, being more often closer to zone zero and less often in the outer zones.

So based on permaculture, and applied to the digital design space, as an overlay to existing design systems, Or to start new, the perma design system can act as a governance layer, though can provide for a more holistic design system by integrating the holistic nature of permaculture into the digital space and related areas of operation.

It should reflect the way that the elements are considered in terms of function, functional relationships, arrangement, energy flow, and evolution over time.

PermaDesign is a system for designating elemental and systemic form around the function defined by energy, flow, through the digital landscape, creating natural patterns of design that are capable of evolving and benefit life in all its forms.

Components, atoms, and assets all evolve and are rarely replaced or removed.

Designing with permanence in mind to broaden the scope now rather than later.

Designing the patterns of evolution and creating parameters around evolution of function.

Designing form while defining intent that allows for natural and autonomous evolution over time.

The methodology can be applied by way of thinking and practice from patterns to details using small iterations as continued contributions are made.

This includes iterations of thought that evolve perspective.

By practicing this framework from zone 0 0 at the individual level on a day to day basis, and enabling this through sharing resources and this presentation, I hope that it will allow for permanent culture to be observed and interacted with, without a garden.

While working in the digital landscape.

And for those that find it a useful way of living, it can then naturally extend outwards to other physical zones within your current or future place of living and might even provide you with some homegrown food.

You don't have to wait to begin.

You can start using this methodology today as soon as you leave this room.

You can use some simple ideas that come from this way of thinking.

Start by stopping first.

Look around.

It's effortless action.

Analyze by energy input, process, and output, and optimize the inputs and processes.

Design from top level pattern to the finer details.

Applying this pattern while zooming into the most atomic elements.

And make small iterations over time, taking input energy from the output of successful iterations.

And this also includes thought.

But really what this keeps coming back to for me is the patterns, in particular, the patterns of energy, and looking at how energy flows through elements in the modes of input, process, and output.

And this can be applied to anything functional, really, to refine what is required at an atomic level.

Patterns are such a massive part of digital design and design systems.

They are the foundation of natural design and referenced by humans extensively throughout history, for purposes from cultural beliefs and artful creations to algorithms and user experiences.

Invisible patterns are also in effect in everything that surrounds us.

And going back to the example from the start, with the user interaction and the banana, the pattern of energy that enters the system funnels through the main artery and spreads out to the back end or root system.

This pattern exists throughout the nature of energy flow, found across all environments from nature to technology.

These invisible patterns, found within design systems are useful to consider how energy works throughout the system.

As with the opening example of the tree performing the web request and response, the way that energy enters the system, flows through it, is from many different points of origin.

However, as it flows through the inputs, processes, and outputs of each element in the system, the form or flow of energy can change.

Each element is like a logic gate that determines whether the energy will pass through it or be terminated by it and what the process leading to this conclusion is.

As more energy flows through the components, the functional requirements may change.

This can be due to, requirements reflected as parameters of the environment, or as natural evolution due to the evolving interactions and connections with surrounding and accommodating elements.

Looking at the energy flow pattern in the three modes of input, process, and output, each element's energy requirements can be designated into these areas and optimized accordingly.

Inputs should optimise for process, and process should optimise for outputs, with outputs passing on what is required as an input for the next element in the chain of events.

This energy flow has a lot to do with the functionality that we are designing for, and therefore can be designated ahead of designing pixels to lead said pixels into a functional form based on the energy flow through components and across the system as a whole.

By combining natural patterns and energy flows with modern tools like AI and design systems, we can design the future of our design systems and their components now.

This could lead to a sort of space time or 4D design where components are designed with intent and evolution, adapting to usage and feedback loops and functional changes.

This particular area of this is what really interests me and I would love to keep talking about this more but I think it's nearly time for lunch I will leave you with this idea that we can really change how the future of design looks by considering that it is a permanent feature for now, and with that we can design for how the future of design actually looks.

There are some details that are just too much to cover for today, so I'll cover them on the website which I'll link soon.

Some of these are interactions and connections between elements across guilds or components, between zones and across the system, function stacking with companion elements and between other areas of the system, elemental companionship and how things can really create fantastic relationships, functional relationships, and relationships over time, how things respond to change and how we can design for this.

So I hope that has given you some food for thought around how we can get design inspiration from well made systems and work, that work for non digital paradigms, creating a culture of permanence where we can all share the benefits of thinking and working in such ways.

I think that this is particularly important when you consider automation and how we can leverage that technology with these systems to do really cool things with design.

So I'm creating some practical resources for this that can be included into existing design systems to provide the Permadesign framework within design tools.

And for more information on this to get the resources, the presentation, and also if you would like to get involved in the project, or continue the discussion, please head to permadesign.org.

And I look forward to hearing from you about how you've been inspired by this topic and have started using it.

Thank you for joining me to Design Permanent Culture.

PERMACULTURE DESIGN SYSTEMS FOR A DIGITAL LANDSCAPE

Mick Real, October 2023
The backdrop features a green leaf texture.

Question

Did you put the I in UI today?

Illustration of a hand holding a smartphone. The screen of the smartphone displays "Today's News: You had an interaction with a digital interface. Read more for just $$$".

Question

Did you eat a banana today?

A peeled banana illustration on the left side of the slide.

IS IT ON?

Is the app on?
Did the tree fall?

Illustration of a light purple switch labeled 'on' and 'off' with 'off' highlighted, and a red outline drawing of a tree.

USER INTERFACE TRANSACTION

  1. USER INTERACTION
  2. FRONT-END FRAMEWORK
  3. API REQUEST
  4. BACKEND FRAMEWORK
  5. MICROSERVICES
  6. CONNECTED SERVICES
  7. DATABASE LAYER
  8. DATA PROCESSING AND BUSINESS LOGIC
  9. RESPONSE GENERATION
  10. HTTP RESPONSE
  11. FRONT-END RENDERING
  12. USER INTERFACE FEEDBACK

Would You Like Banana?

YES!
An illustration of a hand holding a smartphone with a peeled banana image on the screen, against a dark, starry background.
An abstract digital illustration featuring symmetrical patterns of interconnected lines and dots radiating from a central line, resembling neural connections or a tree canopy, with a color scheme primarily of red, yellow, and dark green.
A diagram depicting the connection between frontend and backend processes. It features branching structures on both sides, with the left side labeled "USER INTERACTION" multiple times, and the right side labeled "DATA RESPONSE" multiple times. An icon representing a cycle with arrows is in the center, connecting the frontend and backend branches.
Diagram showing interconnected branches labeled with elements of frontend and backend processes.
A red tree illustration with symmetrical branches and roots on a yellow background.

SURFACE

SUBSTRATE

Illustration of a tree with labels indicating "CHLOROPHYLL," "PHOTONS," "CARBON DIOXIDE," and "OXYGEN" in the top part representing the surface. Below the surface, the roots are depicted with labels "CARBON," "MICROBES," "CARBOHYDRATE," and "MINERALS." There is also a circular arrow indicating a cycle around the base of the tree.
Illustration of a bare tree with intricate branches and roots, and a sun with a smiling face in the upper left corner.
A detailed illustration of a tree with bare branches perhaps at night. At the bottom left corner, there is a small stylized banana with a red tip.

MICK REAL

Designer & Creative

BACKGROUND

Web Design & Dev, UI & UX, Product Design

CURRENTLY

Flavour Designing, Farming, Freelancing & Fathering

WHERE TO FIND ME

MickReal.com @mickreal

Photograph of a bearded man with light brown hair, outdoors with a blurred natural background, surrounded by a gold brushstroke circle.

A presentation slide with a detailed garden design layout, showing various types of plants and tree placements. The image includes a legend differentiating between guilds, fruit trees, nut trees, existing trees, shrubs, herbaceous plants, nitrogen-fixing plants, and grasses. Additional smaller maps and a plant list are shown on the right side.
A map-like layout showing a detailed spatial design with various colored circles indicating different zones and labels like "G1", "G2", "Nut Tree", "Fruit Tree", and other categories. There are several small schematic drawings on the right side that further detail the design elements.
A landscape design layout showing different types of trees and plants with a water body, paths, and a building marked. A legend at the top indicates the types of plants. There are additional inset maps showing guilds and plant lists.
An illustrated map of green spaces with planting areas for different types of trees and greenery. There is a large mailbox in the foreground containing envelopes.

What we'll be talking about

PERMACULTURE

What it is and how it relates in a technological setting

PERMADESIGN SYSTEM

A concept for the digital landscape design

PATTERNS, ENERGY & THE FUTURE

Where can something like PDS take us?

Three geometrically patterned, colored icons align vertically on the left side of the slide.

HOW MUCH ENERGY WAS USED?

A peeled banana with three peels shown open, against a dark green background.

Holistically measure energy input and usage when a user interacts with a button user interface element.

Small profile image of a person in the bottom-left corner symbolising a chat of some sort
A detailed response from ChatGPT

Estimate the average energy input and usage resulting from a user clicking a button and receiving a rendered response on the screen.

Estimating the average energy input and usage resulting from a user clicking a button and receiving a rendered response on the screen can be quite complex, as it depends on various factors including the device's hardware, software efficiency, screen technology, and user behavior. Here's a rough breakdown of the energy usage components:

Long response form ChatGPT continues

USER INTERACTION TRANSACTION

522 millijoules

GROWING A BANANA

4,471,502,400 millijoules

An illustration of a hand pointing to a yellow button labeled "CLICK" and a partially peeled banana.

PERMACULTURE

Permanent Agriculture + Permanent Culture

  • Created by Aussies: Bill Mollison and David Holmgren
  • Conscious design and maintenance
  • Based on natural design and indigenous agricultural practices
  • Hackers of Natural Systems
Background image of a stylized tree with bare branches.

NATURAL DESIGN CAN

Create productive ecosystems.

Harmonise human requirements.

Access more potential energy.

A silhouetted tree with twisted branches set against a dark, moody background with faint landscape elements.

Natural Design Can

  • Create productive ecosystems.
  • Harmonise human requirements.
  • Access more potential energy.

Permaculture

Ethics & Principles

Earth Care
People Care
Fair Share

An illustration of a sprawling, leafless tree with an intricate network of branches against a red background.

EARTH CARE

The Earth is a living, breathing entity. Without ongoing care and nurturing there will be consequences too big to ignore.

Conscious co-creation, using sustainable and regenerative practices. Designing with evolution and permanence.

A stylized image of a branching red root system on a dark green background.

PEOPLE CARE

If people’s needs are met in compassionate and simple ways, the environment surrounding them will prosper.

Care for those using our creations and what it means to have people involved in our creations existence.

An image with abstract red tree root-like patterns at the top.

FAIR SHARE

We are provided with times of abundance which enables us to share with others.

Share the benefits of thinking and working with permanence and evolution and achieve more together this way.

Illustration of interconnected red tree roots on a dark green background, occupying the left side of the image.

Permaculture Principles

A stylized illustration of a tree with intricate, leafless red branches and a dark green background, symbolizing the interconnectedness and complexity of permaculture principles.

OBSERVE & INTERACT

Take time to carefully observe and understand the natural patterns and processes in your environment before making any interventions.

See what the digital landscape says, what functions are available and what the view and environment allow for.

Illustration of a red tree with a bird sitting on it, notes indicating bird sounds, and abstract red grass at the bottom of the image.

CATCH & STORE ENERGY

Harvest and store energy from the sun, wind, water, and other natural sources to use during times of need.

Kick off your next project with archived concepts. Recycling ideas. Retrofit the future today - use new styles and elements that could benefit ahead of shipping.

Illustration of a red tree with a small bird and a flower growing from the ground against a dark green background.

OBTAIN A YIELD

Design systems that provide multiple benefits and yields to meet the needs of both people and the environment.

Ship the product for wild use. See what the people using it think. Produce and harvest creator and consumer happiness.

Illustration of a yellow flower, a green caterpillar, and a red bird on a branch.

APPLY SELF-REGULATION & ACCEPT FEEDBACK

Monitor and adjust your systems based on feedback to maintain balance and harmony.

Watch for changes in energy requirements for inputs, process and outputs.

Illustration of red branches with yellow and red flowers against a green background.

USE & VALUE RENEWABLE RESOURCES AND SERVICES

Prioritise the use of renewable resources and ecosystem services to minimise waste and depletion of finite resources.

Use and contribute to Open Source and existing services for functionality. Leverage existing function to design form and contribute back for design input.

Abstract illustration of red branching coral-like structures on a dark green background with some yellow and green elements resembling grass and leaves in the bottom left corner.

PRODUCE NO WASTE

Aim to create closed-loop systems where waste from one element becomes a resource for another.

Elements are designed to evolve, rather than being replaced. Use existing projects as a base and get creative from there.

A whimsical illustration of a pink worm in the grass with a tree branch overhead, set against a dark background.

DESIGN FROM PATTERNS TO DETAILS

Emulate natural patterns and processes to guide your design decisions and create efficient and resilient systems.

Design from top level pattern to the finer details, applying this pattern while zooming into the most atomic elements.

Illustration of a spider web with a spider hanging from it on the left side. Near the bottom, there are red silhouettes of plants or grass. The web stretches from a red tree branch or structure on the top left corner of the slide. The background colors are primarily green and red.

INTEGRATE RATHER THAN SEGREGATE

Foster connections and interactions between different elements in the system to enhance their collective functioning.

Elements of function that complement each other, could hold a more beneficial relationship together. This could reduce development and maintenance, while also enhancing experiences.

Illustration of a red tree with a lizard and butterfly on a dark green background.

USE SMALL & SLOW SOLUTIONS

Start small, observe, and adapt gradually to avoid unintended consequences and allow for more thoughtful design.

Lean startup, MVP thinking - design the most succinct version, making small iterations with time and evolution.

A slide with a colorful illustration of various microorganisms depicted in bright colors on the left, and a winding, vein-like, red pattern above it on a green background.

USE & VALUE DIVERSITY

Incorporate diverse elements and species in your systems to enhance resilience and productivity.

Design for a broader audience and make it accessibly diverse.

Illustration of flora with various colorful flowers and a ladybug at the bottom, a green grasshopper on a red branch at the top, and a flying dragonfly in the middle of the slide.

USE EDGES & VALUE THE MARGINAL

The edges between different ecosystems often have unique properties and opportunities, which can be harnessed for increased productivity and biodiversity.

Use edge cases as design considerations, look at the marginal areas and interaction points that otherwise get overlooked.

Illustration of a red branching tree, a green frog on a yellow flower, various plants and flowers, and a flying dragonfly on a dark green background.

CREATIVELY USE & RESPOND TO CHANGE

Anticipate and adapt to change by embracing it as an opportunity for innovation and growth.

Look at regression testing as design inspiration. User metrics and feedback loops to support design decisions.

A cartoon frog is sitting on top of a red mushroom placed among red grass on the bottom left of the slide. There are red branches in the top left corner of the slide.

PERMACULTURE

ELEMENTS & FEATURES

An illustration of a large, twisted, leafless tree with many branches. The tree is dark green against a red background.

WATER

ENERGY FLOW

  • Flows across key areas
  • Catchment & distribution
  • Design the exit strategy

ACCESS

ACCESSIBILITY

  • Pathways to key functionality
  • Energy efficient & diverse
  • Low maintenance

STRUCTURES

FORM x FUNCTION

  • Design with function density
  • Energy capture & preservation
  • Energy generation & storage
Three illustrations at the top: a mountain landscape representing water, a signpost with a map representing access, and a house with a tent representing structures. Below these illustrations, there are detailed maps for each category to visually emphasize the points listed.

SWALES

Creating efficient pathways to features, ensuring users move through the site slowly and stay on page longer, interacting with forms and inputting their data energy.

TAKEAWAYS

Efficient pathways to features

Less input energy over time

Self sufficient energy capture & distribution

Top right image: A tree growing with a visible root system illustrating energy input and output.

Bottom right image: A map with pathways highlighted, showing efficient routes and energy distribution points.

Middle image: An illustration of a winding path over a stylised phone.

GUILDS

Guilds become self sustaining ecosystems over time where all elements that interact with and support this ecosystem are design considerations, creating a diversity and support for all that experience it.

TAKEAWAYS

  • Dense function stacking
  • Less input energy over time
  • Self sustaining ecosystem
Illustration of a mobile phone with various geometric shapes on the screen, placed in front of a landscape with trees, clouds, and small garden plots with different plants.

ZONES

Zones are used to divide the system into areas that have different input and output requirements and as a result perform different functions across the system, while having a designed intent around how they interact and connect with each other.

Use zones to give experiences logical places to live and prioritise design and maintenance input energy.

An illustration showing a diagram with interconnected zones labeled "ZONE 0", "ZONE 1", "ZONE 2", and "ZONE 3", depicting different input and output requirements for each zone.

ZONE 0

Is our home, built to be naturally efficient, utilising climatic effects to meet our needs.

ZONE 1

Surrounds our home and includes elements that need the most attention.

ZONE 2

Becomes more in tune with natural systems. It has food forests, small animals, and broad-scale crops.

ZONE 3

Much less attended and is meant for grazing animals and hardy trees.

ZONE 4

A designed forest left to grow wild, with only occasional pruning or harvesting.

ZONE 5

Wilderness, used for recreation and observation.

Same background illustration as the previous slide with colors inverted

DIGITAL DESIGN NOTES

  • The home view in app. Where the people enter, providing convenient pathways to other zones.
  • Primary navigation views. Top level pages that are frequently used and may sit in the main menu.
  • Back pages, content areas, blog posts. Don't require as much up keep as and hold a bulk of content.
  • Account pages, user input areas. Rarely change, resilient areas that allow for self managed use.
  • IM group, chat room, forum. Nearing the outer region an experience, often even external.
  • Other apps, sites or services. Anything that connects to the brand or experience of the product.
This text is overlaid on the previous slide.

ZONES

Zones are used to divide the system into areas that have different input and output requirements and as a result perform different functions across the system, while having a designed intent around how they interact and connect with each other.

Use zones to give experiences logical places to live and prioritise design and maintenance input energy.

The slide includes colorful illustrations of connected devices. One illustration shows a phone with labeled zones: Zone 0, Zone 1, Zone 2, and Zone 3. The phone has graphical features like shapes and icons on its screen. There is also a depiction of a connected network with nodes leading to a highlighted zone.

PERMACULTURE DESIGN

Permaculture design is a system of assembling conceptual, material, and strategic components in a pattern which functions to benefit life in all its forms.

Background illustration of various plant leaves and flowers in a simple line art style.

PERMADESIGN SYSTEM

Permadesign is a system for designating elemental and systemic form around the function defined by energy flow through digital landscapes, creating natural patterns of design, that are capable of evolving and benefit life in all its forms.

Various icons representing different tools and concepts are distributed around the text. On the right, there is an illustration of a desktop computer, a smartphone, a mouse, a keyboard, and a stylus. At the bottom, icons include a hand holding a pencil, gears, a file, a speech bubble, a video play button, a beaker, a ruler, an eye, an hourglass, a light bulb, and a thumbs-up.

EVOLUTIONARY DESIGN

Elements that have evolution built in are designed to handle future function, usage and environmental factors.

SHIP THIS

DESIGN THIS

A slide with a purple background featuring geometric shapes forming a butterfly and other polygonal shapes. There are two labels, one pointing to the butterfly labeled "DESIGN THIS" and another pointing to a polygonal shape in the bottom-left corner labeled "SHIP THIS".

ZONE00

DESIGN THE FUTURE OF PERMANENT CULTURE
Cartoon-style person looking at a wooden signpost that reads "DESIGN THE FUTURE OF PERMANENT CULTURE" against a colorful, abstract rainbow spiral background.

START USING IT TODAY

A dark background with small star-like dots scattered across the slide.

START BY STOPPING FIRST, LOOK AROUND

Silhouette of a Yeti against a starry night background.

START BY STOPPING FIRST, LOOK AROUND

Silhouette of a Yeti standing in front of a stylized sunset or sunrise with mountains at the bottom.

ANALYSE BY INPUT, PROCESS & OUTPUT

Silhouette of a Bigfoot-like creature standing in front of a setting sun with layered colors of orange and yellow, against a background of green mountains.

TOP LEVEL PATTERN TO THE FINER DETAILS

7.0 X
Silhouette of a Bigfoot-like creature standing against a backdrop of trees and hills with a large yellow sun setting in the background.
Illustration of a forest with trees and mountains in the background, a Bigfoot-like creature in the foreground, and birds flying in the sky.

SMALL ITERATIONS OVER TIME

Illustration of a forest and mountain background, featuring a silhouette of a person or creature walking, with birds flying in the sky.

ENERGY, PATTERNS & DESIGNING THE FUTURE

An illustration of mountains, a spaceship, stars, a planet, and a person floating in space.

PATTERNS

By stepping back, we can observe patterns in nature and society. These can form the backbone of our designs, with the details filled in as we go.

David Holmgren

PERMACULTURE PRINCIPLES: PRINCIPLE 7

ENERGY FLOW

An illustration showing an abstract representation of energy flow with yellow lines and red nodes on a dark green background. Small yellow dots are scattered throughout the image.

ENERGY FLOW

OVER TIME

Two representations of mobile phone screens filled with abstract shapes (circles, triangles, and rectangles) displaying a progression, symbolizing the concept of energy flow over time. Background includes various geometric shapes and patterns in a colorful design scheme.

ENERGY

Let form follow function, rather than trying to take a particular design and make it “work.”

John Allsopp

A DAO OF WEB DESIGN

Background features a digital grid with glowing nodes in a dark purple and magenta color scheme.

DESIGNING THE FUTURE

Design systems are going to go through a big shift over the next few years, and I think the best way to predict the future is to create it.

Andrew Pouliot
THE FUTURE OF DESIGN SYSTEMS IS AUTOMATED

MORE AREAS OF INTEREST

LINK COMING UP

  1. INTERACTIONS & CONNECTIONS
    between elements, across guilds or components, between zones and across the system
  2. FUNCTION STACKING
    with companion elements and between other areas of the system
  3. ELEMENTAL COMPANIONSHIP
    and how things can really create fantastic functional relationships
  4. RELATIONSHIPS OVER TIME
    how things respond to change and designing for that change
A classical statue of a seated figure wearing modern sunglasses, with a thought bubble containing arrows in a circular pattern surrounded by question marks.

Thank you

Free Resources

Extended Presentation

October 2023

Permaculture Design Systems for a Digital Landscape

New

Plus you get 3 ethics, 12 principles & design elements!

Head to PermaDesign.org

Find out more

MickReal.com

For the Permies

  • Complete your PDC
  • Aesthetically pleasing
  • Open source & free
People care, fair share
Get it now: Figma Design System; analyze energy flows; identify functional relationships; design the future today!