WEB DESIGN FINAL PROJECT PART 3 – WEBSITE DESIGN PROGRESS

Tried to change the HOMEPAGE design a little bit after consultation with pretty lecturer~ :)

Blog (7)

The old finalize design. Look pale and lack of inspiration.

Blog (6)

In progress of changing the homepage first view design with another background and logo as center attraction.

Blog (1)

The new finalized design with the changed of header also.

Added in the label of winner as suggested by lecturer. Used simple design rectangle label with white font and shadow to let people know which artwork is the 1st, 2nd and 3rd place winner.

Blog (4)

Label zoom in. As you can see black is more outstanding with shadow and white font.

Blog (2)

Label zoom out showing 3 main winner.

Here’s the rough final designed homepage (left) and finalized homepage design (right). homepage

Carry on is the sub-page of contestant’s folio where it show all the contestant artwork from all the participants.

Blog (8)

This is the page where other color of the month still showing to be announce.

Blog (5)

This will be the final look of the page after competition end and all the color of the month announced.

Blog (3)

It show the colorfulness of art. Each circle will have hover function showing the months.

And this is the finalize design.

subpage

 

WEB DESIGN FINAL PROJECT PART 2 – WEBSITE PLANNING

GROUP MEMBER NAMES & IDs :
GOGULANESHWAR S/O MUNIANDY 1142701749
LEE ENN CHEE 1142102487

DATE : 16/01/2017

  1. Introduction
    • Brand chosen : Buncho

bungho logo-01

    • Campaign info (Detail of competition) :

               – Competition type : Painting Competition

               – Competition Name : A.R.T – Aesthetic. Remarkable. Therapy.

               – Event Logo :

logo

                 – Tagline : “Fall in love visually”

     Objective :

  • Our main idea is to give the term of RELAXATION.
  • To calm our heart through the world of art visually.
  • To create awareness towards people who have misconception on arts.

    Competition Concept :

  • Artist need to come up with an artwork based on our theme RELAXATION and monthly colour scheme.
  • Every month 9 winners will be chosen based on their artwork by our Jury.
         – Winner, 2nd runner up, 3rd runner up and consolation
  • Winner’s artwork will be displayed at our homepage while contestant’s artwork will be in our portfolio.
  • Winners will be notified through their email.

   Tools required :

  • A2 Watercolor Paper
  • Buncho’s Poster Color
  • Painting Brushes

    Rules & Regulations :   

1) Paintings must be created in physical media. (no digital paintings)

2)  If your painting wins an award in our painting contest, it will not be eligible to win in subsequent months.

3) Our juror will select 9 winners each month.

4) Make sure that your painting is signed and that the signature is visible in the image you upload.

5) All entries should be submitted online and winner will be notified by email.

Juries : Emila Yusof, Yong Look, Tai Meng Lim

Prizes :  WINNER – RM800

       1st Runner Up – RM500

       2nd Runner Up – RM300

       6 Consolations – Buncho Poster Colour (18pcs)

  • Target audience :

– 20 – 35 years old

– art lover, artist

2. Gantt chart with milestones

Full
A.R.T. Gantt Chart
Chart
A.R.T. Gantt Chart 2

3. Concept Board
Concept Board 2
4. Full Site Map – Include all sublinks and proposed URL for each link (eg. /about.html)

Site Map
5. Wireframe
5.1. Simple Wireframes
total wireframe

5.2.  Greyscale Wireframes
total wireframe greyscale
 5.3. Greyscale Wireframes with copy (lorem ipsum/blind text)

total wireframe greyscale lorem

6. Mockups
total mockup

7. Finalized Design
total

Web Design Project 1 _ Analysis of Microsite

1) #PaletteForYourPalate – TEALEAVES x PANTONE
LINK :http://paletteforyourpalate.com/exhibit
Description :
TEALEVES blends teas specifically for color beside aroma and taste, where this collaboration with Pantone is to bring out the understanding of “ the first taste with the eyes ” concept. TEALEVES reach out to expert from around USA and Canada to indesign with the color.

HOME PAGE

 

– Overall, they successfully bring out the message of the website which is “COLOR”.
– The paragraph followed “F” pattern design which is from left to right, from above to bottom.
– Call to action button set up directly after the description which is easier for customer to shop straight away
– The navigation is easy enough but the word is too small and uneasy to look at.
– TEALEAVES used iconic social media which is much more recognizable.
– The logo (no specific logo) purposely to be small because it want to let the images and paragraph stand out first as the grid layout ​shown below​.

Home Page Grid Layout

Home Page Images (scroll down)

 

– Each scroll down show different grid layout of images to avoid boring typical type of grid.
– Every image shoot with same style and lighting where it look alike to avoid messiness eye leading and sudden color changing.
– Every bottom right corner have a tiny square box stated the color of the food it is.
– Description will appear if the mouse hover over the image.
– All the color sure does make us feel in love with it! <3

ABOUT PAGE

 

– Every sub-pages is a one page design where they keep it simple and short.
– Every image is static with same size same design which make overall look clean.
– Some words are grey in color with a slightly low opacity, is hard to look at with the white background.

DOCUMENTARY PAGE

– Left side navigation bar show title that you can found in this page.
– Also a one page design where you just need to scroll down to navigate.
– Typography with centre align to fill up blank space.

Documentary Page (Video)

– TEALEAVES didn’t just show images with words of course, they also did show video for customer as a further step of understanding about the process of this collaboration.

RECIPES PAGE

– Very colorful isn’t? Calm and peace.
– They provide recipes for each drinks and dishes they designed in pdf. format.
– Beside, you can also print out the pictures of all their dishes on the purpose of “taste it with your eyes”. (make it into wallpaper is also a good choice)

 

15502826_1166744356708902_909335413_o MOBILE FRIENDLY WEBSITE

– They have mobile responsive website.
– Overall it’s clean and simple.
– Took some time to load because of images size.
– Some grey color words are hard to see.
2) #URWHATUPOST – Bolthouse Farms
LINK : ​http://www.urwhatupost.com/
Description :
Bolthouse Farms is a vegetables farmland. URWHATUPOST is an awareness campaign website created to let people aware about what they eat starting from what they post on social media. URWHATUPOST gather the hashtag statistic from online social media and show a comparison between junk food percentage and healthy food percentage.

1

LOADING PAGE

2

STATISTIC PAGE

 

– The first page appears is the counter of hashtag, follow up with food images as shown below.

3

4

HOME PAGE

– The healthy food porn contain colorful boxes while junk food porn contain no color at all on the purpose to show that eat healthy can bright up your day while junk food doesn’t.
– There’s only one page in homepage, no scroll needed.
– Website look interesting with the moving images and create curiosity for user to click on it but it also a disadvantage of it because everything move in the same time which make user hard to focus at once.
– Each images have automatic drop down of a counter of hashtag about the food itself.
– Exp: Avocado have 3,294,377 of hashtag as seen above.
– The word “VS” come second to be notice even it’s at the center because the font is thin.
– Whole page only used the same box grid design which look kind of bored.
– Header is easiest enough where it only contain about and share.

5

ABOUT PAGE

– They used interesting phrase “WTF” instead of “About” to attract user click on it.

6

SHARE PAGE

– Increase awareness by thinking twice before post.

8

7

INTERACTIVE PAGE (Healthy Food)

– Each food have different interactive activities. For example:
– The grape image.
– On loading page, it written there Grape Galaxy and it appear to be a universe full of grape.
– The purple color make user feel excited with what’s coming up next. (Playful)
– The grape keep going around following the mouse hover direction.
– Each game also played different music based on the different situation for example classic, edm, rock, jazz.

10

9

INTERACTIVE PAGE (Junk Food)

– Compare to healthy food loading page, junk food loading page don’t have any color but grey which make it look dull, but that’s the purpose of it to make people feel nothing interesting about cake.
– On the share to social media section, it stated “ Think Before You Tweet ” compare with “ Tweet Your Vegetable “ (healthy food). It fulfill the purpose of think twice of what you post.

15417799_1166805260036145_1811793457_o

15536723_1166805190036152_1621575682_o

MOBILE WEBSITE

 

– It’s not a responsive mobile website where it take very long time to fully load and respond.
– The images being crop and typeface being shrieked.
– In the interactive page, it’s very hard to touch and give respond. Even the typeface also crash with social media icon.
3) Domino DXP – Domino USA
LINK :http://www.dominosdxp.com/#
Description :
“ The Ultimate Pizza Delivery Vehicle “ – DXP stand for “Deliver Expert”, ​which is the first purpose-built vehicle aimed at revolutionizing pizza. This website created to let customer have more further understanding about the new launch delivery service which currently only available at USA certain areas.

1

HOME PAGE

– Simple grid layout with eye leading to biggest image and follow up with call to action button “Go for a ride”.
– Videos are working well in link with Youtube:
– Making of DXP : ​https://www.youtube.com/watch?v=1rpiC1wBfto
– Desert TV AD : ​https://www.youtube.com/watch?v=t5hU2lpJnOk
– City TV AD : ​https://www.youtube.com/watch?v=Rq_YBk8pRL4
– Typeface are fine and bold enough to read.

2

LOADING PAGE

– It’s common to see such loading page in any car race game but in here, it fit well for the purpose of this website.

3

GO FOR A RIDE PAGE

– The main subject is catchy enough at the center with motion background.
– There’s a hamburger icon on right to go back home page. It’s visible enough to notice.

(Following is the half of the ride from left to right each)

gg

GO FOR A RIDE PAGE

– As you can see along the ride, they show out every detail special feature that DXP have.
– Overall positive and negative spaces are well used with color and object.
– The background have motion such as a sailboat or a bird pass by.
– If you notice, the whole ride showed from morning until night and even rain to show that Domino DXP sent delivery in any situation no matter how the weather change.
– They successfully bring out the purpose of the website which is navigate the new delivery model DXP and the message too.

 

4) Boxtrolls Adventure – THE BOXTROLLS
LINK :http://www.theboxtrolls.com/
Description :
It’s a cartoonist website where you can go on an adventure with Eggs and the boxtrolls. Beside then that, there also shown everything detail about the boxtrolls. It’s a website to promote THE BOXTROLLS movie.

1

HOME PAGE

– Eye lead toward the title and characters at the center, follow by the two box on left right.
– Left box lead you to an adventure about the movie timeline while the right one show other feature in this website.
– Overall graphic sure does awesome. (Old time england classical time)
– The typeface are perfect with the boxtroll and classic style.
– The bottom right wordings are a little bit hard to look at especially the opacity of it.
– The title in the middle will disappear afterward and left blank makes the space unbalance where above are heavy while below is empty as shown below.

11

10

LOADING PAGE

– It fit the boxtrolls style well where they use gear as technology to build and light up their underground pipe house.

2

ADVENTURE GAMES (VIDEO)

– There are 4 chapters of adventure from the movie beginning, love, climax, ending and each chapter are short where you only spend around 5 to 8 mins to complete it. (Of course they won’t put every timeline in to give you a spoiler.)
– Every chapter before it start, they will show a short video from the movie following the chapter. This is to let user understand and get attracted to the story itself.

3

ADVENTURE GAMES (INTERACTION)

– From the picture it look interesting but the interaction is just normal click and go where you just need to collect cheese to pass the chapter.
– It serve the purpose following the movie where they also searching for cheese in movie.

4

ADVENTURE GAMES (INTERACTION)

– There are also some mini activities in the chapter to make it more interesting.

5

MENU PAGE

– After playing the game, normally we will click on the menu in order to lead us back to home page but this website doesn’t follow the typical rules. To head back to home page you will need to click on the title logo at bottom left “THE BOXTROLLS”. This part of navigation make user confuse.
– Menu page is where you can found out the feature of this website.

7

TRAILER PAGE

– Every trailer list they posted available here link with Youtube.

6

CASTS PAGE

– As you can see, all the character are facing the wall and you can click on it to read a simple description about the character.

8

PRINT AND PLAY PAGE

– They also provide prints and play, interactive page where you can print out the provided designed paper and have fun with families.
– It’s very suitable for kids which is their target audiences.

9

EXTRA FEATURE PAGE

– This page show mostly the promote and share function.
– The social media icon appear when you hover over the social icon and there’s a page where you can also share to social media which is messy information given that appear multiple time. It is unnecessary to do so where they can just straight put on social media icon on the bottom right.
– After click into this page i can’t click back to the home page where it stuck at here only.
– Basically, this page can be shorten out or just put into the menu page.

 

5) Dawn  Of Apes Quiz  – Dawn Of The Planet Of The Apes
LINK : ​​http://www.dawnofapes.com/#quiz
Description :
It let you test quiz to calculate which character are you based on the movie. Overall, it serve its purpose well where the movie show about how cruel and status in the society is no matter in apes world or human world.

HOME PAGE

– Everything look very serious with dark color tone and bold typeface.
– The word “TAKE THE TEST” come first follow by the background picture and copy-writing.
– The footer is clear and easy to read with black and white color.
– Recognizable social media icon used.
– The word “MENU’ on top left is not needed where there’s already have the hamburger icon with it.
– The red box on right make the space on left right unbalance but it doesn’t have any big deal because the color used make it blend well in someway.

LOADING PAGE

– Overall, used colors are only red, black and white.
– There’re some short paragraph can be read while waiting for the page to load where they actually make a good use on time.

RESULT PAGE

– The result page came out based on the choice of answer you chooses.
– It appear to be a status of character in a society and you can explore the character deeper.

4

CHARACTER EXPLORE

– It listed out each character relationship with others character and also some behind the scenes photos taken.

MENU SECTION

– The menu section is just a minimize of the whole page horizontally and let you choose which page you want.
– Overall the website navigation is simple and easy to understand.
– It serve the purpose like taking a personality test to know your inner self.