I always have a list of websites that I come across that I just love the design of for some reason or another. I somewhat obsessively have categorized dozens of sites in several folders in Chrome. Folders like “Apple Like Design” or “Awesome Imagery” or “Full Screen Video Background” – yes that specific. Maybe designers and developers across the world do the same exact thing, but your everyday Joe might think it a bit weird.
Beyond Awesome Screenshot
Awesome Screenshot is a great extension for Chrome and plugin for Firefox. It lets you crop and draw quickly on images you screenshot in your browser. The native print screen shortcuts on Mac and Windows work just as well for one-offs as well, but I needed something more robust.
I needed something that didn’t involve me scripting something in Python or digging around everywhere for, but would quickly grab screenshots and save a bunch of images so I could print them for site design inspiration. I like having a physical copy of what a site looks like rather than fumbling through 20 tabs when I’m trying to think of a new design.
Found the Killer Combo
1. Install both plugins in the respective browsers
2. Go to Chrome and open a new browser window, then find the folder containing the URLs you want to screenshot, right click the parent folder and choose “Open All Bookmarks”
3. Now that you have all your target URLs open (in my case 15), click the Export Tabs extension and uncheck the Title box, this way you won’t get the page titles.
4. Copy and paste the URLs in a .txt document and save this .txt document in a handy folder for the project.
5. Go to Firefox and go to Tools-> then click on the Grab Them All plugin, select your .txt file to upload and choose where to output the images it will grab
6. If you’re screen shotting a bunch of URLs that might be resource heavy, you can change the Max page processing time to something higher, such as 15.
7. The add-on will run for a minute or two and then export all the screenshots to your folder as picture files, and you can now print them and beautify your workspace!
Use Cases for Rapid Screen Shots
-When looking at a home page redesign for a printing company, I wanted to compare the images to other websites in the ecommerce space to pic and choose the best ones to copy.
-If you’re looking for landing page designs to A/B test with, find a bunch of your competitors pages or good pages from other industries to look at
-Product pages are where a lot of customers will eventually decide to buy or leave, so grab screenshots of some of the best product pages in the business and learn from what they do
Here’s on of my favorite recent site grabs in case you’re interested: