project_2_final_jcowan
Posted: Thu Apr 07, 2022 7:05 pm
https://www.grc175.com/student/spring-2022/james-cowan/
So, here we go, as noted in the subject this is my project 2 final. My creative process with this site was to construct a UI friendly site to display the projects of this class with a little bit of fat kid style in the illustrations. First for my back-ground which is programmed through the css is entitled "Tako's Revenge" the purpose behind this twisted work of art is to provoke a response for any person who even stumbles across the site. The concept of the artwork is that "what if one of the sentient beings we share this weird spinning ball of atoms with decided to fight back?" and so one of the most gauche statements a human can make is swallowing another being whole as a fad. I used 65% opacity and an absolute position in the style sheet so visually it looks as though you are zooming into the subjects mouth when you scale the viewport down. I also used a noodle font, Big Noodle Titling, to simulate a cartooning all caps font with an oblique style on the titles for dynamic effect. For my navigation I actually consider this a pivot from failing to make a sidecar nav that actually scaled the way that worked well with the design. After styling the page into columns I found it did not hold the form I wanted when scaled to smaller viewports, so I went with a horizontal nav layout with floating silhouette rounded white box and a yellow hover feature. My nav as it exists now does not have a home button in the traditional sense, my logo icon I created for this class is my home page link/button and meant to be a consistent fixed point for UI on the future pages in this site. The other feature that was researched until the solution was it is not a consistent enough effect through multiple browsers to use in this design, my solution to having the background image bleed through the foreground text was to reduce the opacity of the titles and increase their size, this will let the image seep through but maintain the readability of the titles. Moving forward I intend to adjust the site as a responsive site so it scales better and add multiple pages to accompany the other links. Thanks for your time and I look forward to your comments.
here are my initial notes: here is my initial design:
So, here we go, as noted in the subject this is my project 2 final. My creative process with this site was to construct a UI friendly site to display the projects of this class with a little bit of fat kid style in the illustrations. First for my back-ground which is programmed through the css is entitled "Tako's Revenge" the purpose behind this twisted work of art is to provoke a response for any person who even stumbles across the site. The concept of the artwork is that "what if one of the sentient beings we share this weird spinning ball of atoms with decided to fight back?" and so one of the most gauche statements a human can make is swallowing another being whole as a fad. I used 65% opacity and an absolute position in the style sheet so visually it looks as though you are zooming into the subjects mouth when you scale the viewport down. I also used a noodle font, Big Noodle Titling, to simulate a cartooning all caps font with an oblique style on the titles for dynamic effect. For my navigation I actually consider this a pivot from failing to make a sidecar nav that actually scaled the way that worked well with the design. After styling the page into columns I found it did not hold the form I wanted when scaled to smaller viewports, so I went with a horizontal nav layout with floating silhouette rounded white box and a yellow hover feature. My nav as it exists now does not have a home button in the traditional sense, my logo icon I created for this class is my home page link/button and meant to be a consistent fixed point for UI on the future pages in this site. The other feature that was researched until the solution was it is not a consistent enough effect through multiple browsers to use in this design, my solution to having the background image bleed through the foreground text was to reduce the opacity of the titles and increase their size, this will let the image seep through but maintain the readability of the titles. Moving forward I intend to adjust the site as a responsive site so it scales better and add multiple pages to accompany the other links. Thanks for your time and I look forward to your comments.
here are my initial notes: here is my initial design: