I made more card mockups than device mockups, so I felt like it's time for making phone and laptop versions. In this case study you will know everything about this project: from visuals and process, to tools, setup, and more! I hope you will enjoy this case study, so let's get into it.

I began with analyzing great mockups, made by people with years of experience. I tried recreating the mockup in small parts, such as lighting, HDRIs, camera, compositions and environment

After research, I began to prepare the scene, which included background, design showcased on them, materials, camera angles, and HDRIs. For device, I decided to use silver Macbook. On design showcased I used Geist Medium for heading (available in Figma for free), a image of my website design (in center), and a navbar, which included my logo and new website (https://aterlab.vercel.app). The design:

I started rendering with some different angles, until I was happy. This project includes 1 mockup, but I'm planning to add more soon!

Uploading the case on Contra, and sharing with the community!

📌 Blender

📌 Figma

This is part of my Macbook mockups pack, and I will also make a website for my assets soon! I hope you enjoyed reading this case study, and thanks a lot for visiting 😄 !

Website                                                                                                  By Aterlab with ♥️