Blog 5: Interactive skills used in Wearec2.com

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.

homepage

When hovering the mouse over a linked word, the color will change from pink to white, and the rest words will fade.

homepage1

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.

page1

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.

page2

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.

page3

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.

page4

Advertisements

About Yizhu Wang

A second-year graduate student in Missouri School of Journalism. She studies print/digital journalism with a focus on business reporting. She is interested in utilizing multimedia and technology to strengthen the presentation of news stories. Yizhu is originally from Shanghai, China.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s