Web Design Final Project Part 3 – Microsite

Hey everyone,
Another update on the progress of our microsite.

The site is now available by clicking this link.

Anyway, here are the screenshots of our site.


Home 1Home 2 Home 3 Home 4


Gallery 1

Submit page

Submit 1



So now to the inner workings

Homepage here


Multiple anchors bunched together works like magic for magnetic anchor widget apparently…


Why are all the good gallery widgets locked behind price tags worth a month of lunch money… bloody corporate bastards.


For the submit page, I used an online form builder called JotForm because the default form widget in muse doesnt provide an option to upload images.


Anyway, thats all for today, wish you all a good day. And remember, whatever happens, it is always a good ideas to throw the pommel at your opponent…


Final Project Part 2 – Website Planning

Hey there

How is everyone doing, its been awhile but here is another update to my Web Design Project

Brand Chosen: Secret Recipe

Campaign Details
The campaign that we’ve came up with is called “Your Secret Love Story” and it is a campaign to celebrate the coming Valentine’s Day. The campaign is aimed at young adults aged from 17-39. The contest is a cake making competition where the participants could show their passion towards their partner. Basically the participants are required to take a picture of a cake that they’ve made and submit to our campaign’s microsite. The submission will be then posted in our social media website with the #yoursecretlovestory.

Project Gantt Chart

Project Concept board

Concept Board

Project Site Map

MAD 2053 Web Design NOV 2016-2017 sitemap

Simple Wireframes

Wireframe 1 Wireframe 2 Wireframe 3 Wireframe 4


Greyscale 1Greyscale 2Greyscale 3   Greyscale 4

Grayscale with blind text

 Greyscale with text 3Greyscale with blind text 2Greyscale with Text 1  Greyscale with blind text 4

Finalized Design


Web Design Project Part 1

The Red Bulletin


The Red Bulletin is a general interest magazine created by Red Bull targeted towards men between age 25 – 35. The homepage features a slideshow displaying the current featured content. It covers pretty much the entire screen, directing the reader’s attention to the image and its title.The featured image however, seemed to have an issue loading properly despite not having an obtusely large file size (This could be caused by my slow internet connection, however, I’ve not had this problem on other websites). The typeface used for the title is a bold, white sans-serif font, giving it some visual weight and allowing it to be read with ease.

Red Bulletin (1)

The headers used for this website is a responsive dropdown menu that features the latest content as well as the recommended content. Blank space here is properly managed as it doesn’t feel too empty while sporting a simple design.

Red Bulletin (3)

The contents are featured in a similar way to Pinterest, with a twist that includes a larger version for its featured content. An issue with this method is that it sometimes leaves a blank space around the featured pin, making it seem empty and unbalanced.

Red Bulletin (4)


The Elder Scrolls Official


The Elder Scrolls page is a promotional website created by Bethesda Softworks in order to promote their game series, The Elder Scrolls. The page starts off with a landing page with requires the user to input their date of birth as a method to adjust their content that is appropriate towards the age group of their users.

Elder Scrolls (1)


The page then redirects the user to its homepage displaying its featured content. The page sports a much more sophisticated design to adhere to the theme of its content. The Call to Action button is located on the top right of the page that reflects its current featured content. One issue with this website however, is the header for the parent site, which clashes horribly with the aesthetics of the website.

Elder Scrolls (2)

Burger King Beach Run


The Burger King Beach Run by Burger King, is an annual fundraiser event for Burger King’s scholarship programme. The homepage for the site sports a slideshow featuring a series of banner containing crucial information regarding the event. The site employs a header with a simple design displaying pretty much everything someone interested in the event would like to know of.

Burger King (1)


Burger King (2)

The typography used in this website shows visual weight to its design with the important announcements rendered in large, bold letters intended to draw attention to itself. The navigation of the website is extremely intuitive, just keep scrolling downwards and you will find the next piece of information leading up to one another.

Burger King (3)Burger King (4)

Domino’s DXP


Domino’s DXP is a website created by Domino’s Pizza to promote their new delivery vehicle, the Domino’s DXP. The website employs a tile design for their website, which includes an interactive browser application that is designed to demonstrate the DXP’s function and features. The site also features various videos and Ads intended to showcase the new DXP’s various highlights.

Domino's DXP (1)

However, an issue with this website is with its interactive content that showcases the DXP’s features. First of all, while it looks appealing, the controls for it is not very intuitive. For example, the car in the website is controlled by holding down left. However, when pressing left to move the car, the user would often miss the various content due to the website now having a method to stop the movement of the car long enough to read the text shown on the website.

Domino's DXP (2)

This setback is somewhat mitigated by the developers of the website by employing a side menu to set checkpoints for the user to reinspect the contents. However, this method is somewhat immersion breaking as it requires the user to pause the content just to be able to be informed of something that they should’ve been informed previously in the first place.

MCD’s Welcome To Our McWhopper Proposal


McWhopper (1)

MCD’s McWhopper is a website created Burger King in collaboration with McDonalds to celebrate World Peace Day. The website employs some masterfully crafted visuals that gives hierarchy and visual weight to the elements presented in the website. When scrolling downwards, the burgers seen start falling down and the next title pops up in an order that makes sense. All the while interesting things play out in the background, making it much more interesting. One tiny issue with this website is that it might be difficult to find something in the website as there is no fast navigation in the miles long website. However, the visual presentation of the website is good enough to make it less of an issue.

McWhopper (2)


MAD2053 Web Design
Lee Jun Khai

E-Marketing Assignment 2 Update #01

Hi there, been a long while since i posted anything 😛

anyway, lets get straight to topic




This is an Augmented Reality code created with Zapcode (nope, its not Pokemon Go) that allows u to access view contents that is only available through the app. Lets skip the description and get on with it

1) Install Zapcode on your mobile device
2) Then Zap it
3) Refer to step 1 if you couldnt get it working


and coming up is the email marketing (that usually ends up in your spam folder xD)

anyway, i used MailChimp to send myself an email containing the banner that I designed

& here it is




& then im supposed to do the coding part for the website mockup, unfortunately, the file size exceeds wordpress’s maximum limit, so please check out our final release during submission day….


Thats about it for now, theres more coming but im seriously debating whether to post another lengthy post here due to the workload lol

Anyway, cyas   (ㆁωㆁ*)ノ


E-Marketing Pros & Cons of Mobile Marketing


Group: Cookies


  1. High penetration of devices
    Most mobile users carry around their mobile devices wherever they go, and responds to it by the instant. By utilizing mobile advertisements, users will be alerted about it in the instant.


  1. Instant input of information
    Most mobile devices are turned-on all the time, allowing it to receive input constantly with live-time updates to every new advertisement.


  1. User’s personal information
    User’s personal information is stored in the their mobile devices, including their behavior, preferences & others.


  1. Good response rate
    Preliminary data show good response rates for mobile campaigns (5% click rates vs. 1% for conventional web ads).


  1. Building customer database
    Mobile marketing can help build a customer database. Once customers opt in to receive an ad, you can use the information for loyalty marketing and customer retention.




  1. Technological restrictions
    Current WAP technology inadequate, discouraging web searching and surfing


  1. Content adaptation
    The current adaptation of mobile ads and messages on mobile devices results in poor user experience.


  1. Scarcity in mobile centered websites
    Due to it being a fairly recent technological advancement, mobile websites were still in its infancy stage, with only 8% of 1,000 top U.S. brands offer a mobile site.


  1. Various device types
    The sheer variety of mobile devices out there in the market resulting in a fragmented & complex marketing strategy, mainly due to the various functionality & devices.


Examples of Mobile Marketing

11951979_739424349517317_4619379468446094010_n 11952002_739424422850643_4681440275245971826_n 10690061_739424382850647_7016420822164092255_n

E-Marketing Assignment Update

hi all

being a little late since the assignment is already submitted. but anyway, here we go

I’ll be in charge with compiling & arranging all the information collected by my group members, as well as the presentation slides.

anyway, heres the thing

1) This would be our front cover

Progression 5

2) Content Page


Progression 6

3) Screenshots of event introduction




Progression 7

4) List if Issues



Progression 8

5) the SWOT analysis that our group did awhile back

Progression 9

6) Objective Setting




Progression 10

These are just pieces of the report, i wont be adding every page on here to keep the page short. Not sure if its completely according to what the lecturer wants (judging from her reaction today during our presentation, we did make a mistake or two ><!)

Anyway, thats all for today, millions of thanks for staying tuned, have a nice day, & cya all next time. /