Web design and prototype build for a freelance photographer
Case study brief
I was presented with a logo (a camera aperture in the female symbol shape), some images for the gallery and a short bio to work with. The client had the following requests:
- The design had to be bold yet simple.
- The landing page had to be very different from what you usually see, it should have a clear message about the kind of work the client was doing, which was feminism oriented.
- The images gallery can be conventional and user-friendly.
Mobile website design
Desktop website design
The landing page-desktop
The idea behind a huge female eye was to convey the concept of what the photographer or an artist does: view the world through the lens of their own experience in life, shaped by their views and sometimes clouded by their own preconceptions if you like, and share it with us just the way they see it. We may not be able to see it in the same manner as the artist and may not get the idea of what she is trying to tell us, yet we have a chance to do so.
Since Dorothy is a strong feminist, I decided to put her female symbol shaped logo in the pupil of the female’s eye. I discolored the skin and let the iris of the eye to keep its beautiful color. I thought it would be quite cool to turn the logo aperture into a link that on click would open its lens and take the viewer to the images gallery, in other words transfer the viewer into the world of the artist. Unfortunately, this effect only works offline only due a bug in Adobe XD online sharing feature, however the prototypes sequence below can help visualize the transition.
I chose rounded yet edgy font that I thought reflected Dorothy's character well. The landing page turned out to be quite bold, yet feminine and that is what Dorothy wanted.
I had to compromise for mobile screens as portrait orientation would not allow the image of the eye to take the whole screen space. I did manage to give the image and Dorothy’s mission message the attention they deserve however using the layout and colours.
The gallery is very simple and minimalistic and pretty identical both on a mobile and desktop with very thin navigation arrows and a white or black background.
I have created two separate prototypes: one for a desktop and another for mobile devices. Both use time transition to achieve the effect of the opening camera lens in the centre of the eye pupil on click or tap. I originally used 7 artboards to make the transition smoother, however Adobe XD could not process this number of time transitions and froze, so I had the reduce the number of artboards to four (three on a mobile). Still, it only works offline at the moment and Adobe team is trying to resolve the issue.
I used swipe transition for the mobile gallery.