Second Page of Website

First Draft

This is an example of the activities which will be on the website. I created this first with 3D graphics of the red boxes which the audience will press to find the clue to the theory. The character graphic is also there and narrates the instructions to the activity. 

Website

 

Second Draft

The 3D boxes and speech bubble did not look right on the blackboard background and therefore, I created these chalk drawn boxes which suit the theme more on the website. I have also added the original character graphic. 

Second page of Website

 

I think that the second draft looks better with the theme and the graphics work well to suit the website and the subject. 

Poster Design Research

For the poster and Infographic, I wanted to use a timeline type of Infographic which explains key Einstein facts which could be used in a classroom. 

Einstein

 

 This poster uses bold font and the graphics are fun and interesting. I want to also create a poster and infographic which uses these graphics and ‘fun facts’ in the timeline of Einstein. 

I also want to use the poster as a theme with the website and app with having it as an interactive poster which could be printed from the website when the audience click on the icon for the blackboard. 

blackboard

 

http://www.thinkstockphotos.co.uk/royalty-free/chalkboard-background-pictures

This image of the blackboard is going to be the background for the poster and I want it to look as though this is actually on the website and app as part of the game. 

For the graphics, I have also created them as though they are drawn onto the chalkboard.

EarthApple Untitled-7Medal

The App

I have been looking into the idea of Websites and App design and there are similarities in the theme and the style of the colour, graphics and the look of the website. These are a few examples I found that are both similar in they use design in the website and the app. 

examtime

 

The exam time Website and App is an example of how the colour and design is the same throughout. The colour schemes are also simple and easier to navigate around. This is something I want to use in my graphics and website. 

I have created an interactive app design which would be appropriate for the audience and the subject which uses the same character graphic of Einstein as the website. 

 

App Front Cover 1st Draft

 

I have decided to do an opening page to the app with the Einstein graphic coming up which goes with the theme of the website. I want to make it seem as though the app is actually the chalkboard on the wall in the office of the website. The app will be more interactive than the website more interactions of the app and games. 

When the app is opened, there will be the office which is the same as the website design and the audience is instructed in how to use the app and the game.

 App

This was the first draft of the app and I am happy with how this looks with the website and the graphics work well with the theme. 

I then wanted there to be more information for the audience and to use the other Einstein graphic. 

App

I wanted this app to be easy to use and the colour scheme and graphics to be the same as the website, although the use of the app is more interactive and get a better view of the office.

Even though the design of the app is similar to the website, this is what I wanted as I think that this works well within the education games such as Bitesize. 

First Draft of Website

For the website game, I want there to be interactive features on the background of the office which the audience will be able to click on and take them to another page in which there will be a game they will play which will give a clue to help Einstein ‘Find the Theory’.

The background I created through the editing of the real image of Einstein’s office has a very animated look to them which I wanted. The focus of the game will be the cartoon character of Einstein and the blackboard. 

Einstein Brief

 

I am pleased with how this first draft looks and the style of the design, it is an eye catching colour theme and the graphic works well with the image. I have also chosen the font ‘Chalkduster’ to give it an authentic look, but also it is animated to look this way. 

I want to look at how I could make the speech bubble suit the website more as this does not work with the other graphics in the photo. I also need to use the graphic I created in photoshop rather than the one that is just image traced from the internet. 

I am happy with how this website looks and I want to use this theme throughout the website, app and poster style.  

Einstein Graphic

After looking into what sort of graphic I wanted to create, I then took the image from the internet into photoshop and traced the basic outline of the Einstein graphic.

Screen Shot 2015-12-10 at 15.25.07

For the website, I wanted a more hand drawn look to it as though it had been drawn on a blackboard like the background for the website. I wanted to make it look as though the character had come out of the blackboard and into the office. 

Screen Shot 2015-12-11 at 07.44.58

 

This is the final Einstein graphic which will be used on the website, app and poster. I used different brushes on photoshop to give it a chalk board look that will work on the background of the website. 

For the game, I also want there to be buttons which the audience will click on for the game. I want there to be a colour theme which will run through the website, app and poster. I wanted these to be question marks which the audience would click to start the different games. 

Untitled-192

This is the first draft of the question mark. I like the colour of this as it works with the Einstein graphic and is bold to the audience.

Untitled-19

This is the final graphic for the question mark and so this will be used on the website for the game. It is clear and works well with the Einstein Graphic.