Articulate Challenge #374 – Zooming and Magnifying Parts of an Image.

I had a little more time this week and decided to split it between working on the ‘zooming in’ part of the demo,  designing more engaging leading screens.

Having made several attempts at getting the UI of the introductory screens right in Adobe XD (including the visual metaphor of an Instargram feed on an iPhone), I was happy with the outcome. I then focused my efforts on the actual challenge and started to consider the details of how to let the user magnify parts of the Botticelli’s paintings, without detracting from the wholeness of the art piece and cluttering the screen. I decided to hide the zoomable areas until the user wants to see them, and I used the hover effect, to allow to smoothly move between the magnified parts.