Case study on web design
and prototyping with Adobe XD
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 is to be bold yet simple.
- ◍ The landing page must stand out and be different.
- ◍ The images gallery should be conventional and easy to use.
Solutions used
Visual design
Website design
Mobile website design
Mobile prototype
Desktop/laptop prototype
Project details
landing page
The idea behind a female eye was to convey the concept of what 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 the way they see it. They capture something that matters to them and some of it may also resonate with us.
Since Dorothy is a strong feminist, I decided to put her female symbol shaped logo in the pupil of a female’s eye. I discolored the skin and let the iris of the eye keep its original 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 and quite sharp font for the mission statement. The landing page turned out to be quite bold, yet feminine, and that is what Dorothy wanted.
Mobile design
Portrait orientation would not allow the image of the eye to take the whole screen space, so I placed it in the centre of the screen with the mission statement below and the menu on top.
The gallery is very simple and minimalistic and there is consistency to its design and layout on all screen sizes with very thin navigation arrows and black background.
Prototypes
I have created two separate prototypes: one for devices with a landscape orientation and another for devices with a portrait orientation (usually mobile devices). Both use time transition to achieve the effect of the opening camera lens in the centre of the eye. 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.
Swiping motion is applied to navigate the gallery on mobile devices.
