Using 3D renders to increase the aesthetics of your sketch

Using 3D renders to increase the aesthetics of your sketch

Using 3D renders to increase the aesthetics of your sketch

How to create unique UI content for Sketch using 3D renderings

If you are a designer, then you understand the importance of icons and visuals in your design. You also probably know of the frustrations of creating icons and visuals which are unique to a specific genre. True, there are some icons which are pretty universal such as the email icon or the home button. Yet, even with these, as a designer you should strive to find creative ways in which to present the information. My suggestion is to go 3D.

Why use 3D models in sketch

Using a 3D model in your project gives the page a bit of depth and encourages user interaction. While the standard 2D object may have a bevel or a gradient which captures the eye, there is something about giving your target audience a three-dimensional object which evokes response. Naturally, our eyes see in 3D. We perceive depth and distance. Catering to what our brain prefers gives the user less frustration and invites more exploring and interactivity. Think of why you add gradients and bevels to buttons in the first place. It is to give it depth and a 3D like appearance.

3D creates realism without reality

Should you wish to stick with the traditional icons, then you may wish to bring a bit of realism to your page. Specifically, if you have an architectural page, a page with a product for retail, or a restaurant. Your images have to be flawless. The downside to photography is that there are typically flaws. If you are planning on using a photograph for your background image on Sketch or if you need to have a product presented in HD, your options are either photoshop the image to remove all the defects or reshoot the picture.

With a rendered 3D image, the ability to have photo-realism is available. Such rendering software as V-ray has minimized the line between fiction and fact allowing for the 3D artist and the designer to work side by side to create visuals which (unless otherwise told by the designer) are as real as the actual product. What makes this ideal for Sketch design is that a render can easily be redone if the angle is not correct, if the lighting contradicts fonts and other icons, or if the depth of the camera/focus of the camera needs to be adjusted. In traditional photography such fixes are not expedient. However, with 3D renderings it is a matter of clicking a button and tweaking the camera in the software program.

Use 3D models to optimize your workflow

One of the primary frustrations of any designer is the allocation of time and the ability to be creative within the constraints of the time. Drawing each component by hand is taxing on the timeline, not to mention the nerves. Granted, most established illustrators have a library of assets which can be used to quicken the flow, but even this can become a slow process if having to sift through thousands of files.

3D models allow for you to quickly find the asset that you need, apply the texture that you want, and render it out. For example, if you are making an app for a new gym and want to showcase the equipment as well as the physical location, you could use a PNG of google maps for one page, get a model from CG Trader of a weight bench, and use some nice fonts to do a quick mock up.

Another example would be to have an architectural space for an office that really does not exist. This is common for online businesses. While it may be expedient for your client to work from a one bedroom apartment, that person’s clients want to have something with a little more corporate of a feel. Hence the 3D render to give them the perception that there is a physical office building/location.

A word of caution and encouragement

While 3D renderings are very important in establishing the aesthetics of a design, you should note that if you render too high the images will slow down the upload speed, but that is true with any image. Additionally, your 3D images should be from a source which is not overly used. Typically, I stay away from the mega stock image sites due to this. Find a site which specializes in the type of 3D model you need or seek out modelers who offer unique content on CG Trader to minimize your risk of having a cliché look to your design.

The great news is that 3D renders are very easily obtained and can greatly increase your user interactivity on your apps, web design, and tablet layouts. I would encourage anyone using Sketch to integrate at least a few components into your next design and see the difference it makes.

Contact Us


    If you have questions related to what services we offer regarding website development, marketing, or WeChat please fill out the form and we'll get back to you soon as possible.