WEBSITE DESIGN

FRIENDRED

CASE ANALYSIS

It is noticeable that more and more traditional websites begin to make transition in the coming 2015, gradually abandoning the layout design of small fonts + dense layout. In fact, this is nothing new as the web design community has started its change early in 2006, however, it is difficult for the traditional website to give up its so many years’ style and rule of design.


There are three main factors affecting the readability of the
page
1. Font size

2.Column width

  1. Line height


In fact, the web development has always been in high degree of division of labor, with the designer responsible for completing the visual design of the site and the front end/ programmer for bringing about the design. However, this situation is gradually changing as web design tools are becoming more powerful and intelligent. Making use of the new characteristics and features of the graphic design software, more and more designers can create a website without writing a line of code. And these websites created by the designers will not only have clean and beautiful codes, but also could be validated through W3C.

FRIENDRED WEBSITE


Core requirements of website: my work and ability could be intuitively observed through the website of personal work collection. My work must be the most eye-catching according to this requirement. Therefore, I have specially designed the following two parts to exhibit my work.
1.The first one is the entering of animation. The large background picture when entering will be updated timely, enabling the viewer to have a feeling of freshness. Besides, there is also a little interaction in the homepage.
2.The second one is inserting the part designed with Unity. It will be interesting and attractive to control the combination between the playback of my work and the DJ sound with keyboard, so that people could preview my latest works while experiencing fun.


This is my initial plan. I have tried to use three-dimensional image as homepage. A black hole will appear in the F/R part when the mouse is placed there, and the little black block will bounce into that black hole.

A improved plan


a corresponding short flash animation will appear in the F/R part when the mouse is placed there, and it will return to homepage by clicking FRIENDRED.


In the middle, I have used the technique of parallax scrolling to update my latest work of the second part in real time.


The demonstration of this module is the most important part, which has been divided into four sections.


This is the subpage with the click of work.

Initially, I would like to design the page layout as the form of long strip. The red homepage on the right was intended to be interspersed with the representative elements of my life by use of parallax scrolling technique, showing from top to down 1. Who I am. 2. My work. 3. My life experiences. 4. How to contact me.
The image on the left is the most important module in the conception, which is the typesetting in my work collection. Through this form of page, it will be absolutely clear to make complete presentation for the whole process of completing work from idea conception to completion.