2

3D prototyping tools for 2D designers

 3 years ago
source link: https://uxdesign.cc/3d-prototyping-tools-for-2d-ux-designers-220493c98bd8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

3D prototyping tools for 2D designers

Photo by Ali Pazani, from Pexels

Although your previous UX experience may be entirely based on 2D and you have not been particularly interested in games or 3D animations, there has never been a better time to pay more attention to 3D prototyping.

1. Microsoft made a deal with the US military that could be potentially worth up to approximately 22 billion dollars to provide customized Hololens for both training and combat. This serves as a huge validation of the commercial viability of mixed reality products.

2. Rumors are Apple is preparing to release its AR glasses within 2–3 years that look just like normal glasses and less costly than iPhone. As iPhone has done in the past, this has the potential to change the world.

3. Virtual real estate is selling like hot cakes on several metaverse platforms. Perhaps having a presence in 3D metaverse will become as important as having it in the physical world in the near future.

I began to learn 3D tools like Blender, C4D, and 3D Max years ago as a hobby. I thought 3D was all about fancy visuals, but quickly realized it would take too much time to master the tools, so I abandoned them. A recent 3D project our team undertook totally changed my take on the issue. 3D is about a way of seeing and thinking as much as it is about visuals, and you don’t necessarily have to learn complex software to communicate your ideas. Tools without steep learning curves exist and work well even for remote teams. I’d like to share information on tools that can help designers who had no previous experience in 3D to create 3D scenes quickly and easily.

Every 3D project is different. It can be VR, AR, WebXR or an app. You can choose from a variety of 3D modelling and animation tools in conjunction with Unity and Unreal to set up your pipeline. The tools introduced here are specific to the needs of the recent project our team undertook, which was about building a Proof of Concept of a 3D real-time multiplayer simulation platform, specific for doctors. Our early-stage 3D prototyping was primarily about character creation and animation.

Good old sketch goes a long way.

Building a 3D virtual space involves many steps, including setting up characters, actions, cameras, and lighting. Sounds familiar? It should — designing interaction in a 3D space has some similarities to film-making. It is no coincidence that some portion of Mozilla’s WebXR guidelines read like cinematography lessons. Therefore, tools used for video production like a storyboard can be equally useful for 3D prototyping. Even in a stick figure form, a sketch is a great way to get your ideas across especially to your team members.

A rough sketch created using Procreate and Milanote to break down how our first prototype of a breast exam simulation can function.
Outlined above, a rough sketch created using Procreate and Milanote to break down how our first prototype of a breast exam simulation can function.

If you can sketch, you can animate, too (with enough time and patience). Frame by frame animations can be made using Photoshop or any other tools available on iPad such as Procreate and FlipaClip. If we weren’t in a remote setting, we could have used other means of prototyping such as a diorama, acting or bodystorming to think and communicate in 3D. However, they are less effective on Zoom than a simple basic animation. For instance, at the beginning of the project, we were not fully aware of how many permutations of doctor-patient positions there are for a breast examination. I wanted to internally discuss how to cover all of the cases with a minimum amount of animations to make the most of our resources. Making generic animation can be economical, how can we make it adapt to different positions and postures of the doctor/patient avatar? It was challenging to describe the issue via Zoom, but as soon as I showed the below animation, the team immediately understood the point I was trying to make. My main takeaway from all of this was that even if the animation is rudimentary if it helps the team communicate what kind of issue you want to discuss, it serves the purpose.

A frame by frame animation of a doctor -patient interaction made using Procreate and Powerpoint
A frame by frame animation made using Procreate and Powerpoint

If you happen to be good at perspective drawing, you can even make an AR and VR prototype using your paper drawing as illustrated in this video by Professor Michael Nebeling (11:30) at the University of Michigan. Drawing is one of my hobbies and I am glad that I have yet another reason to spend more time doing what I love. However, even if drawing is not your cup of tea, there are other ways to quickly create a 3D scene outlined below.

Character Creators

Our team had to figure out the required actions for a breast exam from reference materials and subject matter expert interviews and get them confirmed by physicians. If this were not a sensitive exam and if we weren’t in the middle of the pandemic, we could have taken a photo of one of the team members doing the required poses. However, the actions included taking off clothes, so a photo was not an option. Drawing poses typically requires too much time unless you are a professional. I sought advice from a peer who had experience working as an animator and he recommended using Character Creators (CC) by Reallusion. CC is sophisticated enough to be used by professional animation studios but easy for a novice like me to create a 3D avatar and have it carry out the necessary poses with appropriate facial expressions in under an hour or two.

A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3
A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3
A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3

One of the most attractive aspects of the software was how easy it was to make the avatar dress and undress. Making a 3D model dress and undress and getting all of the materials and physics right using other 3D tools like Blender is near to impossible for non-professionals to accomplish within a few months. Our team did not have any professional 3D modellers and animators and the project was only 3 month-long. We ended up purchasing CC and it served the purpose well. It was not only suitable for quick prototyping for a novice but also can be exported to be rigged and animated using Blender so that it can be integrated for final production in Unity.

The catch is if you want to animate the avatar and export it with the animation directly to Unity, you need to purchase another software by Reallusion called iClone plus a pipeline tool 3dxChange that is considerably more expensive than CC and iClone combined! Furthermore. while the default version of CC offers decent customization options of changing facial expressions, body shapes & clothing of avatars, If you are serious about customization, you have to pay for the right hair, skin and clothing. All in all, Character Creator is an excellent tool with beautiful, customizable characters suitable for both rapid prototyping and final production, but keep an eye out for hidden costs. Similarly, DAZ 3D offers easy customization of avatars, but it comes with hidden costs as well and less aesthetically pleasing default models. Unreal offers free, insanely realistic characters called Metahumans, but they can only be used in Unreal projects and still seems to be in beta.

Cheaper Alternatives — Manikin vs. Clipstudio vs. Storyboarder

Character Creator 3 currently costs USD 199 and the free trial only lasts only for a month. I expanded on my research on the available tools after my project and came across a few alternatives.

  • Manikin is a quick and simple pose reference tool for artists. It is suitable only for quick, low-fidelity character prototyping. Props like furniture are not provided. However, the iPad version offers the most straightforward and easy-to-use UIs for posing characters in a 3D space with decent lighting. The free version offers basic poses like standing, sitting and walking (believe me, it takes effort and time to pose a character from scratch however intuitive the UI is). The app says the paid version (USD 5.49) unlocks a whole array of objects like furniture and over 200 animations.
A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3
A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3
A screenshot of a Manikin iPad version. Manipulating the cute Manikin with fingers is fun
  • Clipstudio Paint is a drawing and painting tool mostly used for comics. The Pro version costs USD49.99 and the EX version USD219. It comes with a cool 3D feature that allows for avatar posing and background creation to make comic artists’ life easier. The paid version seems to provide 3D objects like desks or cars. The problem is 3-month trial version does not even provide basic poses like sitting and standing. Manipulating the avatar is on the easy side but I find Manikin’s avatars on iPad easier to use.
A screenshot of Clipstudio Paint trial version
A screenshot of Clipstudio Paint trial version
A screenshot of Clipstudio Paint trial version. Posing a character from scratch is not easy
  • Storyboarderby Wonder Unit claims that making “visualizing a story as fast you can draw stick figures.” They are not exaggerating. This free software (yes, free without any hidden costs!) has amazingly useful features, such as making a quick storyboard with fully rigged 3d characters and directly editing it in Photoshop or turning it into a GIF file. It also lets you include a sound file for each scene so that you can easily make animatics without leaving the software. You can even open the scene in VR (if you have a headset, of course) and test the scenes in a VR space. Posing avatars using the feature ‘Shot Generator’ is intuitive and quick although it takes practice to fine-tune the details. It comes with variety of default poses (way more than those offered by Manikin) and 3D assets like furniture, trees and cars. You can make you own poses and save them for later use. Cameras and the items on the scene can be directly manipulated using the top left panel. You can add multiple cameras to quickly generate scenes from different angles. Importing your own 3D assets to the scene does not seem to be supported and there is no iPad version yet. Still, it is an incredibly useful and high-quality free software. Kudos to designers and developers at Wonder Unit!
A screenshot of a 3D scene made by Storyboarder
A screenshot of a 3D scene made by Storyboarder
It took me less than an hour to get the hang of Storyboarder and make low-fidelity 3D scenes

Figma

You can use traditional 2D prototyping tools like Figma to prototype for 3D albeit with limitations. You can make 3D scenes using the above-mentioned tools and make it look like the avatar is doing a certain action when you click a certain button. Our project was building a real-time multiplayer platform where two users see different UIs at the same time, so we didn’t choose to use Figma, but if it were not for multiplayer mode, we would have used it. Figma does offer capabilities to make a prototype for VR as well, but you need 360-degree images to make the prototype. Therefore, you either have to draw it (which can be more challenging than learning Unity) or take a 360-degree picture of physical environment similar to what you envision (which can be difficult too during the pandemic), or create a 3D scene in Unity and take 360 screenshots of the scene using a plugin (you need to know how to make a basic scene in Unity to use Figma this way).

Think and communicate in 3D

In summary, it is very likely that design in the future is not confined to 2D screens. Even if it is in 2D, we may need to pay more attention to the context of the space around the UIs. Learning 3D tools like Blender and Unity have steep learning curves but you don’t have to master them like a 3D artist or a Unity developer to expanding on your way of thinking. Easier tools that can help ideate and communicate in 3D can be a good starting point to prepare for the future.

The UX Collective donates US$1 for each article published on our platform. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK