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

Ideas Continuation

Idea 01. How to make a lampshade out of origami roses

Elaborating on the previous idea on making roses, this is an extra step to join the roses to form a lampshade.

- a lot of roses will be needed to form the lampshade. it'll be sewn together, forming a spherical shape in which a lightbulb will light up in the middle.

Apart from the first idea, these are some other ideas for the website.


Idea 02. How To Spot If Your Husband/ boyfriend is Lying (For wives/ girlfriends)

The techniques bellow will show you how to tell if you are being lied to. These techniques are used by government agencies for interrogation. They can easily be utilized in relationships and in business situations. To make successful use of these indicators, it helps to know the suspect's ‘normal' body language and reactions to different situations.

Movements - Expressions will be stiff. Liars will use fewer hand movements and take up less space. All physical actions will generally take up less space than usual.

Face touch - Liars will touch the area around their lower face, i.e. scratching the nose, touching the lips or chin. This is an instinct from birth, much like when a child covers his own mouth after a lie, only it has developed through age into less obvious actions.

Eye movement - The eyes of dishonest people will tend to move around a lot to avoid meeting your gaze. However, staring at your eyes for prolonged periods is also an indicator of a lie. This is often because liars have learned that their eye movements are a giveaway and they are trying to control them.

Pupils - Pupils will dilate when a lie is told; this is due to the adrenalin being pumped into the body. This factor will also depend on the severity of the lie. Small white lies may not dilate the pupils.

Stance - Liars often feel uncomfortable standing directly in front of an accuser and may avoid standing with their shoulders squared to yours. Instead, they might stand slightly to the side or with their shoulders offset.

Expressions - Expressions are limited to the mouth, e.g. if a liar fakes a smile, he will only use selected muscles whereas a natural smile utilizes muscles over the whole face.

Palms - Liars often try to hide the palms of their hands. This is also instinctive. Hands behind the back or in the pockets are also positive indicators.

Objects - Liars will play with objects in their possession such as a handbag, bracelet, mobile phone or hair. They may also put an obstruction between themselves and the other person, often something as simple as a coffee cup. This is a subconscious way of attempting to ‘barricade' themselves to relieve the tension of lying.




Idea 03 - How to burn calories while working (sitting down on a computer)


01 SITTING AT A DESK - You can push your feet up onto the balls of your feet. This exercise really works out your calves. You will feel it if you do enough of this exercise. You will burn calories and not even think about it because you will be thinking about your work.

02 ABDOMINAL MUSCLES - Tighten your abdominal muscles for as long as you can hold it. Release and tighten again. This exercise will burn lots of calories. Another exercise that you can do without thinking about it.

03 LAPTOP - If you have a laptop computer you can lay on your stomach and work on your computer. That will free your legs to do some working out. There are various leg exercises that you can do in this position. Just remember to keep moving if you want to burn calories while you are working on the computer.


04 Trade your office chair for a fitness ball. A firmly inflated fitness ball can make a good chair. You'll improve your balance and tone your core muscles while sitting at your desk. You can even use the fitness ball for wall squats or other exercises during the day.


05 Try a treadmill desk. If you're ready to take office exercise to the next level, consider a more focused walk-and-work approach. If you can comfortably position your work surface above a treadmill — with a computer screen on a stand, a keyboard on a table or a specialized treadmill-ready vertical desk — you may be able to walk while you work. In fact, Mayo Clinic researchers estimate that overweight office workers who replace sitting computer time with walking computer time by two to three hours a day could lose 44 to 66 pounds (20 to 30 kilograms) in a year. The pace doesn't need to be brisk, nor do you need to break a sweat. The faster you walk, however, the more calories you'll burn.

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 ;]

Progression

progress for pixel art ;] [project 1]

;]