Render
Compare

TL:DR

This tool is designed to compare different versions of the Render engine, So that there is a way to discern the between changes for each render versions.

Overview

My husband is a programmer, as part of his role as a developer, he was asked at his company (The company provides an unusual 3D video rendering) to build a tool that compares different versions of render engine.

Project Specs

Create
Role
Year
Tools

Personal Project
UX/UI Designer
2018
Figma, AE

What is render?

Rendering is the process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of a computer program. The resulting image is referred to as the render. Rendering is used in architecture, simulators, video games, movies and television visual effects and design visualization.
3D rendering, the last step in an animation process, gives the final appearance to the models and animation with visual effects.

The Challenge

There was no tool to compare the 2 Render engines.

The Goal

Compare between different versions and 2 render engines that render the same content.

The Value

The User will gain a sense of control and will save precious time.

Rendering  Market Research

I researched the existing render software market understating the 3D world and check the tools for comparison to understand how they are built, what the importance things and their visibility look like.

Some of the software I researched

The compression market tools

Is helping compare between folders, files, presenting differences in a visual text/images that is easy to understand and handle. with compression tool is highly useful for determining what has changed between project versions, and then merging changes between versions.

Users Interviews Research

I spoke with Programmers, Designer, Architecture, Engineering aged 30-50 who are working with different rendering software.

42%

I spoke with Programmers, Designer, Architecture, Engineering aged 30-50 who are working with different rendering software.

20%

is the rapid growth of the gaming industry that increasing the demand for 3D rendering market.

Userflow

The features

Image Difference

Third window shows the differences between the two renders of the same frame.

Time Line

Shows the differences between the frames.

Zoom +/-

The user can zoom in and out to have a better vision of the image.

Style Guides

Typography

Font Family

Roboto Light
Roboto Regular
Roboto Medium
Roboto Bold

Colors Palette

Primary

#091D2B

#0B2130

#D4D4D3

Secondary

#3cd5a9

#f8c846

#d74a5a

Icons

Status