Did you know Sketch could do this?

As many of you know, Sketch has been around for a few years and it changed the way many of us designed apps, UI and graphical assets. However, Sketch is also powerful in doing other things, like device renders.

Now I’m assuming that most hardware companies have a designer or a team of industrial designers that can create renders in realistic lighting and angles. They can definitely make them look sexy.

However if this is not the case and resource is limited, sometimes you just have to use what you know and try to recreate it in the best possible way, and that’s the case with me with Sketch and rendering a quick and convincing render.

These items can be used for app and marketing purposes.

I need to mention that it also has limitations. This app is not really designed to create hyper-realistic renders. But you can create them quite close to the real thing. And in order to do that:

See and study the little minute details of a hardware product, how it behaves under different lighting, patterns, material shapes and textures.

At a hardware company like August Home, wearing multiple hats to create different things to emphasize a unified, consistent, and smooth experience is important. As the case with the app, we had to come up with ideas of how to create a clear message on the onboarding experience; especially on installation. On the side, we needed assets as well for marketing and social media.

Convincing renders of physical devices might help communicate your message and ideas a step further.

As the number of devices grew in our product family, it was clear enough that a set of renders were needed to help visualize the message without being “wordy”. So in order to do that, we created GIFs and renders. With this addition, feedback has been positive.

Remember, a picture could worth a thousand words…

There’s no right or wrong way on how to do this. But, I can give you small tips on how I did it. This is not a guide or step by step process, but hopefully I can give you a gist of things to think about.

Quick phone shots for reference

If you have a device to work with, start with this. I usually base the look itself from the real thing. I grab pictures of the devices themselves with my phone, and grab pictures of it in different angles.

Using a circle as an example

As soon as I have those, I create basic shapes that follow the body. Whether it be a square, a rounded square, rectangle, circular, etc.

Fills has lots of options. That plus button is your best friend. Add more layers of fills, of colors, gradient colors for point of light and shadows, and play with all those options you have.

Noise fills are great for aluminum textures

Linear and Radial gradients are great for adding point of light and shadows. Angular gradients are great for bevelled edges things.

But noise fills are usually forgotten. They actually give that aluminum texture for machines.

Sometimes though, if a particular texture is not possible to recreate, add in a photo of a texture to fill with. That does the magic. Especially things like fabric.

Inner Shadows shows where the highlights are. Play with numbers that will let them point downwards and add negative to its values for a reflected effect. Changing its colors also has gives it different effects.

Drop Shadows need to show attitude, which is usually low numbers in x, y, and increase them blur. But it’s different for each case.

As for patterns, making grids are great, or add photo textures can add details that will be helpful.

In this example, we use circles to create hole groove patterns to create the look above.

I started off with a single dot, in which then I made a grid through Arrange -> Make Grid.

That pattern is then masked in a shape, which is a duplicate of this circle. It then overlayed on the top of its previous textured circle accordingly.

If your mask happen to have a fill, don’t forget to hide it.

For Glass, it is usually a gradient of color, in this case black glass to a lighter grey gradient. Sometimes, the highlights are masked in a particular shape to show realism.

I’m not sure what this is lol

I know those are a lot to talk about, but this post is not about a guide, it’s about acknowledging its potential and features you can play within the app. Grasp the idea of how things are made by analyzing its details and figure out how they’re made. We haven’t even talked about other things like chamfered edges, the use of angular gradients, replicating camera lens details, and more.

Hope you can see the surface of how I made these convincing (at least I think so) devices if you ever need to. Here is another example for what I did for August:

If you want to see more examples, check out my Dribbble account here, and see some free downloadable .sketch files to play with on my site here.

Questions? Comment below!

Kevin

Ex-Product Designer of August Home | IG: @ mrlessy | www.kevinlessy.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store