One of the most important part of the project is showcasing what we did. It allows potential clients to view work and helps us to get new clients.

‍

Types of Mockups

We need to create mockups for the website and social media. These come in the form of:

• Images
• Video screen recording

‍

Image Mockups Guide

1. Visit https://shots.so/
2. Select the correct device(s)
3. Use those dimensions to create a screenshot in the right dimensions of the website
4. Create approx 5x Desktop/laptop and 2x mobile variations (unless it's a mobile-specific project)
5. Ensure bg colours not too overpowering
6. Keep the devices simple to allow work to shine
   
7. Ensure image is zoomed out to allow space around for responsiveness on the web
   
8. Export at 2x in jpeg
9. Compress once exported, but not so it looks bad (ideally below 200kb, in WebP or AVIF
10. Save in the project GDrive folder, in a subfolder in this format: /Mockups

‍

Image Explainer Video

‍

Video Mockup Creation

We need to create a video mockup that is used on the site, on the tile for works and record a video recording of the website.

• Use Loom desktop app to create a correct size frame and record.
• This should be the home page with a smooth scroll down the page.
• Pause over any interesting interaction briefly
• Videos should be less than 15s (but if slightly longer it is ok in some instances)
• We need to ensure there is no browser or any detail other than the website
• Ideally you dont see the mouse
• At the end of your scroll down the page, scroll back to the top of the page so there is a seemless transition on loop
• Once recorded, download from Loom
• Upload them to the company Vimeo account.