Posted on

Beyond Algorithms: Skills Of Designers That AI Can’t Replicate

At the start of the Coronavirus pandemic, I led the redesign of a tablet app used by sales representatives of the world’s largest food & beverage company. Never having been a sales representative, nor having ever played one on TV, I was curious about their typical workday. Adapting the first rule of design — Know Thy User — our lockdown approach was to conduct video interviews. As soon as company restrictions allowed, I met two sales representatives at a local Walmart.

Masked and socially distant, I walked a mile in their shoes through the dairy, pet food, and freezer aisles. This single visit uncovered many insights that had not come up in the video interviews and online walkthroughs. I shared this with the team, spread across the world, and everyone could empathize with the sales representatives: juggling multiple devices and printouts, struggling to make technology work in extreme conditions like a low-lit walk-in freezer, and trying to work without hindering harried shoppers. The sales reps would repeat these tasks between twenty and thirty times a day, five days a week, which sounds about as fun as it is.

Our team used these insights to experiment with different concepts, refine them based on feedback from sales representatives, and launch a redesigned app that received glowing feedback from the representatives and praise from the company stakeholders.

Curiosity, empathy, and collaboration were some of the designer-like or designerly behaviors we used to transform the sales representatives’ experience. These behaviors are a few of the behaviors and skills that designers use throughout the design process. Design researcher and educator Nigel Cross first used the word designerly to refer to underlying patterns of how designers think and act.

Designers spend years learning technical design skills, and as they use those hard skills to do their jobs, their designs are impactful when they actively use these non-technical designerly skills and behaviors. Designerly skills and behaviors make us creative and innovative and distinguish us from machines and technology like Artificial Intelligence (AI).

Yes, the same AI that you can’t avoid reading or hearing about on social media or in the news. Stories and posts about people being equally worried about layoffs and AI taking over their jobs, and some even suggesting that AI is why those jobs won’t come back. Creators and people traditionally considered creative, like artists, writers, and designers, seem especially concerned about AI making them redundant. Guesstimates of when AI will perform tasks better than humans just add to the frenzy.

The assumption that AI will replace people is based on the premise that both have the same qualities, abilities, and skills. But that’s just not true. Artificial intelligence is simply technology that is taught to mimic human intelligence to perform tasks. It is trained on large amounts of data — by some estimates, the equivalent of a quarter of the Library of Congress, the world’s largest library.

AI is better than humans in certain tasks that involve processing and analyzing large amounts of data quickly, accurately, rationally, and consistently. Artificial Intelligence may create, but it can’t be creative. It cannot match humans in areas that rely on skills and behaviors that are distinctly human, like intuition, emotional intelligence, cultural context, and changing situations.

Humans are conscious beings with a subconscious mind that can influence decisions and change those decisions based on experience, context, environment, wisdom, and understanding. This takes us years, decades, and even a lifetime to learn and apply, and it cannot be programmed in machines, no matter how sentient they may appear to be. Not for the foreseeable future.

Being designerly takes thinking, feeling, and acting like a designer. I’ve been thinking about and observing what it means to be designerly, and by using six such skills and behaviors, I will discuss how humans have an advantage over AI. I used the head, heart, and hands approach for transformative sustainability learning (Orr, Sipos, et al.) to organize these designerly skills related to thinking (head), feeling (heart), and doing (hands), and offer ways to practice them.

Using our head, heart, and hands together to make a transformative difference is what distinguishes us from AI and makes us human, creative, and innovative.

Head

The skills, behaviors, and habits to help you think like a designer and create a designerly mindset include curiosity and observation.

Cultivate Curiosity

Curiosity is the desire to know. It is a pleasure to ask, explore, experiment, discover, learn, and understand. We see this relentless curiosity in small children, who explore everything novel around them. As they grow up, that curiosity starts getting stifled in many, partly because they are taught to look for an answer instead of exploring questions.

This curiosity stifler of focusing on the answer is what AI is programmed to do. AI is also limited by its knowledge and understanding of the world, unable to explore beyond those boundaries. Also, without physical senses, AI cannot experience the world and be curious about things we see, hear, touch, taste, and smell around us.

This gives us a leg up on AI if we can overcome other curiosity-stiflers like self-consciousness, the shame of not knowing, and the fear of ridicule.

Let’s deconstruct curiosity to understand different types of curiosity we can nurture and build in ways AI cannot. In the 1950s, British-Canadian psychologist Daniel Berlyne presented a model distinguishing between two types of curiosity: perceptual, based on stimulation, and epistemic, driven by a genuine desire for knowledge. He also distinguished between two types of behaviors to address that curiosity: diversive exploration, motivated by a need for novel stimulation or a desire to explore, and specific exploration, motivated by curiosity and a search for new information.

This gives us four dimensions of curiosity, which have their time and place, but the quadrant we are discussing lies at the intersection of the desire to explore and the desire for knowledge. Diversive-Epistemic curiosity is where people use the desire to explore and apply it to learning new things. TED Talks are an example of knowledge exploration, where people can learn about just about any topic they care to explore.

You can cultivate curiosity by being intentional in developing the joy of exploration. Set some time aside every day to learn something new, and pick topics that interest you. Start small and gradually increase the time you spend learning something daily as well as for expanding the topics. I would suggest starting with just 10–20 minutes a day. That’s enough time to watch a TED talk, read a book summary, or start learning a new skill. Reading multiple book summaries on a topic is an easy way to identify the next book you should read cover to cover over a few days or weeks.

Curious exploration broadens the mind to new ideas, perspectives, and approaches, lays the foundation for the cross-pollination of ideas, and leads to creative and innovative solutions.

Advantage: People

Notice & Observe

While often used as synonyms, noticing is seeing something for the first time, while observing is paying close attention to something or someone. Being creative begins with noticing what others have overlooked, followed by closer, intentional observation when warranted.

In traditional ethnography, researchers observe people and cultures in an immersive manner. Design ethnography or digital ethnography is not as extreme; researchers and designers only spend days or weeks observing users, instead of years. The operative word is observing — watching and listening. The payoff is that ethnography can inform and improve design decisions. You don’t need to wait for your next project to observe people. Instead, make it an everyday habit, and you will not only hone your powers of observation, but it will also gradually become second nature.

AI cannot do this because it relies on the limited data it is trained with, unlike people who have an unlimited ability to notice and observe new things all the time. Even if it could overcome that hurdle, without emotions and context, AI would not be able to understand the feelings and emotions involved in the people or situation being observed. We can observe a situation and understand the context and meaning behind it as we process what we are noticing and observing.

We can build our power of observation by taking the time to pay attention to people and their behavior. You can do this anytime — while you are in a coffee shop or waiting in the grocery checkout line. Get your nose out of that glowing rectangle, remove your headphones, and look around. While you may end up seeing others captivated by their own glowing rectangles, start observing the details:

  • What type of phones are they using?
  • Are they passively consuming content or actively interacting with a game or person?
  • What emotions do you notice?

When you start paying attention, you will be surprised by things you may have seen but not noticed or observed in the past. And the more you practice, the more natural it will become. Noticing and observing the world around you in new and different ways provides inspiration and helps reveal issues and patterns, leading to better ideas and solutions.

Advantage: People

Heart

The skills, behaviors, and habits to help you feel like a designer and create a designerly attitude include empathy and advocacy.

Be Empathetic

My favorite definition of empathy is by Roman Krznaric in his book, Empathy: Why It Matters, and How to Get It:

Empathy is the art of stepping imaginatively into the shoes of another person, understanding their feelings and perspectives, and using that understating to guide your actions.
— Roman Krznaric

There are three types of empathy, according to psychologists Daniel Goleman and Paul Ekman:

  1. Cognitive,
  2. Emotional,
  3. Compassionate.

The empathy that results in thinking, feeling, and doing are all important and have their place in our lives, but the empathy that results in doing, compassionate empathy, goes beyond understanding others and sharing their feelings by driving us to do what we can to help them. This helps us make a difference in people’s lives. I am talking about genuinely employing empathy, not doing it as lip service or checking a box off in the process.

Successful designers routinely use empathy in human-centered design. They start with an understanding of the people they are designing for by observing them and immersing themselves in their users’ environments. Designers then apply that deep understanding to design products and experiences that work for those users.

While AI can measure people’s emotions from their expressions and is being trained to mimic human emotions, AI machines and tools don’t have consciousness and cannot understand or experience emotions. AI also lacks personal, shared experiences that allow us to show empathy to varying degrees.

Even if you are not empathetic by nature, try building it over the coming days with one or more interactions with others:

  • Suspend judgment.
    It is difficult to be empathetic if you are mentally judging the other person. If you voice that judgment, you will not be able to be empathetic, and the other person may stop sharing with you.
  • Listen attentively with your eyes and ears.
    Engage more than one sense to listen actively so that you can respond deeply. Pay attention to what the other person is saying, not how you need to respond. Be completely present with the other person, putting aside our modern distractions.

Being empathetic takes practice for most of us. Be empathetic.

Advantage: People

Advocate For Others

User advocacy is at the heart of designerly skills and behaviors. The skills and behaviors of curiosity, observance, and empathy create a deep understanding of users and their needs, but that is only the beginning. User advocacy brings all of the above to life and turns that respect for the user into action to address their needs. It also shares that understanding with others involved so they, too, can identify with users.

Being a user advocate means representing the interests of users in an ocean of competing interests. A user advocate represents the user throughout the design process, giving the user a voice, bringing them to life, and making the impersonal user personal.

Without curiosity, observation, and empathy, AI is unable to use those skills and behaviors to be an advocate. AI also lacks the creativity to come up with solutions to address the needs of others. AI can be programmed to follow rules and guidelines to protect people, an increasingly important area of ethical AI. If you’ve been following the news, this has led to mixed results, sometimes going off the deep end in some instances. No points for guessing that AI cannot make ethical judgment calls on its own.

However, people can do that. And we can manifest it in design by doing what’s right for users. I previously wrote about principles for designers; two of them summarized below:

  • Do no harm.
    Your decisions may affect the minds, behavior, and lives of your users and others around them, so be alert and guard against misusing the influence of your designs. Ask yourself: Would you be comfortable with someone else using your design on you, your parents, or your child?
  • Be aware of your responsibility to your intended users, unintended users, and society at large.
    Accept appropriate responsibility for the outcomes of your design. During design, follow up answers to “How might we…?” with “At what cost?”

Remind yourself that you are not the user and use your knowledge of the user to represent the user when they are absent. Advocate for them.

Advantage: People

Hands

The skills, behaviors, and habits to help you act like a designer are brought to life through visual communication and collaboration.

Communicate Visually

Storytelling is an important skill that vividly paints a picture in people’s minds, driving them to action. It converts words to a visual that people will remember, but even then, different people may all visualize the same thing differently. This happens whether you’re listening to your favorite inspirational speaker or reading your favorite fiction author. No matter how painstakingly a speaker or author describes a character or a situation, chances are high that two people sitting right next to each other both have different images in their minds. However, when there is an accompanying image or visual, people are literally on the same page (or slide, graph), which slashes the risk of them imagining different things. That’s the power of thinking and communicating visually.

Not all designers are artistic, but you don’t have to be artistic to be a visual thinker or communicator. Even a rough sketch on a whiteboard or a notepad can often communicate information faster than the written or verbal form. The aim is to make ideas tangible quickly, to get to the right idea faster. User researchers and designers commonly use visualizations to help them make sense of data and come up with new ideas.

Without physical senses, AI cannot think or communicate visually. Without emotions, the ability to understand context, and creativity, AI cannot ‘read the room’ or come up with ideas outside its dataset and communicate outside its current language abilities, making visual communication impossible. However, people can use AI as a tool to communicate visually, especially with tools that convert text prompts to images.

Next time you describe something, instead of writing a page of instructions or talking it out, use a quick sketch. Describing a process? Boxes and arrows are very powerful. Talking about a screen or two? A rough layout, highlighting the important parts, along with an arrow showing how you get from one to another, is more powerful. Or a quick screen recording. Sketching not your thing? Use images. I’ve been known to use LEGO photography in my articles and presentations. You can also mock up something without advanced design tools. For instance, I had a non-designer boss who communicated visually using PowerPoint. And if you are in the mood to explore and experiment, try one of the many AI text-to-image generators.

Show. Don’t only tell.

Advantage: People

Collaborate

We can achieve much more, much faster, working together. It is uncommon for a single person to come up with the best solution by themselves. Gone are the days of the lone designer working on a solution by themselves. No single person or discipline has the answer to all problems, design or otherwise. It usually takes a team from different disciplines and backgrounds to solve big problems.

A multi-disciplinary team working together toward a common goal is an example of collaboration. This brings different perspectives into the creation process, from idea generation to providing feedback and validation during the creation process.

Collaboration relies on understanding and navigating social dynamics. While some people struggle with that, AI fails. Ditto for the ability to negotiate or compromise. Some people struggle with that too, but AI cannot unless specifically programmed to. Collaboration also requires the ability to adapt based on live inputs, feedback, or the situation, which traditional AI has limited capability to do beyond its training phase.

That said, AI can support collaboration if you think about people collaborating with AI tools. We’ve seen how AI tools can generate designs, logos, layouts, code, write content, do homework, and generate legal documents. But there are enough examples of it being plain wrong, which is why we should use them as assistants in our workflow.

AI tools can support the efforts of designers and researchers by reducing manual human effort (e.g., transcribing), making people more efficient and saving time (e.g., text-based video editing), providing machine learning-based insight (e.g., attention prediction), and augmenting human effort (e.g., AI evaluation). Just remember that AI is not perfect, and there are plenty of mistakes and errors, as shown below (I’m not India-based, did not write The UX Book, and never taught at the schools mentioned).

Next time you are working on a project, get others involved. These could be different departments, different specialties, different backgrounds, and, where appropriate, even customers — maybe even AI.

Advantage: People

Conclusion

I’ll use an analogy from the restaurant industry of chefs and cooks to draw parallels between humans and AI. Chefs can cook meals by themselves, but they are more effective when they focus on the strategic work of planning the menu, overseeing the cooks who tactically follow recipes, sometimes improvising, and applying the finishing touches before the meal is served to customers. Robots have replaced parts of what cooks do and technology that may suggest recipes and meals, but it still needs the chef to make the final decisions.

Artificial Intelligence is changing the way we work and live, making us more efficient. As designers, we can use AI to support ideation, analyze data, generate variations, and predict behavior based on patterns. This will free us up to focus on more strategic aspects of design, using the designerly skills above which are impossible to duplicate, and for which people have the advantage over AI. We can use AI to make us more efficient and allow us to do what we do best — understand our users, stakeholders, and real-world constraints and then collaborate with others to design successful solutions. What we do won’t change as much as how we do it, with AI augmenting, instead of replacing us.

Advantage: People

AI cannot be trained to mimic these designerly skills the way we can practice and develop them because it is not conscious, cannot adapt, and does not have the experiences, emotions, or intuition that we have. AI can artificially mimic some but cannot match human abilities in these areas. Skills like curiosity, observation, empathy, advocacy, visual communication, and collaboration are key non-technical skills to help us use the head, heart, and hands together to be more designerly and thrive in a world of AI.

Resources:

Links

Books

Posted on

CSS in 3D: Learning to Think in Cubes Instead of Boxes

My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio.

It wasn’t until later that I got to tackle and find my love for the front end. And exploring CSS came later. When it did, it was around the time CSS3 was taking off. 3D and animation were the cool kids on the block. They almost shaped my learning of CSS. They drew me in and shaped (pun intended) my understanding of CSS more than other things, like layout, color, etc.

What I’m getting at is I’ve been doing the whole 3D CSS thing a minute. And as with anything you spend a lot of time with, you end up refining your process over the years as you hone that skill. This article is a look at how I’m currently approaching 3D CSS and goes over some tips and tricks that might help you!

Everything’s a cuboid

For most things, we can use a cuboid. We can create more complex shapes, for sure but they usually take a little more consideration. Curves are particularly hard and there are some tricks for handling them (but more on that later).

We aren’t going to walk through how to make a cuboid in CSS. We can reference Ana Tudor’s post for that, or check out this screencast of me making one:

At its core, we use one element to wrap our cuboid and then transform six elements within. Each element acts as a side to our cuboid. It’s important that we apply transform-style: preserve-3d. And it’s not a bad idea to apply it everywhere. It’s likely we’ll deal with nested cuboids when things get more complex. Trying to debug a missing transform-style while hopping between browsers can be painful.

* { transform-style: preserve-3d; }

For your 3D creations that are more than a few faces, try and imagine the whole scene built from cuboids. For a real example, consider this demo of a 3D book. It’s four cuboids. One for each cover, one for the spine, and one for the pages. The use of background-image does the rest for us.

Setting a scene

We’re going to use cuboids like LEGO pieces. But, we can make our lives a little easier by setting a scene and creating a plane. That plane is where our creation will sit and makes it easier for us to rotate and move the whole creation.

For me, when I create a scene, I like to rotate it on the X and Y axis first. Then I lay it flat with rotateX(90deg). That way, when I want to add a new cuboid to the scene, I add it inside the plane element. Another thing I will do here is to set position: absolute on all cuboids.

.plane {
  transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translate3d(0, 0, 0);
}

Start with a boilerplate

Creating cuboids of various sizes and across a plane makes for a lot of repetition for each creation. For this reason, I use Pug to create my cuboids via a mixin. If you’re not familiar with Pug, I wrote a 5-minute intro.

A typical scene looks like this:

//- Front
//- Back
//- Right
//- Left
//- Top
//- Bottom
mixin cuboid(className)
  .cuboid(class=className)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++
.scene
  //- Plane that all the 3D stuff sits on
  .plane
    +cuboid('first-cuboid')

As for the CSS. My cuboid class is currently looking like this:

.cuboid {
  // Defaults
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(0, 0, 5vmin);
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

Which, by default, gives me something like this:

Powered by CSS variables

You may have noticed a fair few CSS variables (aka custom properties) in there. This is a big time-saver. I’m powering my cuboids with CSS variables.

  • --width: The width of a cuboid on the plane
  • --height: The height of a cuboid on the plane
  • --depth: The depth of a cuboid on the plane
  • --x: The X position on the plane
  • --y: The Y position on the plane

I use vmin mostly as my sizing unit to keep everything responsive. If I’m creating something to scale, I might create a responsive unit. We mentioned this technique in a previous article. Again, I lay the plane down flat. Now I can refer to my cuboids as having height, width, and depth. This demo shows how we can move a cuboid around the plane changing its dimensions.

Debugging with dat.GUI

You might have noticed that little panel in the top right for some of the demos we’ve covered. That’s dat.GUI. It’s a lightweight controller library for JavaScript that super useful for debugging 3D CSS. With not much code, we can set up a panel that allows us to change CSS variables at runtime. One thing I like to do is use the panel to rotate the plane on the X and Y-axis. That way, it’s possible to see how things are lining up or work on a part that you might not see at first.


const {
  dat: { GUI },
} = window
const CONTROLLER = new GUI()
const CONFIG = {
  'cuboid-height': 10,
  'cuboid-width': 10,
  'cuboid-depth': 10,
  x: 5,
  y: 5,
  z: 5,
  'rotate-cuboid-x': 0,
  'rotate-cuboid-y': 0,
  'rotate-cuboid-z': 0,
}
const UPDATE = () => {
  Object.entries(CONFIG).forEach(([key, value]) => {
    document.documentElement.style.setProperty(`--${key}`, value)
  })
}
const CUBOID_FOLDER = CONTROLLER.addFolder('Cuboid')
CUBOID_FOLDER.add(CONFIG, 'cuboid-height', 1, 20, 0.1)
  .name('Height (vmin)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'cuboid-width', 1, 20, 0.1)
  .name('Width (vmin)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'cuboid-depth', 1, 20, 0.1)
  .name('Depth (vmin)')
  .onChange(UPDATE)
// You have a choice at this point. Use x||y on the plane
// Or, use standard transform with vmin.
CUBOID_FOLDER.add(CONFIG, 'x', 0, 40, 0.1)
  .name('X (vmin)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'y', 0, 40, 0.1)
  .name('Y (vmin)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'z', -25, 25, 0.1)
  .name('Z (vmin)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'rotate-cuboid-x', 0, 360, 1)
  .name('Rotate X (deg)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'rotate-cuboid-y', 0, 360, 1)
  .name('Rotate Y (deg)')
  .onChange(UPDATE)
CUBOID_FOLDER.add(CONFIG, 'rotate-cuboid-z', 0, 360, 1)
  .name('Rotate Z (deg)')
  .onChange(UPDATE)
UPDATE()

If you watch the timelapse video in this tweet. You’ll notice that I rotate the plane a lot as I build up the scene.

That dat.GUI code is a little repetitive. We can create functions that will take a configuration and generate the controller. It takes a little tinkering to cater to your needs. I started playing with dynamically generated controllers in this demo.

Centering

You may have noticed that by default each cuboid is half under and half above the plane. That’s intentional. It’s also something I only recently started to do. Why? Because we want to use the containing element of our cuboids as the center of the cuboid. This makes animation easier. Especially, if we’re considering rotating around the Z-axis. I found this out when creating “CSS is Cake”. After making the cake, I then decided I wanted each slice to be interactive. I then had to go back and change my implementation to fix the rotation center of the flipping slice.

Here I’ve broken that demo down to show the centers and how having an offset center would affect the demo.

Positioning

If we are working with a scene that’s more complex, we may split it up into different sections. This is where the concept of sub-planes comes in handy. Consider this demo where I’ve recreated my personal workspace.

There’s quite a bit going on here and it’s hard to keep track of all the cuboids. For that, we can introduce sub-planes. Let’s break down that demo. The chair has its own sub-plane. This makes it easier to move it around the scene and rotate it — among other things — without affecting anything else. In fact, we can even spin the top without moving the feet!

Aesthetics

Once we’ve got a structure, it’s time to work on the aesthetics. This all depends on what you’re making. But you can get some quick wins from using certain techniques. I tend to start by making things “ugly” then go back and make CSS variables for all the colors and apply them. Three shades for a certain thing allows us to differentiate the sides of a cuboid visually. Consider this toaster example. Three shades cover the sides of the toaster:

https://codepen.io/jh3y/pen/KKVjLrx

Our Pug mixin from earlier allows us to define class names for a cuboid. Applying color to a side usually looks something like this:

/* The front face uses a linear-gradient to apply the shimmer effect */
.toaster__body > div:nth-of-type(1) {
  background: linear-gradient(120deg, transparent 10%, var(--shine) 10% 20%, transparent 20% 25%, var(--shine) 25% 30%, transparent 30%), var(--shade-one);
}
.toaster__body > div:nth-of-type(2) {
  background: var(--shade-one);
}
.toaster__body > div:nth-of-type(3),
.toaster__body > div:nth-of-type(4) {
  background: var(--shade-three);
}
.toaster__body > div:nth-of-type(5),
.toaster__body > div:nth-of-type(6) {
  background: var(--shade-two);
}

It’s a little tricky to include extra elements with our Pug mixin. But let’s not forget, every side to our cuboid offers two pseudo-elements. We can use these for various details. For example, the toaster slot and the slot for the handle on the side are pseudo-elements.

Another trick is to use background-image for adding details. For example, consider the 3D workspace. We can use background layers to create shading. We can use actual images to create textured surfaces. The flooring and the rug are a repeating background-image. In fact, using a pseudo-element for textures is great because then we can transform them if needed, like rotating a tiled image. I’ve also found that I get flickering in some cases working directly with a cuboid side.

One issue with using an image for texture is how we create different shades. We need shades to differentiate the different sides. That’s where the filter property can help. Applying a brightness``() filter to the different sides of a cuboid can lighten or darken them. Consider this CSS flipping table. All the surfaces are using a texture image. But to differentiate the sides, brightness filters are applied.

Smoke and mirrors perspective

How about shapes — or features we want to create that seem impossible — using a finite set of elements? Sometimes we can trick the eye with a little smoke and mirrors. We can provide a “faux” like sense of 3D. The Zdog library does this well and is a good example of this.

Consider this bundle of balloons. The strings holding them use the correct perspective and each has its own rotation, tilt, etc. But the balloons themselves are flat. If we rotate the plane, the balloons maintain the counter plane rotation. And this gives that “faux” 3D impression. Try out the demo and switch off the countering.

Sometimes it takes a little out-of-the-box thinking. I had a house plant suggested to me as I built the 3D workspace. I have a few in the room. My initial thought was, “No, I can make a square pot, and how would I make all the leaves?” Well actually, we can use some eye tricks on this one too. Grab a stock image of some leaves or a plant. Remove the background with a tool like remove.bg. Then position many images in the same spot but rotate them each a certain amount. Now, when they’re rotated, we get the impression of a 3D plant.

Tackling awkward shapes

Awkward shapes are tough to cover in a generic way. Every creation has its own hurdles. But, there is a couple of examples that could help give you ideas for tackling things. I recently read an article about the UX of LEGO interface panels. In fact, approaching 3D CSS work like it’s a LEGO set isn’t a bad idea. But the LEGO interface panel is a shape we could make with CSS (minus the studs — I only recently learned this is what they are called). It’s a cuboid to start with. Then we can clip the top face, make the end face transparent, and rotate a pseudo-element to join it up. We can use the pseudo-element for adding the details with some background layers. Try turning the wireframe on and off in the demo below. If we want the exact heights and angles for the faces, we can use some math to workout the hypoteneuse etc.

Another awkward thing to cover is curves. Spherical shapes are not in the CSS wheelhouse. We have various options at this point. One option is to embrace that fact and create polygons with a finite number of sides. Another is to create rounded shapes and use the rotation method we mentioned with the plant. Each of these options could work. But again, it’s on a use case basis. Each has pros and cons. With the polygon, we surrender the curves or use so many elements that we get an almost curve. The latter could result in performance issues. With the perspective trick, we may also end up with performance issues depending. We also surrender being able to style the “sides” of the shape as there aren’t any.

Z fighting

Last, but not least, it’s worth mentioning “Z-fighting.” This is where certain elements on a plane may overlap or cause an undesirable flicker. It’s hard to give good examples of this. There’s not a generic solution for it. It’s something to tackle on a case-by-case basis. The main strategy is to order things in the DOM as appropriate. But sometimes that’s not the only issue.

Being accurate can sometimes cause issues. Let’s refer to the 3D workspace again. Consider the canvas on the wall. The shadow is a pseudo-element. If we place the canvas exactly against the wall, we are going to hit issues. If we do that, the shadow and the wall are going to fight for the front position. To combat this, we can translate things by a slight amount. That will solve the issue and declare what should sit in front.

Try resizing this demo with the “Canvas offset” on and off. Notice how the shadow flickers when there is no offset? That’s because the shadow and the wall are fighting for view. The offset sets the --x to a fraction of 1vmin that we’ve named --cm. That’s a responsive unit being used for that creation.

That’s “it”!

Take your CSS to another dimension. Use some of my tips, create your own, share them, and share your 3D creations! Yes, making 3D things in CSS can be tough and is definitely a process that we can refine as we go along. Different approaches work for different people and patience is a required ingredient. I’m interested to see where you take your approach!

The most important thing? Have fun with it!

The post CSS in 3D: Learning to Think in Cubes Instead of Boxes appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.