Website Mica Noise – Old Design
The design and implementing of this website was my personal creative project. Focus was to create an editable, fast loading design which could be implemented as an individual WordPress theme. For this purpose I created a logo and a logo icon including the web design and image design of the project cards.
SVG & CSS Logo Animation
While designing my name I had a specific animation in mind which I coded with SVG and CSS animation due to it’s unbeatable performance benefits. This resulted in a file size of only 12KB despite the animation.
The font used for the logo was illustrated particularly to enable the animation which is based on moving sound bars to reflect the ‘Noise’ in my name and personality. After experimenting with different illustrations, while containing the readability of the name I decided to only animate all straight bars of the name logo. Although the i’s in the name do not have dots, single pixel dots in different gradients and delay in movement were added to create an illusion of superscript dots. For the final logo animation a pause was added as constant movement appeared overwhelming and further deflected the focus from the content of the website.
For the visualisation of the project overview I started with a very different approach to the final one which was inspired by moving sound bars of the logo. However, after creating an Instagram story for a sketch with the limited design options of the application I was inspired to change the whole design and follow a slightly different approach.
For the final design I created thumbnail cards for project themes with an adequate lettering cut out. An offset in the column heights creates a dynamic in the overall page design with dominating whitespace. Further to mention is my logo icon on the left corner of the website which was derived from the moving bars in the ‘M’ of my logo animation. The purpose of the placement of the logo was mainly to create a harmony in the overall design.
After the design was finalised in Illustrator I implemented this design as my own individual and WordPress theme which allowed me the usage of a CRM system to extend the content of the website easily eliminating the necessity to adapt the layout or code of the website.
Website University Project
For the presentation of futuristic currency designs created for a university project the development of a responsive Bootstrap website was required. The time for design and implementation was limited and the focus was on functionality as well as a believable and complementary design regarding the currency design, which had a technical and rather digital look based on lines and circuits. Further, the website was created as a presentation platform of a bank in the dystopian world of 2146.
SVG & CSS Animation
Another part of the project was the creation of an animated propaganda poster which I planned to implement using SVG and CSS animations due to the performance benefits. To learn CSS animations and test this idea on a smaller scale I first created an animated scalable SVG header image for the website. This confirmed me in the advantages of SVG and CSS animations as the file size was only marginal above 200KB and loading without delay on mobile devices.
The design for the banner was based on the propaganda poster design with calming harmonic animations to broadcast comfort as well as security.
The propaganda poster had to follow the same brief as the currency and the train animation which was based on the dystopian underwater habitat of Thames Basin, formerly known as London, in 2146.
Although performance was one central focus of my implementation the total file size was over 1MB due to a very detailed SVG of the heraldry animal in the centre, the Raven Fish, which I designed for the ruling monarchy of dystopian Thames Basin. However, excluding the heraldry animal resulted in a total file size of only 18KB despite the large size of the poster.
The heraldry animal of the fictional government ‘RF Monarchy’ is the main symbol of the state and therefore placed centrally in the poster. The slogan “In Deep Water? Join the TRC Foundation. We are here for you!” is intended to persuade people of the security of the organisation as something who is supporting and helping its members while in fact begin a governmental body of control and surveillance. The dark blue colour is based on the main train colour which is based on I. K. Brunels steam ship.
The animation itself is supporting the propaganda message with rising waves visualising the drowning message, while the flowing movement of the waves as well as the appearance of the line visualising the protection of a dome convey comfort and security. The full animation of the poster can be viewed here.
The website was programmed with Bootstrap 4 as a responsive multi-pager without the usage of a bootstrap template. The purpose of the website was to host as a platform for the fictional Transatlantic Rail Corporation (TRC) which is owned by the Transatlantic Rail Bank. All of which are under governmental control. I created several Icons for the presentation of the currency. The main layout was inspired by the propaganda poster and currency design which focused on water and circuits.
The full website can be viewed on the university web hosting platform playground.