Online Desktop Design Evolution

I started off my research by looking into existing web page designs for children around the age of my target audience:

beautiful-website-webdesign (33) kids-answers-2 pbs-colors

From my research I discovered that these types of web pages use bright, vibrant colours and large text to grab the attention of the user. It also creates a fun atmosphere with minimalism and ease of navigation. So I will consider these factors when I design the online desktop application.

I wanted to make sure the design of my online desktop application was consistent with that of my poster design. This meant using the same colour palette and typefaces most prominently. My first initial design was based upon the existing format of my poster.

INTERACTIVE

 

The design was minimalistic to suit my target audience of 9-13 year olds and remained consistent with my poster, but it didn’t look like it had the potential to be interactive. There is little instruction for the target audience to decipher how to operate the interactivity.

Interactive design Interactive design3 Interactive design2 Interactive design4

 

My second design looked at a more interactive design that focused on ease of navigation. The user simply has to select one of the circles from along the bottom and the information will be displayed along the middle of the design. The colours do not run consistently with the design of the poster and app design.

[UPDATE]

IDEIN IDEIN5 IDEIN4 IDEIN3 IDEIN2

In the most recent update for my online desktop I changed the colours to match that of the App and Poster. Similarly, I would like to develop the amount of space left via the grid system on some of the pages. At the moment I feel like this has better ease of navigation compared to the application because of its size and understanding. The vectors will be further developed alongside the App and Poster Designs.

[UPDATE]

Finalising the designs I redesigned the twin Einstein to look neater as well as adding a spaceship to the Twin Paradox Theory. I went about cleaning up little parts to make the overall design look neater and finalised.

Poster Design Evolution

Initially, I wanted to continue using space colours to detail Einstein and the Theory of Relativity. Following the release of the video game Fallout 4, I wanted to explore ‘The World without Einstein’. Therefore I did some research into existing Fallout posters to see whether I could draw some inspiration.

fallout_custom_poster__big_boss_cigarettes_by_mattthekid-d5el6mq

http://mattthekid.deviantart.com

fallout_custom_poster__super_duper_mart_by_mattthekid-d5el81w

http://mattthekid.deviantart.com

 

 

 

 

 

 

 

 

 

A common pattern in these posters was the use of archaic type and black-vectored caricatures. The use of colour and design is very consistent with the 1960s. Using these posters as reference points I began to develop some ideas. I used the research obtained from my app design to form a starting point for what to include in my posters.

Early Poster Design

Early Poster Design

I started to number and gather facts that would support the claim that the world without Einstein would not have developed as it had done. Using the Noun Project I looked at what kinds of vectors I could use. As templates for early designs I used GPS coordinates, swastikas, and a baby. To continue the exploration of this Fallout theme I used a paper texture to make the background look worn and dilapidated. The design didn’t look like it could progress because of what I was trying to say about Einstein.

As a result, I decided to produce a combination of Einstein’s Theory of Relativity and how relevant he was as a person, which would include the world without him. This steered away from my existing research into the Fallout theme:

EINSTEINPOSTER

This design built upon the basis of previous infographics. Originally I had designed France’s Electrical Production as a pie chart however the information I was trying to portray wasn’t legible and did not conform to the overall design. Therefore I chose to produce a sideways bar chart that listed the percentages of power, which was not identifiable in the previous design. I had outlined the basis for a timeline but did not look into what I wanted to put on there. I designed all the vectors that appear on the page. The final typographic was based on the Twin Paradox. At the moment there is too much white space so I want to include a spaceship travelling across the dotted line and possibly more information. I am pleased with the variation of the vector. I may choose to have less information in the theory explained section as it is a lot of information in a small space.

[UPDATE]

EINSTEINPOSTER2

 

In this version of the poster design I reduced the amount of text in ‘The Theory Explained’ box and added new vectors to explain the example of relativity provided by Carter from Trending Sideways (http://trendingsideways.com/index.php/the-theory-of-relativity-for-kids/). I still think more text could be reduced but it aids in the understanding of the complex theory. I would still like to reduce the amount of white space amongst ‘The Twin Paradox’ section and further develop the caricatures. I also enlarged the type on the timeline so that my target audience could read it better.

[UPDATE]

Finalising the designs I redesigned the twin Einstein to look neater as well as adding a spaceship to the Twin Paradox Theory. I went about cleaning up little parts to make the overall design look neater and finalised.

App Design Evolution

Initially, before focusing on any kind of audience I launched myself into designing a format for an application. This was just to develop ideas and see what I could come up with. The result was:

Early Designs

Early Designs

Early Design

Early Design

 

 

 

 

 

 

 

 

 

I chose white type against a dark blue backing to relate to the Theory of Relativity’s space applications. Despite having the dimensions of an app, the design was significantly lacking. The design did not look like it was an app. I aimed to have the bottom left square slide down to reveal more information but nowhere was there an indication this was possible. This was something to consider to future design.The way I chose to portray Einstein’s name was similar to the periodic table of elements and I chose to typeface ‘Bebas’ to create a powerful impact for his name and theory. To further develop my designs I will incorporate ease of navigation for young children so that they are able to use the app.

Developing a working app design

Developing a working app design

Developing a working app design

Developing a working app design

 

 

 

 

 

 

 

 

 

Acting upon influences from existing Einstein infographic I chose to use a pale pastel colour for the backdrop to make the vectors I had developed stand out. Using the website Noun Project I found a vector of Einstein. As a template I traced over this and deleting previous elements. This was just a rough idea of what I wanted my Einstein vector to look like and requires development of my own. I particularly liked the atom vector I developed as a navigation system. The user is prompted to select a circle to find out more information about the Theory of Relativity. The typefaces used all work in synergy to relay information to the user. Using a PSD assets file I placed the stock iPhone bar along the top of the page to give a realistic idea of what this app will look like. Much like the Einstein Vector I will develop my own style of these assets so as to fully create my own work

The use of the share button on the bottom encourages the user to spread information more easily which is one of the goals I set myself to educate younger people about Einstein. Young people need to be able to spread this information and adding a share button that can be linked to Facebook or Twitter is invaluable.

[UPDATE]

EINSTEINid  EINSTEINid2 EINSTEINid3

 

EINSTEINid4EINSTEINid5EINSTEINid6

I began to consider colour more once I had begun to develop my poster. Although my research had shown the use of pastel colours I wanted to consider my target audience and what would grab their attention as young children. Therefore I chose to use more vibrant colours but also stay true to green/orange like colours.

Furthermore, I began to develop a fixed set of vector images, that would become staple in my designs. This is to maintain the simplicity of understanding for children. They should be able to associate these images with words/phrases/things they have learnt through the designs.

[UPDATE]

Finalising the designs I redesigned the twin Einstein to look neater as well as adding a spaceship to the Twin Paradox Theory. I went about cleaning up little parts to make the overall design look neater and finalised.

Second Brief Discussions

Upon learning the details of the second brief, ‘Einstein and the Theory of Relativity’, I decided to do some research into the topic and look at already existing infographics relating to this theory. The resulting research was intricate and detailed to an extent where it did not look simplistic enough. It made me question how young people would be able to understand this theory if I could not understand it myself. How many other people were in my position? The already existing infographics were plain and did nothing to further my knowledge of relativity. That’s when I started looking into Einstein as a person. Infographics about his life were frequent and look generally better and more interesting to read, but what made them different from one another?

I had to make a list of the things I could do to design a set of infographics that would engage audiences.

  • Target Audience would be young people (9-13 year olds) without an understanding of Einstein and the Theory of Relativity.
  • How could I make my infographics stand out from the rest?
  • What aspects of Einstein as a person had not been explored?

2.jpg header.jpg tumblr_kwrq9sTKDz1qz7z7io1_1280

 

All of the existing Einstein’s infographics shared a common feature. The use of green, pastel colours were prominent in all designs.This allows diagrams and writings to be more impactful to the reader. These colours are also more calm and inviting rather than be in your face. These infographics look more targeted to a mature individual as children would rather have these explosive colours to attract their attention. As I am designing for young teenagers I would like to mix and match ideas between the two to create something captivating as well as informative at the same time.

[UPDATE]

After doing research into sensible typefaces to use I came across a presentation that showed the trendiest font combinations of 2015 (http://www.slideshare.net/adamnoar/presentation-panda-2015-font-trends/).2015-font-trends-for-presentations-11-638

There were:

  • Handwritten fonts that mimicked the look of handwriting.
  • Flat fonts that complimented flat design.
  • Mixed fonts that go well together.
  • Hipster fonts with a contemporary feel.
  • Bold fonts that demand attention.

I chose to use Bebas Neue because it was in fact a bold font that demanded attention and would be powerful for headings. I then chose to use Lobster for subheadings because of its fluidity and the way it mimicked handwriting would create a complimentary contrast. For the body of texts I chose the typeface Aleo because it had a neutral impact that felt like it could portray information legibly to children. I feel like this combination is well aimed at my target audience of 9-13 year olds.

[UPDATE]

After the discovery of The Noun Project I decided to opt for vector-type graphics because the simplicity of these designs would appeal to children and would be easily identifiable. The Noun Project provided the perfect template for me to develop my ideas and create my own types of vectors to be used in my designs.

Screen Shot 2015-12-10 at 03.52.19

 

Creation of the Einstein Caricature

noun_213812_cc

Using this existing icon vector sourced from Noun Project. I developed at a similar yet different idea for my Einstein. In order to do so I made him look cuter with squinted ideas and crazier hair to appeal to my target audience.

Screen Shot 2015-12-11 at 03.15.31

As a centrepiece for my designs and logos I included the symbol for atoms and electrons with Einstein in the middle. These would provide a basis for my designs to take shape.