This test was a really important stage because it stopped me from doing what I planned to do. I wanted to use the grid system for the homepage which looked really nice and had fluid animations between the different screens. You can see a working model of the example I was working on here.

It looked really good, inital testing showed that should be a reasonably simple example to work with. The only issue I had encountered so far was the mobile version would need to be completely different as it looks so compacted when in the mobile version as can be seen here;

Screen Shot 2016-03-22 at 18.28.51.png

Then I tried to work with the code itself. While I had read an entire book ( JAVASCRIPT & JQUERY written by Jon Duckett) on reading and writing javascript code, it still managed to beat me. I believe that though using online forums etc to double check my code it was in fact correct but unfortunately the javascript I wanted to use clashed with the Polymer project and returned the user a blank screen.


I tried to create a div with a set id of #test2, then I created a string connected to the div using ;


This would pull the information from the div through the javascript. Therefore, it appears  through trail and error and online feedback that this just wouldnt work in this scenario.



Restrictions of material design

As part of my research, I would usually look into styles of fonts and colours, but this time this is not an option. Google, the ones who started the whole material design trend are very specific about the fonts and colours that the designer should implement into the websites they create using material design.

They provide details information on how the developer should portray colour, icons, imagery, typography and writing. Within colour they detail the colours, including the different tones that should be used and how they should be used within a design;

You can see Google’s explanation here;

With icons, you can see that they are super specific about the design process of icons, shapes, layout & style with these rules here;

It makes specific points about how images should be used;

  • Imagery can reflect the context and the world the user inhabits.
  • Images can convey specific information that makes comprehension easy and immediate.
  • Portraying context with aesthetic beauty will make your product unique and add to user delight.
  • When necessary, it’s acceptable to obscure or allude to integrated heros and thumbnails through color and content overlays.

Again, Google specifies the exact ways to communicate through images;

While stating that the developer/designer should only use Roboto, the range of different styles of Roboto are quite wide;

Specific uses of sizes are given too;

Screen Shot 2016-03-13 at 19.10.24.png

Details are given on line height, colours, contrast, line breaking, tracking, kerning, line length;

Even things like the type of language is defined by Google;

All this means that the designer/developer of a project has such a specific set of rules to obide by that it cuts out the entire stage of researching suitable design with regards to these steps in half because I have to abide by the specific rules set by Google.