WEB DESIGN MAD 2053 Name: RIZWAN AFIFI B RAZALI ID: Web Design Final Project Research MAD2053 NOV 2015 Date of submission: 15 December 2015







Full text



MAD 2053


ID: 1132701073

Web Design Final Project Research

MAD2053 – NOV 2015



Campaign “Grab Life by the Mug”


The website that I choose is Nestle’ brands page. This page is about a campaign that called “Grab Life by the Mug”. The tagline they used is “Big Start for your Friend” in the morning. Design Principles

Based on what I see this microsite they used a parallax style of scrolling. Using a parallax is good for customer that lazy to go all subpage one by one and this site good because it’s straight forward. As in design principles, this microsite has visual weight and perspective. They also has colours that they used which is red, green, and blue. They also has the 2/1; 1/3 rule in their home page and contest page. The website also have the consistency and

simplicity of page and an icon. Lastly as design principles they have movement background and a transition to attract customer. The principles that they lack is a white space and a balance on their video page.


User Interface

Based on user interface, they has a simple and understanding layout and also the navigation button. They also using a safe typography for their body copy so it’s easier for customer to read and understand. Beside that all the headline and tagline their using a creative font and design it well. Furthermore as you can see on page 3 (3rd picture) they used law of clarity of an icon to make this site an interactive website and also the customer can easily understand what’s that icon it is. By using that icon people know what they have to do after next. This also known as law of preferred action. In this campaign they have to make a hidden camera video of their friends how they boost their morning. Last page is a form that you have to fill up about you and your friends.



Home Gallery Promotion Nominate

Form Home


Campaign F&N BEAT


The website that I choose is from F&N brand. This campaign is called “F&N BEAT”. This campaign is about the customer make the best by using sound of F&N products like F&N’s bottle, can, tin, sound of gas, sound of fizz, crush, gulp, cold, and ring tab. By using that sounds they need to create a beat by themselves. This campaign is actually creative campaign not only for people loves music but to all customer either men or women. By that they only need to submit they music beat and the best music beat will be on the top of charts and also can download the beats.

Design Principles

Based on what I researched on this microsite, they using 2/3; 1/3 rule of design principles. But they lack of interactive of movement or transition. The attractive about this website is that the visual weight and perspective. They design well in the home page to attract people join the music beats. One thing that I see is this website has simplicity and consistency of design and pages.


User Interface

The navigation of this website also simple and only has 3 menus. The only about this website is they using many colours and it’s kinda attractive and nice. They also using law of clarity to customer to avoid any interface elements that does not have meaning. They also have a balance layout of design.



The Beat Ceria Gang Beats Library

Zapin Pop Groovy Bass Smashing Rockstar Start Start Start Map of people List of Ceria Beast


Campaign F&N #JanjiChillax


This website that I choose is also F&N Seasons. This time they do a campaign about

#JanjiChillax. It’s about F&N fruit seasons water. This campaign about chill when you drink this water whenever, wherever you are. Just take a picture of the drink while you chillax with anyone and submit it to win an F&N Seasons and it will post it on gallery Chillax.


Design Principles

Based on design principles, I researched that this website has 2/3; 1/3 rule on every page. They also has a white space on the website. It’s good because it give a space to reader to read and understand. They also using a simple navigation that helps customer go straight forward to the page they want. They also have a good visual weight and perspective to make people see what’s first and what’s not important. Based on design principle of colour they used cool colour because it’s connected to the word Chillax. On their background they have a

movement and transition to make it’s interesting or it called loop background. But not least they have consistency and simplicity on their page.

User Interface

Based on typography they use a typography that people can easily read and easy to

understand. On the interactive part they using an icon above the picture to make interactive and attract people to click on the page. For the layout they use a good and simple layout for the readers so it’s easy to read and attract the people to come again.

Sitemap F&N Seasons Home Dengarlah Dedikasi Stress?Chill lah Galleri Chillax Minuman Chillax

Galleri Chillax Radio

Clipping Dedikasi Hotfm Minuman Chillax Teh Lemon Ais The Pic Ais Teh Hijau Buah

Markisah Ais Teh Epal Ais

Facebook Twitter


Campaign Red bull Flugtag


For the 4th website that I found is Red bull microsite. This Red Bull campaign is about to promote their games for IOS and Android. They promote their own product by using games as interactive.

Design Principles

From what I see in this website they used a simple layout and a simple site map for their customer. The navigation on top of page and it has 2/3; 1/3 rule of design principles. At home page they add a tutorial video about the games itself. This promotion is creative promo because on Build’s page, we can build our own aircraft. Based on design principles they have visual weight and perspective on all pages. What they lack in this website, they don’t have a movement or transition on all pages. They only put a video of tutorial. Colours also they don’t have much and every different page is different. Besides that they have a balance layout and the consistency and simplicity. They have all the law but they lack of law of preferred action.


User Interface

As for user interface, they use a short navigation menu button which is 3 menus and 3 subpage. They also used a graphics picture for the icon of aircraft to attract people to create their own aircraft. What they lack of user experience which is finding and managing. Sometimes the users cannot understand where to click when they open this microsite. Sitemap


Home Build Fly High scores Achieve Hangar

Build your own Type of aircraft Select Level Place


Campaign Nike Lebron


Last microsite that I found is Nike Lebron. This website is about Lebron James who is basketball player that the most sophisticated athlete in universe.

Design Principles

As for design principles this website has a white space between the text and other media elements. It also has a balance layout and simple layout. On every menus navigation they has a visual weight and perspective to let readers know which one more important than the others. As for colours they mostly used black and kinda gold colour. What they lack on this website based on design principles is movement and transition. They do not have any movement background and transition. This website also don’t have 2/3; 1/3 rule of page. They also lack of familiarity that users don’t understand what it is.

User Interface

Based on user interface this website has a unique layout and navigation. As you see the navigation is basically round shape at the centre bottom of page. For typography they not use a safe font because to me some body copy cannot read. Therefore they lack of typography. The best of the navigation is that they used interactivity navigation. Once you click on one menu it will pop out the subpage.



Related subjects :