Home_destinations_nav.jpg

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. 

Expectations:

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

THE FINAL RESULT

 
 
 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. 

Cursors

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. 


CONCEPTS

 

Bouncy

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


Cloudy

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.

Album_interaction_leftMAP.jpg

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. 


Drawers

roseDrawer_concept.jpg

 

 

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