The blog of wonders

Looking back i remembered that for my R+D i had made some mock ups of what i wanted my website to look like, not in terms of colours and content but rather the layout and the symmetry. Here are those mock ups for  a refresh.

 

 

now when its coming to making my website for real i have a few things that i wanted to be included into it, there was a list i posted on this blog before, and this is that list:

• Top left hand corner logo
• Scrolling header images
• Blue, black and white colour theme
• Relevant images embedded in different shapes opposed to the default rectangle
• Rollover navigational bar
• Small graphics alongside text
• A variety of bold, italics, capitals and underlined texts.

By keeping to this criteria i will know that i have kept all of the same elements that the top brands of the gym and fitness world seem to have on their websites. I’d like to call them the staple website needs.

I have been working more on the video recently and here are some of the extra parts i have added:

Firstly i have created a mock up of the phone screen, not a real life looking mock up but more like a cartoon mock up to suit the theme of the video. The keyframing for each individual digit took a while because they had to be edited in as separate elements in order to key them in at different times.

 

An animation of the progression of a chart was also created by separating the different sections of it and simply keying in the opacity from 0% to 100% which also coincided with keying in the face at the side to suit the table’s progression.

 

 

Similarly to the dollar signs earlier on in the video i decided to rain down a few gym related words that are different exercises in the gym that could be completed with the help of GymScn. With these i decided to make them all the same size but to then make them 3D objects and put them forward or backwards in 3D space. I then rearranged some of the speeds that some come down to sell the effect of the different distances away. I believe that this technique worked a lot better than simple resizing to make them look bigger or smaller because it shows a slight parallax that however may not be too noticeable, would be picked up on subliminally as looking more natural.

To start with i had to make the character Johnny – this came from a template to which i added elements of feet, hair, different arm positions and different facial expressions. These were all saved to psd files which i then imported into after effects as separate elements and used the puppet tool and keyframing to move elements to where i wanted.

 

 

 

By the time of making the video i had enough of a website in order to take screenshot of it. This enabled me to add them into the animation to explain the website better with visual elements. Although i’m sure the website will change over time so these will be outdated, it will show at least some representation.

 

 

Making the dollar signs rain down over the screen was probably one of the more tedious jobs of the video. Just to place all of them and then to resize and animate each one individually at different speed making sure they don’t clash too much but aren’t separated too much either took a long time. In total there were 14 and  they had to be moved and rejigged around quite a lot in order for it to look visually pleasing. Some of the ones that are blown up a lot are quite blurry and pixelated which is a shame but i think its better than having all small ones instead. Plus that would have taken a lot longer because there would have been more layers.

 

To start planning the promotional video i have started with a rough storyboard of what i would like it to look like. There are certain elements that i would like to include in there such as the use of screenshots of the real website when its done, the use of graphics such as a graph and a phone and the use of a cartoon character of some sorts in order to add a narrative to the video.

I also have written the script for the video, this will now be narrated by myself as i have no other people to do it for me and i cant afford to may anyone to do it professionally right now.

 

Script

This is Johnny, He wants to get fit.

However he’s worried about not knowing what to do in the gym (arm falls off).

He also struggle to remember routines and regularly forgets what exercises he did last time.

GymScn is a brand new web application that helps you, and Johnny, achieve your goals by taking what you already do in the gym and giving improvements on what exercises to do, when to do them and even how to do them. It acts as a personal trainer for you without the hefty price tag.

So, How does GymScn work? The technology is based around scannable QR codes which are attached to all of the machines and free weights at your gym. All you need to do, is simply scan the code with our app on your phone or tablet, and then enter the details of your exercise such as the repetitions, sets and the total weight that you are using.

GymScn will then log this information, making it super easy to go back and see what exercises you have done in the past, the improvements that you have made over time (graph) and a range of your personal gym information, all at your fingertips.

No more walking around the gym aimlessly or writing tedious notes down in a note pad, the new revolution of gym routines is here…