moodboard

Web Redesign

PALLAS

4screenshots

The frame of the main-page is very small, leaving a lot of empty spaces around, which causes difficulty for the viewers to navigate around.

The flash intro which slowly loads the elements one by one is rather frustrating as it keep repeating everytime we enter the main page and there isn't any option to skip it.

Colours used are rather primary, giving the unpleasant feeling to the viewers. The strong vivid yellow green is not harmony with the gaudy red border, causing a lot of disturbance to the eye as it is too contrasting.

There isn't proper margin to seperate the columns. It simply confuses the readers.

This is the page which under the section of "cool sports" . Once click, it brings the viewers to a whole new layout, breaking out from the previous one. Though the colour usage is the same, but the feeling is rather different. It is not in the center as it used to be.

There is not any css style to control the colour, fonts, and sizes. The colours used for the links are really raw ; the ultramarine blue and the deep purple.

The typeface chosen for the font makes it hard for the readers to read.

the contact us page.

the location page

the products page

4 url and screenshots of beautiful commercial websites.

http://kitschen.com

Though it is rather casual, but there are clear instructions on navigating the website ; which is to drag the zip across the page and it shows you other aspects.

http://lorealparis.com

Rather formal, but it has the classy layout. With usage of minimal colours ; faded purple and white, it gives the corporate feeling.

http://www.forever21.com/heritage1981/main.asp

The layout consists of few pictures with rollover effects. It's rather simple yet attractive.

http://fudge.com

The grunged up effect accentuates the whole experimental idea but it still does look tidy and neat.

4 url of competitors & screenshot

converse. it has a simple design, with one colour - black which gives a simple outlook but also attractive. the navigation bar is a texture of leather, which is the material to makes shoes.

nike. as oppose to converse, nike has many ranges of shoes which cater for different groups of people. hence , for this, it attracts young adults, suggesting energy and youth as colourful colours are used .
reebok. the sleek and simple layout simply speaks for itself. the navigation is rather clear and does not confuse the viewers

adidas. the montage/ collage like effect is rather interesting , displaying the many activities and uses of the adidas shoes.

the sitemap

gantt chart




4 url of html, css javascript tutorials

http://www.htmlgoodies.com/

http://www.good-tutorials.com/

http://csshtmltutorial.com/

http://www.javascriptkit.com/

4 url of design tutorials

http://www.smashingmagazine.com/2009/08/10/discovering-papervision3d-best-design-practices-and-tutorials/

http://www.grafx-design.com/tutorials.html

http://webdesignledger.com/tutorials/27-useful-logo-design-tutorials-and-tips

http://creattica.com/

Sketches

Sketches for web design. HOW TO LOOSE WIEGHT WHILE WORKING.



01. the first one, is using normal iframe to browse, whereby the user has to scroll up and down to view . rather plain and common, so i thought of the 2nd idea.

02. this one is more interesting, where when the user clicks on a link, the whole content glides horizontally ; showing a transition, and shows the next content.

it's javascript, more lke advanced javascript, which is actually pretty simple to understand.

i've actually found the script online, and i've configured it, changed a bit, and done a prototype.

it gives users a much interactive feeling, as compared to the normal linking and loading.

(Jo has approved on this, idea and this is a refined idea.)

the concept is to portray the normal daily life at the workdesk, rather to relate to the workers/ students? to give a closer feeling on what they are experiencing everyday, which is sitting on the workdesk working and having no time to exercise.

it'll have items such as dumbells, medicine ball, treadmill platform for the content , to beat away from the normal mundane sites which teaches people to loose weight and exercise. it's also to create some excitement in the users, rather than to bore them, as exercising can be pretty boring.

art direction wise, it'll be realisitc, using real photos, then montaged together.

this website uses the same concept of content gliding,

http://lucuma.com.ar/

mood board

MOOD BOARD for HOW TO LOSE WEIGHT WHILE WORKING

page planner

01. intro on concept of losing weight while working (intro, what is it , whats new)
02. who (anyone who deals with computer most of the time. eg : working ppl, students)

03. why & how this works (proves & explanation)

04. task 1 (stretching exercise)

05. task 2 (cardio exercise)

06. task 3 (weights exercise)

07. workout planner

08. nutrition planner (healthy diets & snacks to eat while working)

09. downloads ( download videos, meal planners, workout planner)

10. other tips to loose weight

website initial ideas

Ideas for website


01 . HOW TO MAKE KAWASAKI ROSES.

yes, its origami, to make papers roses. it's one of the most beuatiful handicrafts which you can make out of paper.

once you get the hang of it, it's pretty simple.

the ones which are onthe internet are pretty hard to learn, so for this, i'll simplify it, using my own methods, and own terms.

// new edit ; after some comments from yen nee

kawasaki is a japanese term, also symbolising masculinity, while on the other hand, rose, represents the female.

hence, my concept is to teach guys to make kawasaki roses for girls.

when it comes to special days like girlfriend's birthday, anniversary, valentines day, etc etc , us males as boyfriends will be scratching our heads, trying to think of something extraordinary and romantic to give the girls.

so, these kawasaki roses are the perfect gifts. though it is just origami, but never take it lightly. learning to make them and making them specially for the girls is not easy.

guys actually taking the effort to learn to make them cannot be valued with money and can't be compared with the roses which are available in shops. it is the effort from bottom of his heart.

these roses made, even though the outcome isn't as fanstastic, will surprise the girls. after all, its the effort and the sincerity of the guy that counts. it shows that the guy cares very much for his lover.

with these tutorials, a simplified one, with diagrams, guys are able to make their roses for their love ones.

hmm, no girlfriends or wives? make them for your mother! I'm sure mothers will love these roses. show that you care for your mom and make her happy by making these roses and giving them to her.

as long as the rose is done by oneself, it'll definitely make the receiver very touched and happy .

title : HOW TO MAKE KAWASAKI ROSES FOR GIRLS

01. what are kawasaki roses (pictures to demonstrate & introduction)

02. who created kawasaki roses ( the original founder of it & history)

03. why should guys learn to make these roses (reasons to persuade guys to make)

04. usage of these roses ( to give to love ones, how to surprise them, when to give them)

05. 1st task : to make the rose (drawings, plus photos)

06. 2nd task : to make the calyx ( leaves)

07. 3rd task: to make the stem & join all of them together

08. final outcome (gallery)

09. download page (wallpapers , icons, and instruction sheet ; pdf)

10. faq ( any enquiries, uncertainties, send an email over.)

mood pictures

Mood

this painting depicts anger, vengeful. the bright, vivid , gaudy red paint suggest a great depth in anger which i want to illustrate. it could also mean passionate , but it somehows shows anger .

warm colours such as orange do help to accentuate the feeling. the strokes are rather rough, moving from one corner swiftly have an intense amount of energy which flows.

there are also paint blots are also randomly splashed on the paper to show the things i can do when im angry.

this picture on the other hand, represents calm and serenity. though yellow is a warm colour, it gives me a very relaxed, comfortable feeling. the strokes are rather soft, mellowed down, not as rough as the picture above.

the long line, which is drag from one end to the other end simply shows that nothing is in the way, and i can just relax without worrying about anything.

its just a simple monotone painting signifying that being calm and relaxed is easy and it should be done always.

this picture gives the feeling of happiness. i randomly flattened the brush ends on the paper, and it produces flower shape. dotted lines are added , connecting all the splats together , and to join all of them, green curvy lines were drawn. complementary colours are used ; red and green, and it reminds me of christmas, where it is filled with warmth and joy.

the overal shape, it looks like a bouquet of roses, and it is a symbol of happiness, joyful.

design interface

design interface for interactive story.  give your comments ;]   

click on it to view it for a clearer view. ;]
the main page
the main page with rollover effects
the 2nd page

the 3rd page

character page  - the young girl

01. are the fonts readable? 

     [yes / no]

02. is the background suitable for the theme?

    [yes/ no]

03. which part of the interface design is the most interesting?

 A. The typography

 B. The illustration style

 C. The mood & theme

 D. Nothing at all. (doesn't impress me)

 E. Fine with everything

04. do you find this style (vector) interesting ?

 A. yes, it works for me

 B. it's quite okay

 C. nah, its rather plain. (why)

05. can you understand the story from the text?

 A. yeah, its clear

 B. hmm, not really. (why)

06. are the visuals (illustrations ) strong enough?

 A. yeah, I can understand it, without reading the text

 B. it takes a while to fully understand it.

 C. no i don't understand it at all. ( why)

07. what other suggestions or comments to improve on the interface?

 (ie; more elements can be added, improve on colour & theme ......)

thank you for your patience and time ;]