Category: Interactive Design for Web Technology

Description of my website

http://sophan0902.wix.com/chengdufood

Screen Shot 2016-01-17 at 4.20.25 PM

There will be home, food, about Chengdu, navigator and contact, totally 5 pages on my website.

Almost every foods in Chengdu are spicy, so I will use a chili on the top of the website. Same as the background colour, I use red.

I put this photo on my home page because this is a roof of the most famous shopping mall in Chengdu, and the statue of panda can present that panda is from chengdu.

Screen Shot 2016-01-17 at 4.20.31 PM

On the food page, there are 8 foods the I like here. Visitors can click the preview pictures and see the large photos and descriptions.

Screen Shot 2016-01-17 at 4.20.40 PM

Because this website is for introducing the foods in Chengdu, so there is also a page to introduce this city.

Screen Shot 2016-01-17 at 4.20.47 PM

There is a page Navigator on my website, I use the screenshot of google map, put the location of the most delicious restaurants that I think on it. Visitors can find the address easily but this map.

Screen Shot 2016-01-17 at 4.20.52 PM

The final page of my website is Contact Me, visitors can send E-mail to me if they had any questions.

 

Sketch of website

I will change some pages of the template, like the logo, background colour.

Almost every foods in Chengdu are spicy, so I will use a chili on the top of the website.

Screen Shot 2016-01-17 at 8.39.26 PM1.pic_ddhd

There will be home, food, about Chengdu, navigator and contact, totally 5 pages on my website.

Template choosing

As we are required to use template to make the website, I will use WIX to make it.

I chose few templates and finally I decided to use this one.

Screen Shot 2016-01-17 at 8.39.26 PMScreen Shot 2016-01-17 at 8.39.30 PM

This template is simple to show the most important things for a website and I can put my photos on the shop page.

My Website Concept

The topic of my website is the food in Chengdu.

Chengdu, formerly romanized as Chengtu, is the provincial capital of Sichuan province in Southwest China, as well as a major city in Western China. It holds sub-provincial administrative status.

Chengdu is my hometown, which is very famous of foods in China.

I want to put my favourite foods on my website and introduce them to foreigners.

2.pic_hd

I want put this photo on my home page because this is a roof of the most famous shopping mall in Chengdu, and the statue of panda can present that panda is from chengdu.

Website Analysis 3

The third website which I want to do analysis is High Court Of Bombay’s official page:

http://bombayhighcourt.nic.in/index.html

The High Court of Bombay, which is the chartered High Court and one of the oldest High Courts in the Country. It has Appellate Jurisdiction over the State of Maharashtra, Goa, Daman & Diu and Dadra & Nagar Haveli. In addition to the Principal Seat at Bombay, it has benches at Aurangabad, Nagpur, Panaji(Goa).

Although the home page of this website is in balance, but the pictures on the menu bar is transformed, and all the buttons and text are in the same size without visual weight, visitors will not know which one is more important.

Screen Shot 2015-12-12 at 7.04.00 PM

Every pages of this website are the same except the middle part.

For a official page, it is ok to put some charts here.

Screen Shot 2015-12-12 at 7.04.27 PM

The pictures on the top was adjusted to be out of shape, they are awful to be browsed.

Screen Shot 2015-12-12 at 7.04.22 PM

 

Website Analysis 2

The second website which I want to do analysis is LEGO’s official page:

http://www.lego.com/en-us

The Lego Group is a family-owned company based in Billund, Denmark, and best known for the manufacture of Lego brand toys.

Because this website is a page of toy company, so the menu bar of it is just narrow bar, to leave more spaces to other contents.

The colour of the menu bar and the background are both white, it’s good to let the pictures be prominent because all the pictures are about toys, toys are always colourful for children, if there is other colours are using on the menu bar and background, it will be hard to be consistency. White colour is always suitable to be together with any other colours.

There are six buttons on the menu bar, they are HOME, PRODUCTS, GAMES, CREATE&SHARE, VIDEOS and SHOP. The designer made every buttons like a toy, just to cooperate the toy theme.

As it is a toy company’s website, the most important function of it is promoting the toys of the company, so there is a large space to put the new toy’s advertisements on the top of the home page. Visitors can see all the advertisements by clicking the left and right arrows.

Screen Shot 2015-12-09 at 4.40.01 PM

There are another two parts on the home page: last updated contents of the website and recommendations. The designer put one Lego figure on the top left corner of every part. The background colour is gradient from white to blue, because the background colour of the pictures on What’s new is white but on Recommendation is blue.

Screen Shot 2015-12-09 at 4.40.25 PM

The last part of home page is some pictures of products, the background colour here is grey and the background colour of every pictures is white. The designer used the light background colour on this part, but make the photos of the products being the main objects.

Screen Shot 2015-12-09 at 4.40.41 PM

By clicking the button PRODUCTS on the menu bar, we can get into the products page. The background colour here is still white because this page includes so many posters of every toy sets. The design of the posters has different colour tones. It will not be inharmonious by using white background colour.

Screen Shot 2015-12-09 at 4.40.56 PM

On the bottom of every page, there are some informations of Lego company.

Screen Shot 2015-12-09 at 4.41.01 PM

On the GAMES page, there is a wide bar of advertisement, to introduce the new game of Lego, it occupies 2/3 space of the screen. The designer just want the visitors focus on this advertisement.

Beside the advertisement, there are some games can be played by the visitors.

Screen Shot 2015-12-09 at 4.41.49 PM

On VIDEOS page, there is a menu bar, and a wide poster on the top of it. Two Lego figures act as the actor and actress, to show the theme of this page to the visitors.

When there are so many pictures on a page, the designer always uses black or white colour as background colour, because all the colours will be harmonious with this. Same as this page, even every preview pictures of the videos have many colours, but the page still looks harmonious.

Screen Shot 2015-12-09 at 4.43.06 PM

The screen is cut to 1/3:2/3 on the bottom of the GAMES page. The videos and channels’ pictures are still on the 2/3 part of the screen, because they are the more important contents of this page. And on the 1/3 part of this page, there are some related videos here.

Screen Shot 2015-12-09 at 4.43.00 PM

On the CREATE&SHARE page, the designer also us white colour as the background colour, every part of this page are the photos of Lego toys.

Screen Shot 2015-12-09 at 4.42.01 PM

Website Analysis 1

The first website which I want to do analysis is Chessman HK’s official page:

http://www.chessman.com.hk

Chessman is a new entertainment group in Hong Kong, there are four artists in this group.

First of all, the colour this website are just well in simplicity, the use black and white only in the background and texts. And we can see the logo & menu bar part on the main page, just followed the 1:3/2:3 rule.

On the menu bar, there are 5 buttons, we can see the introduction, posts, artists, projects with it, and we can search the contents here. There are also four buttons here for sharing this website to other SNS.

Screen Shot 2015-12-08 at 4.24.53 PM

In the page “WHAT IS CHESSMAN”, we can read the introduction of the group, the size of the title is much larger than the article, the designer wants the audiences to see the title clearly, so the design just use the visual weight to achieve it. The font is also easy to read and nice to be seen.

The picture on the page is also black and white and in the 1/3 left side.

Screen Shot 2015-12-08 at 4.24.59 PM

The bottom part of this website is also full of design. The designer use black and turquoise colour to do this part, to make it nobly. this is the introduction of Chessman HK’s branch office: Chessman Macau.

Screen Shot 2015-12-08 at 4.25.05 PM

On the POSTS page, there are some articles and photos. The colour of the background is changed to grey, the design make it to be vintage with the photos and texts.Screen Shot 2015-12-08 at 4.25.53 PM

On the ARTISTS page, it shows the four artists of this group, when visitors move their mouse on the profile picture of one artist, the picture will be zoom in a little, this movement can catch the visitor’s eyes. When we click one of the profile picture, we can get into his or her page.

Although the background colour of this for pictures are all grey, but the character is too colourful to be balance with the main tone.

Screen Shot 2015-12-08 at 4.26.10 PM

When we click Stephanie Cheng’s photo, we are here in her page. The colour of the profile picture here is suitable for the page. There are also her introduction in both the Chinese and English version.

Screen Shot 2015-12-08 at 4.26.20 PM

For an entertainment group, the most important thing is its artists of course. We can see the links of the artists’ MVs on Youtube.

There is even the lyrics of the artists include the single covers of every songs. The CD cover is also full of design.Screen Shot 2015-12-08 at 4.26.28 PM

Learning of Multimedia Design Principles

1.White space

It’s important to leave some empty spaces between the texts and other features on screen because it gives eyes relief.

*It doesn’t have to be white colour

*Another name of it is negative space.

The screen will be very crowded without white space.

inspiring-examples-of-whitespace-in-website-design_wgnse_3副本

2. Balance

Only the design with balance can be comfortable for users.

symmetryassymmetry-21

3. Visual Weight

Using visual weight well can highlight what the designer wants to show to audiences first.

circles2015

4.Colours

Using different colours can lead audiences into different emotions.

For some products, such as Apple, the advertisement needs black and white, adds some light colour only, it suits for it enough.apple

But for children, they like colourful things.

primary

5.Movement and Flow

Make the feature that the designer wants audience to focus on moving, can get their eyes at the first time.

6.The 2/3:1/3 rule – most important layout rule

The screen would better be cut into 2/3:1/3 to show the more important part on the 2/3 part.

starbucks-facebook-pageLego_Battle_Screen.png

7.Simplicity (clean) – user friendly designs

Make the screen clear and simple, the users can easy to find what they want, and the design will be nicer.

composition

8. Consistency

Audiences should feel comfortable when they see the design with consistency. They should feel that the design is designed, arranged, and filled with logical information that they how to think of it. When the design is consistent, the designer make the audiences happy.

coke