The Evolution of Animation in Web Design

The internet has become an inseparable part of the current generation’s lives. Each and every second of our lives, we are given the opportunity to learn new things and to know the newest updates about whatever it is happening all around the world. We sometimes also marvel on how a website can look so pretty and posh or how it can integrate high-tech features all in one click. Animation can be a part of it, in which if used in the correct way, it can bring much more life and personality to the websites which are just ordinary and plain. For that reason, check out the timeline of evolution of animation in web design included below:


The 19th Century

Web design was pretty much a very strange and abstract concept in the 19th century. However, animation had made its early development through the invention of tools which were used to play movies on a screen. Scientist Thomas Edison invented something which is called a Kinetoscope in New York, and in another part of the world, Lois Lumiere invented the cinematograph. Together with his brother Auguste Lumiere, Lois Lumiere later created the first motion picture in history. The aforesaid first motion picture was presented in the year of 1895 in Paris, and it was dubbed as the birth of film and animation.


The 20th Century

Animation had made several breakthroughs in the 20th century although for web design itself it was really still a beginning. One of the landmark events that took place in the 20th century was the birth of Disney cartoons. In 1927, Disney created a popular animation series with its main rabbit character named Oswald although its distribution rights were taken over by Universal. Three years later in the year of 1930, The Warner Bros. Cartoon made its debut with its first movie which was originally a spinoff of Disney’s Mickey Mouse. From thereupon, the 20th century’s animation history consisted of mostly Warner Bros and Disney cartoon movies although later on there is a solid competition as well coming from the MGM studio.

Web design was nowhere to be found at least until the end of the 20th century around the year of 1989 where a few monochrome pixels made up the very early concept of computer design. At that time, the designs were mostly made up of only symbols and tabulations, and it was pretty much the dark ages of web design. Web design was brought to life in the year of 1995. In 1995, browsers were capable to display images although it was only in form of tables already existing in HTML, but that was definitely a start. Using table was very nearly the most common method for web designing during the aforesaid years, since it was considered as a method to conveniently present things vertically in pixels or grids. This gave rise to what was known as slicing designs where designers would create a complete fancy layout but developers would divide it into smaller pieces to make the designs work.

JavaScript was invented later on that year and it was considered as a major breakthrough to the limitations of HTML tables. JavaScript allows more incredible things like a popup window or a dynamic modification of order. However, as it is known until now, JavaScript can only be layered above the fabric that creates the web work which requires loading the two separately, and for that reason, JavaScript comes second compared to CSS web designing method (which was unavailable until a later time). As the year progressed, the Flash technology was promoted in 1996 and just like JavaScript; it took the web designing concept to a whole new level. By using Flash, web designers can create any shape, layout, animation, interaction and use different fonts. The convenience did not end there because Flash produced an end-result that is packed together as one file which can be sent to the browser for instant display. Somewhere along the line, websites are decorated with a lot of tiny GIF files with different moving pictures and clips. The invention of Flash undoubtedly plays a major role in bringing more people to integrate animation in web design, and this was further enhanced by the increasing popularity of CSS in 1998. Even though Flash was regarded as one of the most significant web-designing breakthroughs at that time, it was extremely heavy for websites and as a result the website’s loading time will take significantly much longer.

The CSS, or Cascading Style Sheets, was seen as a more flexible method to structure a design viewed from a technical standpoint. CSS basically separates a content from its presentation, making the formatting and look to be taken care of in CSS although requiring the content to be dealt with in HTML. CSS did not really flourish until years later when the majority of browsers supported it completely despite the fact that it was known to be buggy. Despite this fact, CSS provides a great relief for designers because it is not really a coding language but it uses a rather declarative communication. As a result, to be a web designer, one does not need to know how to code as long as he/she understands how CSS does work. CSS remains popular as a method to make animations for a website because it is relatively lightweight compared to using JQuery which can really slow the website’s loading speed as well as performance. CSS is recommended for making animations that will appear nice on all types of devices without the need of making it heavy.


The 21st Century

Animation and web design altogether are considered as something familiar and common during the 21st century. The integration of Flash, CSS and JavaScript for the purpose of web-designing has been easier and easier day after day. Different to its original decorative purposes, animations are now considered to be a method for improving the usability of a website. In other words, animations are now used to ensure the easier use of your website, for example by making your website’s navigation to be a lot simpler and much more convenient.

A lot of today’s animations are produced with the help of lightweight JavaScript and CSS coding which essentially put moving elements into a website without making it too heavy. One of the main purposes of integrating animation into a web design would be to grab the viewer’s attention and for that reason, a lot of websites utilize shaking effect for their sign-in and log-in interface to let users know if they have typed the wrong username or password which does not match with the system. Animations can also trigger the viewers to interact more with the website, making it easier for them to finalize purchases or to scroll down the offers. Although there are a lot of different features that can be integrated into a website nowadays, web-designers must take into account the effect to a website’s performance and loading speed.

Even so, nowadays web-designing takes on a whole new challenge that is to become mobile-friendly. A website can work perfectly just fine when viewed on a computer but it can be faulty once when viewed from a mobile device. Web designers need to understand well how devices can display the same layouts differently, especially when it comes to tiny mobile phone where there is a content-parity issue as well. Access speed can also be an issue, because when too many loading contents are put in a website, it will cause the internet quota to run out rather quickly.

One of the methods undergone by many web designers and basically tech savvy people was to improve the concept of column grids. In 2007, the grids and frameworks mechanism were enhanced in such a way that it became a 960 grid system with a twelve column division to allow easy web designing especially for mobile phone use. They also thought about creating a standard for commonly used elements such as buttons, forms and navigations which can be packed together in a convenient manner for reusing. For this purpose and because website and apps become increasingly integral in nature, frameworks like Bootstrap and Foundation became really popular.

In 2010, web-designing turned to a whole new different direction because people seem to prefer a very plain and simple design with more focus placed to the content’s website. This includes using exquisite photography and typography in which simple visual elements (or also known as the Flat design) are also an important part of the designing process. It was all about sophistication in simplicity. As for the newest updates on evolution on web designs, new units like the viewport height and viewport width were introduced in CSS in 2014 to provide greater flexibility with regards to elements positioning. CSS also now provides the Flexbox concept which allows creating and modifying a layout to be really simple when it used to require typing up a lot of codes into the computer.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s