INTERACTIVE DESIGN FOR WEB TECHNOLOGY
TASK 1
WEB INTERFACE DESIGN ANALYSIS
INTRODUCTION
In
this report we required to do web analysis. Web analysis is about analysing the
web interface using the multimedia design principle that consists of white
space, balance, simplicity, visual weight and perspective, colours, movement and
transitions, the 2/3:1/3 rule, and consistency. Using this principle, we can
learn on analysing the web interface so that we will know about which website
has the good web interface or the bad interface. After this website analysing,
we can create our own website using the same multimedia design principles.
Website
interface is important, because it show how you conduct your website so it can
be user friendly and when people enter your website they won’t be confuse get
head ache by your website interface and information that you put there. The
good website will help you guide people in introducing your products and it also
influencing the user to your aesthetics in website interface design.
WEB ANALYSING
The
first website that I’m going to analyze is about a company of palm oil
products. The famous product of this company is Vesawit. The target audience of
this company is into housewives, restaurants and food making companies.
Picture 1
This
website page is using one pager interface. All of the information is on one
page so if you click into any button it will either scroll up or down to show
the information that you want to see. This web interface is has the 2/3:1/3
rule as you can see from picture above. This rule is the important thing in the
website layout so the users or audience would focus in the primary area or the
secondary area. The navigation button is usually in the secondary area focus.
Then in this web page it also bring the element of movement and transitions,
this will attracts the attention of the web user when they enters this website.
It also has the white space in every section so the balance is there and it
make people comfortable with this web page.
Picture 2
In
this website, you can the consistency of the font they use in each sections so
this helps the user and also an eye relief. This also can be seen in the coloring,
where they use three colors that consists of white, red and black as you can
see on the website screenshots. You also can navigate easily in this website
when you want to find the information that you. For example: the product of
this company as you can see in the picture below. You can find any of the
products there and just clicks on the button to find further information. This
website is also balanced in between picture and typography.
Picture 3
This
website is simple and you doesn’t have any problem in finding any info in this
website and the hierarchy in his website is seen clearly. The visual weight is
balanced where you can see the bold word and normal word with it different
sizes of font.
Picture 4
Picture 5
Second
web is about Nestle website. This website is about any information of any
products of Nestle and this products for any people that wants to know more
about Nestle products. This website interface has the white space and this
provide the eye relief to the audience. As you can see it also has 2/3:1/3 rule
as it interface layout. The homepage also has the transitions and movement of
pictures that attracts the people. It also has the balance in between
typography and picture and it give the harmony to the web design.
Picture 6
As
you can see in the picture above, this website use many colors because it
according to the products they have and they still maintain the blue color as
the main theme. This website is also a little bit crowded because they put all
of the information there. This website still has it consistency in the type
font they use and also you can see the visual weight in this website. So, this
website achieve its own balance.
This
third website analysis is about famous watch company that targeting young
adults in all gender.
Picture 7
This
website also has the 2/3:1/3 rule interface layout. This website home also has
the flow and transitions on the pictures of the event they held and also the
menu button, where they will expand out when you scroll on each and this lead
to an easy navigation around the website. This website has the balance and it
really harmonize this website and make people comfortably scroll on it webpage.
It has balanced white space as an eye relief and this web page has the
hierarchy the simplicity that make people comfortable with it as you can see in
the picture below.
Picture 8
Picture 9
This
website has colorful pictures of new watch but the main color use in this
website is black white and red and this color symbolize the Swatch brand itself.
You also can see the consistency between the types of font they use and also
the balanced visual weight in this. This consistency can also be seen in the
flow of the navigation of this website and this will help people to understand
about the information in the website.
This
last website is about a cosmetics brand that targeting young women and also the
fan of this cosmetic creator.
Picture 10
In
this last website analysis, we can also the 2/3:1/3 rule interface layout
because this layout is the importance thing that need in designing layout of
website. When you enter the home page, you can see the transition and the flow
they use in the picture and also it help us to scroll around in the navigation
area because of the expand navigation as it shown in the picture above.
Picture 11
In
this website we can see the simplicity or perhaps too simple because the
information doesn’t overwhelm the website and it has the clear hierarchy of the
important information first to the less information. It also has the
consistency in using the typeface and also where put the labeling, placement
and the color as they use white, black and pink in this website. You also can
see the white space they use in this website.
Picture 12
You
also can see the balanced between the picture and also the words they use in
this website. They use different typeface in each sections for example the price
fonts, the sub-heading, the products name and the information about the
products but it helps people to identify which of it and it make people easy
reading the info. In this website also you can see the visual weight in the
website and this help this website achieve it balance.
CONCLUSION
From
this website analyzing, I learn that even website has its own layout and rule before
it can be perfect website that can be used by users and attract your target
audiences. You also need to know what kind of theme and the selling points of
your products before you can create the website. You also need to look in the
color scheme and also the typeface that you want to use and also the picture
that relevant towards of what you want in the website. This web analyzing will
help you to improvise you aesthetics value your website interface design and
will also help you to interact with people comfortably.
REFERENCES
- www.yleo.com.my
- www.nestle.com
- www.swatch.com
- www.emcosmetics.com