I chose Etsy for this project as it has a website design that I enjoy and use frequently. Then, I downloaded the Responsively app and took screenshots of the phone, tablet, and desktop versions of the Etsy website. Last, I uploaded the screenshots in Photoshop and marked down the gutters on each.
The phone version of the Etsy website has fewer grids as the site has to fit a smaller screen. The images are bigger and the gutters are more apparent. The iPad/tablet version of the Etsy website has more gutters than the phone version, as more images can fit on the screen at once while still having the same amount of detail as the images on the phone. Etsy's computer/desktop version has the most gutters as more images can fit on a bigger screen. More images are shown in a row, therefore leading to more gutters.Â
In this assignment, I started by using the grid guide website. I downloaded the 12 column grid and 4 column grid options and uploaded them to photoshop to use as guidelines to make grids. I then took screenshots of every aspect of the website and uploaded them onto the same file as my 12 column grid and lined up the images accordingly. I then did the same process with the 4 column grid for the screenshots of the mobile version of the website. Lastly, I downloaded each file as a photoshop file and uploaded them onto Blackboard.