How to film an aesthetic demo of your prototype

How To Film An Aesthetic Demo Of Your Prototype How To Film An Aesthetic Demo Of Your Prototype

Lately, I started sharing my prototypes on Twitter(x, whatever) and have enjoyed the process. The positive feedback I received from viewers has been encouraging. Many people have been asking me how I create these videos. While I am not an expert in video production or skilled in this area, I have learned to quickly and easily make these demo videos with minimal resources and time.

Script

The script is probably the most crucial part of creating a video. I recommend starting from the script, as it will significantly influence your prototype and every aspect of the video.

Consider who will be watching your video and what their background may be. Put yourself in the shoes of a film director and envision the story you need to tell to convey your idea effectively. What narrative will resonate with your audience and fulfil their needs? By carefully crafting your script, you can communicate your message clearly and effectively.

Advertisement

I suggest keeping everything as straightforward as possible. Remember that you might change your mind during filming, and that’s fine. It has happened to me often when I thought something would look great, but it turned out poorly during production.

My general advice is to start by watching as many examples and sources of inspiration as possible. I admire how Notion and Arc promote their features—their team is doing a fantastic job. Also, look at video ads on YouTube, Instagram Reels or TikTok and think about what makes them catchy. Content creators put a lot of thinking into what’s engaging, so you can learn a lot from these examples. While watching movies, try to analyse what evokes emotions in you and why. What elements of the plot made you cry or laugh?

If your script is good, prototyping and production won’t require much effort.Source: https://x.com/NotionHQ/status/1773739884077105516

Let’s look at an example from Notion, where they effectively implemented the concept of cropping images. The video was simple in terms of production but conveyed an elegant story. This shows that a compelling narrative is sometimes all you need—there’s no need for a complex production process. You can watch the video here.

During this stage, I like to use Craft to create a small document with all the details I need to make the video. If I need to remember anything during recording, I write the script and read it until I memorize it.

Before moving to prototyping and production, I recommend preparing a simple to-do list to ensure a smooth workflow. Here are some questions to consider:

What feature or product am I promoting?Do I need a prototype, actual product, or coded prototype to complete it?Will I be using actual device recordings or screen recordings?Will I film one video, or will I stitch multiple clips together?What timing would be ideal for showcasing this feature? 5, 15 or 25sec?What to show in the background?Where will I film, and what is the location: at home or elsewhere?Is there a specific reference or mood board to follow for inspiration?

Addressing these questions can set realistic expectations for the production, ensure a successful outcome, and influence your prototype.

Prototype

It is recommended that your prototype be slightly exaggerated. For example, you can make the font size of some elements bigger or bolder. This is important because when recording on devices like an iPhone or MacBook, the content may appear smaller when viewed. By exaggerating elements, you ensure they are easily visible to viewers.

In addition, when recording a MacBook, I recommend cleaning up the screen by hiding the status bar and dock unless the status bar or dock is part of your demo. This will create a cleaner and more focused presentation.

Keep the flow of your prototype simple and focused on telling your story. Minimize the steps required to navigate the prototype to keep the viewer engaged.

When considering your colour decisions, it’s essential to consider how they fit within the context of your product. For instance, I typically prefer to create prototypes in light mode, as it makes them stand out, but your idea might require a prototype in dark mode instead. Don’t hesitate to change the iPhone’s wallpapers to enhance your prototype’s overall look.

Lastly, pay close attention to the text and content within your prototype. Ensure that it is accurate, relevant, and aligns with the overall message you are trying to convey.

During this step, I typically utilise Figma prototypes with simple, smart animations or Play for more complex animations to create a more seamless user experience. Sometimes, I use real apps or even a prototype in code to highlight a specific feature.

Production

This part of the process is the most enjoyable for me. Any camera or lens that suits your style can work well for creating videos. While almost any camera can produce good-quality videos, I have a strong preference for specific lenses and cameras.

My setup includes the Fujifilm X-T200 paired with the TTArtisan 35mm F/1.4 lens. For stability, I use the Velbon CX-888 tripod. Despite its affordable price, this tripod more than meets my needs for creating videos.

This setup offers some specific visual features that are unique to TTArtisan. One of the standout features is the excellent blur background it provides for any video you create. I prefer using manual focus, which may sound strange to some, but it is an easy way to control the focus of my videos.

When deciding where to film, I typically choose to film in my home because I have already set up my filming area, and it is quick for me to decide about the background. I like to add small details to the background to enhance the video’s concept. For example, when creating a promo for reminders in Craft, I placed a small clock in the background to reinforce the idea of reminders.

Source: https://x.com/viktor_pali/status/1784952844027646457

I recommend filming indoors rather than outdoors, as outdoor locations are too bright and can make it difficult for your phone or computer screen to be visible in the video.

For instance, in the promo video from Arc, the interface was barely visible against the bright background, which may have confused viewers. While the outdoor setting may seem inspiring, the story’s execution could have been better. Building a story around New York is understandable, but the screen’s visibility should not be compromised. If I were to film a promo video in London, I would choose a location with a view of Tower Bridge from a room with a window. This way, viewers could see both the iconic landmark and the interface.

Source: https://x.com/browsercompany/status/1786033063081742608

However, exceptions exist, as seen in a fantastic video from Daylight, where using a tablet outdoors worked exceptionally well for the product’s concept.

Source: https://x.com/daylightco/status/1808213555579441214

Here are a few recommendations for composition to use during shooting. One common mistake is trying to show everything without focusing on anything. Build your composition as clearly as possible. Remember, you are not promoting the iPhone. You are showing your app and your product, so showcase it proudly. If the main action occurs at the bottom of the iPhone, keep your focus there and crop out anything unnecessary. Stay focused and eliminate distractions.

Try to keep your timing as short as possible. There is no set time requirement, but a script of just 1 minute can work well. Typically, 15–25 seconds is a reasonable timeframe, but adjust according to your ideas.

Another tip is to choose a position where your hand can naturally and efficiently use the phone. Unnatural hand positions can look awkward on camera, so find a comfortable position for your hands to make the shot look amazing.

Editing

It might sound unbelievable, but I’m too lazy to edit my videos. I typically only make minor adjustments to composition and exposure. I find recording my video multiple times easier until I get a perfect shot rather than spending hours editing just one take. Focusing on capturing the right moments during filming can minimise the need for extensive post-production work.

Please remember that I am not an expert, and the following are my notes on how I create my small videos. I welcome any tips and tricks you may have, and if you have already tried following this guide, please share your results. Thank you!

You can reach out to me at muntyan.dana@gmail.com or on Twitter, and you can find the rest of me at danielamuntyan.com.

How to film an aesthetic demo of your prototype was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Advertisement