I wanted to create thumbnails of websites or layouts I created e.g when showcasing a portfolio. what are tools or technique to showcase your website or design in a thumbnail? What is that technique called?
3 Answers
Have a google of ‘website thumbnails’ or ‘thumbnails for websites’. You will find:
- a lot of free APIs that can generate thumbnails for your websites with HTML you can then use for your portfolio;
- examples of website thumbnail layouts to give you ideas of styles for your thumbnails;
You can also simply export your layouts (if they’re not live) into images (like .png or .jpeg), and use those in your tags as small thumbnails. Use CSS to shrink them to an appropriate size then.
Note, that providing links to full websites of those thumbnails or full sized designs is normally very welcomed. But don’t make them super heavy in terms of size. It’s be unfair on users to make them wait for all your designs to load (I’ve made that mistake once)
Overall, it’s not a new question, it’s definitely something you can research on google and stackoverflow. Unless I misunderstood the question.
Hope this helps.
-
People who showcase there design in laptop , desktop and mobile is that a API too? I do not have API option as I am UX front end. Jul 14, 2018 at 16:56
-
All the API does is generate images from your websites. There’s question whether a platform would be supported. Images are images on desktop, tv screens or phones. I’m a UX designer with front end programming background too.– aly.i.uxJul 14, 2018 at 20:42
To piggyback onto Emma's answer, there are also plenty of browser plugins (Chrome extensions, Firefox extensions, etc.) that can help automate the task of full page screen capture. Just be sure to optimize the images, as most of them save in high quality PNG which can be a bit too heavy, especially for mobile.
The format depends on how big the thumbnails will be. If you're planning to showcase the websites you made, I would suggest the preview images to be at least half screen wide. You can take screenshots of the webpage and showcase the above the fold layout. If you want to showcase the interaction on the website, consider recording a video of the screen and converting it to a GIF.
