Album photo website

As a Designer we know that it's very hard to make ourselves happy. This website was a personal project. A very fun one though! Technically challenging because I wanted to make it extremely smooth for different type of computer. Basically I didn't want a website where the fan goes crazy. Unfortunately my original idea which I am going to demonstrate here didn't fit my expectations. I had then another idea which I will showcase below. 


  • Fluid
  • Innovative interactions
  • Clean design 
  • Motion
  • Fun


Animated prototype of the movement of the mouse, the right navigation and the scroll




The mask unveils the background and follows the mouse.

Its shape is modifying wether the user is moving fast or not. 


This is the different ways of how the cursor will look like depending on where you mouse is located. In order to guide the user the cursor changes accordingly.  

All destinations' pages

Album section




This animation shows how we transition between the main page to the album and vice versa

Map section



Transition from a photo to the map

The cursor changes as well when getting closer to the left side of the screen. Moreover the photo gets truncated as the mouse gets closer to the edge of the window. 




Play with depth of field, ease, layered elements and transitions. Each elements of the scene would have been animated separately while scrolling. 


Loading stage. The logo "SiiiD" animates and draws the navigation



Depending on the strength and the speed of the scroll the clouds will move accordingly.

Main menu over the clouds

Main menu over the clouds

Hover state shows a preview of the album


The aim was to make people feel they travel by flying over the clouds and once ready we "land". 


Short flight over the clouds while loading the first part of the album

The "landing" happens as shown by the red arrow


The cursor changes respecting the context and the area where the mouse is floating to guide the user.


The map

The circles that represent the places I've been are placed smoothly on the map from the ablum's timeline

The circles that represent the places I've been are placed smoothly on the map from the ablum's timeline

One of the way  to access the main navigation is to hover the center of the screen and styled "S" will appear. 





This idea is inspired from my parents and also a lot of people. Archived pictures are often in boxes and I wanted to have a physical place where I can sort all pictures. A simple interface with a bit of 3D to add depth to the interactions.

Wireframes & sketches