Artwork Page Update: Improvements/Modifications

-
Quick update on improvements made to the creative page that I am developing:

This is how the page currently looks...

The selected areas are where changes have been made.
Compared to the first version of the webpage, the overall design is much cleaner and less "busy", using simplistic imagery about a solid white background with an SVG image within the centre. I chose to change the design because a simplistic aesthetic was preferable; this design is easy on the eyes, and with more adjustments it can become more appealing.

Also, the navigation for the page has been finalised, using vector images as icons that illustrate different pages. These icons (including the background image) were all made by me using Adobe Illustrator, and exported as SVG images; exporting as SVG allows the image to sustain its vector qualities in terms of pixel count, the quality of the image will not change despite the size of the page.
The navigation menu is also animated on hover; if the cursor hovers over an icon in the menu, that block will change background colour. Other minor changes such as the boarder radius are different too.

In future, I plan to animate the eye in the background in some way; the eye may blink, or the iris may follow the cursor as it moves around the page.

Here is some code that implements these new adjustments:

@Keyframes creates an animation, the key-frames being black transitioning to white

This code refers back to the HTML document which creates the navigation menu.
This CSS adds properties
Before: Poor contrasting colours, an overuse of colours, and boring features!

Comments

Post a Comment

Popular posts from this blog

Pure Data: GEM

-
Image
Here I will be presenting my final project in Pure Data using GEM, and what I have learned from the experience of using pure data to create motion graphics. The code will be sectioned into separate processes and explain in the order 1 through 7 as shown in the figure below. Figure 1 Step 1: Created [gemwin] object and connected it to three messages; [create] creating a window to draw graphics to, [destroy] to terminate the window, [lighting] which would initiate the world lighting. A toggle were added to [gemwin] to start and pause graphics, and another toggle to lighting to switch on or off. Step 2: Next I created a [gemhead] to begin drawing graphics to the empty window, I start off by creating a 3D object; a cube, and defining some properties; its XYZ rotation, XYZ translation, and colour. Two messages; draw fill and draw line, were connected to the cube, which would either fill the render into a solid shape, or draw the rendered shape with out-lines. Step 3 & S...
Read more

Purr Data: GEM

-
Using the information provided by the source given that explained what GEM is and what it is used for in Pure Data, I now have a clear understanding on how GEM is used to create media visuals; images, videos, and 3D Shapes. What is GEM? GEM is based on a large part of OpenGL. GEM is apart of pure data, and it is used to create motion graphics, this includes videos or still images, draw 2D or 3D shapes, and transform objects and shapes. Visuals can also be made to react to sounds. [gemwin] [gemwin] is what represents the window a graphic is drawn into - it creates a window which displays the graphics created. Using frame-rate, it schedules when frames should be drawn to the screen, by default, it clears the window and sets a background colour using RGB values. [gemhead] [gemhead] is the start of a chain of graphics operations connected by patch cords, that should be executed ever frame. Drawing operations cascade from the top down - adding to each other, flowing downwards ...
Read more

The Enduring Ephemeral, or the Future Is a Memory

-
Written by Wendy Hui Kyong Chun The Enduring Ephemeral, or the Future Is a Memory This read discusses how new media, like computer technology, is constantly evolving yet simultaneously back-peddling towards what would be know as a "bleeding edge of obsolesce". Normally, I questioned "what is new media?", yet the author suggests more appropriate questions such as "what was new media?" and "what will new media become?"... The "new" in "new media" suggests that what is new will one day become old, however, this is not the case with new media; as new media is almost the same yesterday as it is today, as stated by the author. This leads me to assume, due to the constant  storing and evolution of new media, it could not possibly become old despite the age of any such media; as "old" media found today is rediscovered as "new" media, which is a constant cycle of repetition. I found this interesting, as archi...
Read more