http://wearec2.com/ is a website of a team providing web design services. Here are several interactive elements that I like very much. One of the consistent elements throughout the website is the dynamic elements. Many backgrounds are dynamic. Actions of elements when hovering mouse over or clicking on some buttons also highlight the dynamic effect.
First, the homepage is eye-catching. Key words describing the team’s style consisted of the logo “C”, while four links are highlighted by larger size and pink color to remind people that they are clickable.
When hovering the mouse over a linked word, the color will change from pink to white, and the rest words will fade.
When clicking the word, this logo consisted of words will spin to disappear.
Every button is functional and provide clear guidance for users to operate. The homepage also set the color scheme for the whole website: white, black, grey and pink. Most importantly, the homepage design is unconventional and attractive, and clearly labels the characteristic of the team.
Second, the main page contains many interactive elements as well.
The following is one of the sub pages when it is still.
When hovering mouse over a part, the color will changed to pink. This effect highlights the contents and is also consistent with the main color scheme. Also, the background image – the lady playing violin in this page – is darker and larger in a slower and slower speed, which creates not only dynamic but also rhythm.
The other part will be smaller in size and turn light colors. I’m a bit confused here because on this dark page, light colors are more eye-catching than darker ones. I guess that pink determines the focus here. In general, I feel that images here mainly aims to create a romantic atmosphere instead of leading people to pay attention to details of the image.
The third hierarchy of the website is also very unique. This is the display of the team’s works. The following is the still page when you just open this page.
The interactive effect is the scrolling part. This page is not organized under a linear and flat style, but complies with a horizontal order. More contents can be “dragged out” from the right. When you scroll the white container from the right, the big title “V” and a one-sentence description will fade away and become smaller. The background image turns darker too. Users can fully control the position of the white container by scrolling all the way.