MMc403.1 Chapter Illustration

Useful links:
css librarys: https://www.sitepoint.com/top-9-animation-libraries-use-2016/
Animation 'cheat sheet': http://www.justinaguilar.com/animations/#
parallax Sea Animation; https://codepen.io/Chilledson/full/GjgXpb/
scrolling css aNimation : https://codepen.io/zzavrski/pen/xVVdWo

Research

Experimentation into different web lay out techniques and web animation techniques: 

here are some examples of Web animation techniques; 

https://codepen.io/zzavrski/pen/xVVdWo

This example uses a scrolling text parallax Animation.

If I was to use this scrolling parallax animation I could use it to introduce new chapters of my chosen book.  I would change the scrolling speed, so that it is easier to read the text.

https://codepen.io/Chilledson/full/GjgXpb/

This example uses an image parallax animation, It was made by a designer named Lewis, If I was to use this code in my website I would change the duck image into a peach and try to re-create a scene from the Tim burton film James and the giant peach. This example also uses a mouse tracking animation.

http://codepen.io/EricAnton/pen/jaFBA
This web animation uses css only to create an underwater bubble feeling. I could incorporate this into my website keeping with the theme of water.  

https://codepen.io/hakimel/pen/aIhkf

This example uses css animation. it was created by a web designers called hakim El Hattab. This is something that could be used as a background animation.  

https://toppletrump.com

 This example uses java script, 

created by a digital agency called parallax a company based in leeds. Its  clever site based on the recent American election, its purpose was to advertise the company. 

http://www.bizbrain.org/coffee/

This example uses Java script, developed by "now sourcing" an info graphics company. 

I like the way this website uses simple animated gifs, as well as java script to tell a story. 

It also uses scrolling image parallax animation.

http://codepen.io/landrik/pen/jAYPbx I have used this animation in my final website, in the animation there are two images of cyclists crossing the bottom of the page, i have changed it to two peaches crossing the page. the animation was originally done by a designer called landrik. 

some examples of web layout techniques;

https://codepen.io/lukepeters/pen/bfFur
table layout ; created by luke peters this layout has been made with html and css. I wouldn't be able to use this with my chapter illustration.

https://codepen.io/bradfrost/pen/LtryA
Shifter layout; created by brad foster, he has used html and css. This layout is ideal for a chapter illustration web page.

https://codepen.io/johnstonian/pen/guhid
two column layout; created by a designer called Ryan Johnsten typically this layout would be used for an informative website.

Typography for feeling

typography has deep roots in our culture, 



Courier fonts were created to look like old typewriter fonts ----->





Helvetica is mostly associated with formal or official situations as it is used by the government on tax forms ---->




IF you would like to portray a more business or respectable image then consider   serif typeface 

or if you were looking to come across more modern and stable then you could use a san serif

Serif; perceived as traditional respectable reliable and comfortable 

Sans Serif is perceived as Stable, clean, modern and objective 

Script is seen as Elegant, Affectionate and creative 

Hierarchy and layout:

"Visual hierarchy is one of the most important principles behind good web design. It's the order in which the human eye perceives what it sees"

Principles of Hierarchy- 

'All cultures read from the top down and most cultures read from left to right.

Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it.' 

-Use Size to Enhance or Reduce Visibility.

'The biggest design element gets the attention. '

 -Colour and Contrast to Direct Viewers’ Attention.

'We are drawn to colour, especially when its used to exaggerate or highlight information. '

 -Typographic Hierarchy, Start With 3 Levels to Organise Your Design.

'Typographic hierarchy is a component of visual hierarchy that can’t be neglected.'

-Choose Typeface Categories & Styles Carefully.

 -Give Your Layout Balance and flow.

'When you fail to plan for some blank space in a layout — perhaps in an effort to include as much information as possible — you risk ending up with a jumbled, confusing design.'

-Give Your Design Structure.

'The Rule of Thirds: Following the rule of thirds is one way of creating a dynamic composition where your focal point isn’t predictably placed at the centre. '

Picking colour palettes for web

Creating a colour palette  can be a challenge. but there are many colour scheme generators to choose from online..  from adobe colour to 'the colour app', and 'spy colour.com' 

 Choosing the right colour scheme is essential to a website’s success. Your layout and other design choices — including font — should be developed in concert with your colour scheme, which can ensure readability, cohesiveness, and beauty in the final product.

The colour wheel.. 

'The colour wheel allows us to see at a glance which colours are complementary (opposite each other on the wheel), analogous (adjacent to each other on the wheel), triadic (three colours positioned at 120 degrees on the wheel from each other) and so on.'

Design patterns:

'User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.'

'Design patterns provide a common language between designers.'

Design patterns are guidelines that help designers build websites or UI, sticking to Design patterns is quicker, it can save a lot of time. Design patterns are tried and tested so you cant go wrong. 

'There are three basic kinds of design patterns:

• structural
• creational
• behavioral

Structural patterns generally deal with relationships between entities, making it easier for these entities to work together.

Creational patterns provide instantiation mechanisms, making it easier to create objects in a way that suits the situation.

Behavioral patterns are used in communications between entities and make it easier and more flexible for these entities to communicate.'

'Why should we use them?

Design patterns are, by principle, well-thought out solutions to programming problems. Many programmers have encountered these problems before, and have used these 'solutions' to remedy them. If you encounter these problems, why recreate a solution when you can use an already proven answer?'

https://code.tutsplus.com/articles/a-beginners-guide-to-design-patterns--net-12752