Animating website

I have continued on with the website this morning and added a couple more animations throughout, in order to keep the site interesting. Due to creating more of an interactive instruction manual that I want to follow on with a game, after deadlines, I am going to create an advert for the up and coming game, of which I will preview on the website. Screen Shot 2016-03-23 at 10.47.37

On the home page, at the bottom, I have provided this information. I think it is important to create a facebook and instagram page as well as link it to a youtube channel, due to potentially reaching out to more of an audience.  A lot of young children use social media and even though they aren’t the main users, the teachers that will consider using this assignment in class are frequent users.

I briefly went on to creating the facts pages about each planet, however have only completed the section on planet Earth. I like the layout of these pages, however I plan to make them more interactive down the line.  I really want to incorporate an animating solar system, somewhere in the website however I was tackle that task next week.  I might even include this on the planets information page and make toggles so you can switch between each planet. This is what the planet Earth page looks like so far:

Screen Shot 2016-03-23 at 10.47.49

Obviously this is a still image and therefore you cannot see the animations, however the moon is rotating 360 degrees around earth and the smaller earth is rotating at 360 degrees every two seconds, whilst the rays of sun move to and from the planet. This is a demonstration of how seasons/day and night work.

Animating website

Using Muse

After some more experimental work on the animating WebGl solar system, I decided to move onto creating something more simple and 2D. I won’t disregard the idea of an animating solar system just yet, however I am finding it more difficult to work with and don’t want to spend too much time worrying about it potentially not working.

After deciding to continue on with something else, I looked into working with Muse and so far I think it’s going really well. I have been using Edge alongside Muse for my animations and I am finding that the two work really nicely together. I have so far created my Landing Page and Home Page…these aren’t completely finished and I may alter them further now the line, however they are doing a good job at representing what I particular theme I want to follow on with.

Screen Shot 2016-03-21 at 18.04.54

 

I have redesigned the logo for my work, as I believed this style was more suited to the Space theme. I have ignored the stereotypes of space with regard to colour scheme and design in many other regards, that I thought keeping the font relatable would be a good idea.  There are also connotations to ‘Space Invaders’, the arcade game and I thought this was also appropriate when branding my product.

Screen Shot 2016-03-21 at 18.05.03

The Homepage show above, doesn’t contain too much written detail as I don’t want to bombard students with an overload of information. It gets straight to the point and is quite playful. With adding the option of ‘No, Space is Boring’…I am going to try and change the minds of those who don’t want to learn about space, by linking this page to basic facts and figures and designs, hopefully enticing students to want to learn more.  The ‘Yes, I’m So Ready’ page will link to a preview of the sketch book provided in the kit, asking them to open it up and write their Names etc (will provide an example). In the next week, I am going to create all the individual pages and briefly add notes to them so I know exactly what needs doing on which. This will enable progress to happen and put me on the right track, so I know how much needs doing daily in order to complete this project in time for testing.

Using Muse

Animated Solar System

I have spent some time working with my tutor to build an animating solar system, using Javascript in Brackets. I have decided to use this process as part of my experimental phase, due to the work being too difficult to tackle. I am not overly familiar with using javascript and therefore some of the functions are foreign to me, especially because its using THREE.js. What has been built so far looks awesome and i’m really happy with the outcome, it is also really easy to process the animation as it requires you to only change a number. For example the orbit speed/distance from the sun is controlled using numbers, as is the planet and sun size. However, I want to tackle another way of creating a similar style thing, that I can enter onto a webpage.

When previewing the so far built solar system, you have the option to switch from a 3D view to 2D. I have included two images of what it looks like when previewed.

Screen Shot 2016-03-10 at 17.04.30 Screen Shot 2016-03-10 at 17.04.47

Animated Solar System

the solar system

Screen Shot 2016-02-28 at 21.56.58

I have continued with my planet doodles and adding every planet in the solar system. Each one has different patterns and colours, in order to provide my target audience with some idea of how creative they can be. The planets purposely do not resemble the real things, however the arrangement of them symbolize space. I am really happy with these designs and can now move onto creating adding extras, that can animate on my instruction manual. I currently have plans for rockets and space ships.

the solar system

doodle vs doodle

I  have started to create all the assets needed, before I begin the build of my online ‘interactive instruction manual’. I decided to start with the sun and as i’m going down the route of doodle design, I though mocking up more than one idea would be appropriate.

sun doodle 2The first sun was drawn quickly, without  much thought. I like the colours and they provide easy connotations of what the image is supposed to represent. After designing this sun, I wanted to create another, with the same colour scheme and basic jist, but with a different element of ‘doodling’. Therefore, I did a little more research and looked at previous doodles that I had created. I decided, going with the more ‘drawn’ look was appropriate. I drew two basic circles and quickly sketched some beams coming off the sun, to look like they had been drawn on with colouring pencil. I like this design more as it is more appropriate to the theme I want to give my product. I will now draw the rest of the planets, with this style in mind and begin working on some sort of product branding.

sun doodleThe orange wasn’t originally part of the colour scheme that I wanted to use, however I will continue to add smaller quantities of colour outside of that scheme and make the main details and presentation follow it. This is due to working on a particular subject that enhances the use of colours. I can’t make each planet look the same, it would take the point of using one’s creativity and imagination, away from the intended proposal.

doodle vs doodle