This post also appears at www.designfictiondaily.com

On Wednesdays I step out of the janky time machine and develop some design fiction with a handy set of prompt cards called The Work Kit of Design Fiction by my pals at The Near Future Laboratory.

Today I’m going to slide the curtain open and reveal some details behind my process from concept to execution for my paid subscribers. I will share my thought process, how I use AI, where I source templates and how I craft each post, from initial spark to final post.

First let’s start with this week’s prompts.

I like to start by forming the archetype and object in my head. So today, we’re dealing with a quick start guide for a water product. It has to have a swipe action, something to do with powerlessness, and it will live in a cyberpunk type of world.

I’ve already got some ideas floating in my head about some kind of futuristic Gatorade type of drink, but want to explore this a little further and see what kind of details I can discover with the assistance of various forms of AI.

For the rest of the post I am going to get into the weeds with GPT-3, ChatGPT, Midjourney, Photoshop/Illustrator and where I source my templates from.

For the price of a beer you can unlock the rest of this post to see how the tasty, high-protein design fiction sausage is made.

Using GPT-3 to generate ideas

I started by engaging the AI bots to see what they had to say about the cards.

I wrote a prompt that you can use in ChatGPT or GPT-3 proper (within the playground area) on OpenAI’s site.

OpenAI’s GPT-3 Playground with an custom prompt tailored to generate design fiction inspiration from the work kit cards.

You can copy and paste the supplied prompt (below) into GPT-3 or ChatGPT to have it generate some Design Fiction ideas yourself.

Note the highlighted areas in the above image, they are the only things you need to edit. The prompt is structured to accept anything within those card categories, but it doesn’t matter if you have a card, you can put in anything you want in here. In fact, you can edit this prompt at will to do whatever you want it to.

I used GPT-3 in Playground because it allows be to save prompt templates. I’m not interested in the conversational volley that ChatGPT affords at this point, but I will get into that later on.

Generate a “design fiction” based on a set of playing cards that have been selected. Each card represents a characteristic of this design fiction and must be considered when coming up with a result.

A design fiction is a tangible artifact from a possible future that can be examined to help prompt questions about what that future migth be like. Similar to how an archeologist might find an artifact from the past and must interrogate and investigate it to draw a conclusion of what it is, why it exists, who used it, and so on, a design fiction does the same, but using fictional artifacts from the future.

There are five cards to consider that define a Design Fiction artifact. The [archetype] card represents the physical form which the design fiction presents itself as. The archetype is evidence of the object, hinting to what it is and how it works. The [object] is what the archetype is referring to. It's the future fictional thing that is hinted at by the archetype. Describe it beyond just what it looks like. The [action] card represents the function of the object and what it does. Go into detail about its function, how it works, how it's used, and who might use it. The [attribute] card represents context to help paint a better picture of why the object is being used. And finally the [tone] card represents the mood, theme, environment the design fiction should convey. Express this using emotive language.

The following cards have been selected:
[archetype] is a quick start guide
[object] is water
[action] is swipe
[attribute] is powerless
[tone] is cyberpunk

Come up with a design fiction that takes all of the above into consideration.

The AI will generate a new response every time you ask it to. Here are a couple of responses I got from it during this exercise.

Response #1

The design fiction is a future cyberpunk world in which the majority of the population are powerless and unable to access resources like clean drinking water. To combat this problem, an organization has developed a quick start guide that is part of a larger system they call “Swipe”. This guide is a physical device that has been distributed to those in need, allowing them to access clean water from any source, no matter how contaminated. The Swipe guide consists of a small credit card sized device with a screen and a few buttons. It works by scanning the user’s fingerprints, then scanning for a source of clean water, and finally providing access to the clean water. The user then swipes the card over the source of water, activating a filtration system that purifies the water so it is safe to drink. The device also stores the user’s data, allowing them to access clean water whenever they need it. The overall tone of the design fiction is one of hope and resilience despite the harsh environment that the powerless face.

Response #2

The design fiction is a quick start guide for a future where water is scarce and hard to come by. It comes in the form of a slim, rectangular, handheld device with a smooth metallic surface. Its main feature is a slim, transparent touch panel that covers the entire face. The touch panel is designed to detect a swipe motion and then display a menu of options for the user to choose from. The options are all related to water conservation and will provide the user with instructions and advice on how to best use the water they have.

The device gives off a cyberpunk vibe, emphasizing the powerlessness of the user in this future world. The guide is an attempt to provide a sense of control and empowerment in a bleak environment. It conveys a sense of urgency and determination to use what little resources available in order to make the most of the situation. The guide will also serve to educate on how to preserve and conserve water in the future.

My evaluation of the responses

While I might not use the ideas above, I do like some of the pictures they paint. I like how in the first response it creates an organization called “Swipe” which is a nice lateral way of incorporating the card.

I’ve already got my mind set on a futuristic packaging concept and these two AI attempts confirm that I prefer my idea over the ones offered. If anything, AI is a great tool to validate your own ideas even if you don’t use what it generates.

Defining the Object

At this point in the process I know the object I want to create is going to be packaged water. In the spirit of moving quickly, my first stop is Envato Elements, a marketplace of stock images and templates for an all-you-can-eat subscription fee. This is my most used resource in all the design fiction work I do.

An example of some of the mockup results that come up for ‘water packaging’

These mockup templates come as layered PSDs with smart layers that can be edited to quickly achieve a high quality output with little fuss. Not all templates are created equally, some are easier to decipher than others. I’ve had to abandon ship many times on some files I’ve downloaded.

For this project, I’m choosing this spout pouch template. It’s got ample resolution and has a pretty realistic look it. Time to bring it into Photoshop and see how it’s built.

Protip: It’s always good to make sure that it can do what you want it to before you commit to the file. For instance, some template makers flatten shadows into the background layer making it difficult to swap out the background.

On the left is the mockup, on the right is the isolated smart object that makes up the package design. I like to copy the dimensions of the smart object and create a new Illustrator file that I use for layout purposes. You can design directly in Photoshop, but my preference is to do the bulk of the layout work in Illustrator.

Fishing for Design Inspiration with Midjourney

Before jumping into illustrator, I like to run some prompts through Midjourney as my source of inspiration rather than searching Pinterest.

I love using generative AI to come up with design ideas. The renderings are often excellent starting points. Midjourney has a knack for coming up with good colour combinations and a composition. Below is the prompt I used in Midjourney version 4.

product shot of a spout pouch water product from a cyberpunk world --ar 2:3

And here are the results it spat up.

I was feeling the bottom right example and decided to use it to inspire the colour and composition of my layout.

Scratching Below the Surface with ChatGPT

The way I decided to manifest the quick start guide archetype in this Design Fiction was to put it directly on the object. Rather than a booklet or cheat sheet, I wanted to incorporate an interface that could be touched and swiped directly on the packaging and chose to include the quick start guide just above it. Techno-smart packaging feels like it belongs in a cyberpunk world.

Before jumping into design I needed to firm up some details and enlisted ChatGPT in this process. I used ChatGPT here because of its ability to maintain a conversation. Unlike the tightly crafted prompt I used above, this part of the process is more improvisational.

I was digging part of the first suggestion of CyberHydrate, which I ended up using. I asked it to generate a list of more options to see if it could top the first one. I didn’t go with any of the secondary generations, but was happy to see that it did generate some interesting combinations.

I thought I’d ask it to come up with some additional information regarding the attributes the slider might affect but it didn’t generate anything I hadn’t already considered. Still, a good quick test to make sure I’m not missing out on anything obvious.

Time to Visualize

With a brain full of details it was now time to put this all together. I had a vision of a techy design with water and circuits to compliment the slider functionality. All I needed were some assets to cobble together.

I started by collecting a few more assets from Envato Elements.

Water drops and circuit vector graphics were used to assemble the layout.

Adobe Illustrator: After matching the smart object dimensions in Illustrator, I pasted the inspiration file in to sample colors and reference.

I also used a Google Font called Bungee that had a chonky futuristic look to it and paired it with DIN, a go-to in my type arsenal.

After about an hour of deconstruction and fiddling, I settled on a layout that I could import into Photoshop.

Final Illustrator layout exported as a PNG to be imported into Photoshop as a Smart Object.

The last thing to do was to incorporate it into the mockup template file and swap out the background. For that, I swung over to Shutterstock where I also have a subscription, and snagged a grocery story counter shot to replace the background with. I desaturated and darkened it a bit to help the water pouch stand out.

The Final Design Fiction Artifact

We arrive to the end of our journey today.

This process is by no means a cookie cutter solution. In fact it changes every time I produce something. Most of the time it’s 100% natty, free-range, organic human thinking. Occasionally I lean on AI to help bust through writer’s block. Ultimately it’s about the end product and how you get there doesn’t really matter.

A magician usually doesn’t reveal their secrets, but today I am.