Final Project Report

At the beginning of this year, I resolved to start making collages. A lot of my existing creative pursuits were very cerebral (writing, media review, tabletop gaming) and I found myself craving a kinetic hobby, something tactile and meditative, with a result both something visual and something I can hold in my hands. When this project came up, I decided I wanted to present an exploration of my new (to me) hobby. This decision was three-fold: 1) it felt like a relatively low-stakes topic compared to a professional portfolio or a client deliverable; 2) I already had a backlog of collage content; and, 3) I wanted an excuse to research and learn more about collage as a medium, as I dove into the hobby without much knowledge.

I thought up the phrase “exploration of a hobby” early and kept that as both project title and enduring vision statement. It encompassed, to me, everything I wanted to include on this website, and remains a succinct representation of the site. This project explores collage work I’ve done, thoughts and observations I’ve made of my work as I’ve done it, and further research on the topic of collage. My primary difficulty in establishing the Strategy plane was a question of audience. I wanted the site to encourage the viewer to try the hobby as I did, but didn’t want the encouragement to compromise my ability to display my art and process in a vulnerable and reflective way. As such, these goals often felt at odds with each other. I ended up softening my notion of audience engagement to the idea of handing someone my book of collage. I prioritized the look and feel of the site as a tactile “show and tell” rather than presenting an explicit call to action.

My exploration of a hobby would require two types of content: creative content, and research content. The creative content answers the question, “What have I done?” while the research content answers the question, “What is collage?” My challenge in the plane of Scope was to strike a balance between creative and research content (as well as learning to code). Quickly, I realized “balance” did not mean equal parts. The nature of my website as a sharing of my work meant I’d need to present much more creative content than research content.

Structurally, I began to build a scaffold on my ideas of Scope. The challenge was to present the content in an intuitive way. Though I’d decided to include collectively more creative content than research content, I didn’t necessarily want the viewer to feel that imbalance. I determined the creative content should feature four distinct sections, which ended up being individual pages. The first, of course, was a gallery of my collages. This gallery is the landing page when selecting “the hobby” from the navigation bar, and features several small thumbnail images which open full resolution scans of my collages in a new tab. Within the gallery are notes on the “materials” I used to create my collages, “recurring” imagery I’ve noticed in my collages, and “ruminations” on the process of doing collage. These notes link out to three pages, respectively, which elaborate on materials, recurrences, and ruminations. Meanwhile, the research content of my website is accessed by selecting “the medium” from the main navigation bar. Initially, I targeted two types of research content: process explanation, and a gallery of professional collage work. Rather than feature these two aspects of the research I’ve done on individual pages, I consolidated the content onto a single research page. That way, I can reference the gallery of professional work in my discussion of process, and the viewer need only scroll down rather than navigate to an entirely separate page. I used an identical thumbnail div structure for this professional gallery as I did for my personal collage gallery, and it’s cool to see how those design elements both function as a page unto themselves and operate as one element among many.

Because I wanted this website to feel as if I’d handed the viewer my collage sketchbook and encouraged them to thumb through it, I knew I needed to establish a clear, interconnected navigational framework that would allow the user to “wander” through the site in a nonlinear way, lingering where their eye catches. Expectedly, the challenge with this was to maintain navigational clarity while prioritizing that “meandering” effect. By nesting navigation to additional pages within the content of my main four pages (index, creative, research, and coursework), I allow users to organically progress through the site, but also create an environment where whole pages may be missed. Though this site skeleton would not serve the standard website, this project took on a life of its own when I decided to make it analogous to a physical sketchbook. As when thumbing through a sketchbook, it is possible, even likely, to miss whole creations. This should inspire return visits, and further exploration.

It wasn’t until I earnestly began work on the Surface plane that I suffered a crisis of confidence. Though I pored over the course materials on divs, grids, and flexboxes, when it came time to design my own layout, I floundered. Enter: Claude. I was so frustrated with my site layout going into our AI assignment. My “prototype” was flat and uninspired, and though I had a color palette (to match my physical circus print sketchbook), I couldn’t cast it in much more than a simple, static grid. For our AI assignment, I put my conundrum to Claude. I fed it the HTML content of my index page, along with what design decisions I’d made, and asked it to make a “more dynamic layout.” Well, it did. I think the model benefitted heavily from my decision to design in the style of collage; this is a highly recognizable design style, with ample, accessible “arts and crafts” aesthetic choices ready to be made. Claude applied a series of divs to my index page HTML, introducing content sections to resemble individual or layered construction paper pieces, fixed yellow/beige rectangles in the style of tape strips, and drop shadow and transformation animations to lend movement to the paper “scraps.” It was a bit of a mess, at first. The angles were extreme, the animations excessive, and tape everywhere. But seeing the divs Claude put around my HTML content helped me really understand divs for the first time. Suddenly I could make a change in one place, and know for certain where that change would be reflected before I hit refresh on my browser. I grasped the parent and child relationships between my divs, the interaction between the HTML and CSS, and I spent a solid twelve hours cleaning up Claude’s code and, in doing so, making it my own. Through the rest of the project, this remained the only query I put to Claude. I was able to take the building blocks grafted onto my index page, modify and create additional styles to my satisfaction, and then expand them across the other ten plus pages I added to my site. And because I used the divs like versatile building blocks, I have only one CSS file applied to the entire site. It felt amazing to go from feeling so defeated and incapable, in a place where I thought I’d need to reduce the scope of my project, to feeling competent and happy with the look of my website, as well as inspired to go so much further.

Though I’m attached to my aesthetic choices and was very intentional with my layout, the primary, as of yet insurmountable challenge to the Surface plane is responsiveness. At a certain point, I stopped checking how the site looks on mobile. It was challenging enough to wrangle my divs and create varied, visually stimulating yet cohesive pages on a desktop view, and the constraints of my semester necessitated a focused approach to the project. Had I stuck to a simpler grid design for my site, I almost certainly would have taken a “responsiveness-first” approach to design, but I got caught up in the capability of so many divs and the aesthetic vision of the different, layered containers. The best I can say for the site is that it “works” on mobile. Everything is there; you can read it. However, several of the divs exceed the constraints of the default mobile page size. You kind of have to “zoom out” right off the bat, rather than it loading beautifully on the new page constraints. Claude did include a “Responsiveness” section in its initial pass on my index CSS, but as I tweaked and added divs, I fell off on adjusting this. I imagine I’ll need to do a complete review off all of my divs in order to render a truly responsive model, if not design a mobile CSS from scratch.

One additional struggle I ran into on the Surface plane had to do with hosting limitations. The more I added to my site, the more latency I experienced with publishing to Neocities. At this point, when I try to make even a small update to my CSS, it will take around 24 hours before the change is reflected on Neocities. For most of the semester, this was just impacting my CSS, but in making final tweaks and code improvements to my HTML, I noticed latency there, as well. I’m using Firefox Developer, so I know it’s not a caching issue; there just seems to be a delay on uploads made to Neocities publishing to the live site. Oh well.

In addition to continuing to document my collage making experience, perhaps for the entire first year, or even beyond, there are several existing elements I’d like to improve and/or enhance on my site going forward. I believe, given more time, I can achieve the following:

• Breadcrumb navigation. In creating a “meandering” navigation scheme, I envisioned breadcrumb navigation atop each page to help the user track where they’ve been and be able to venture backward should they choose. However, I soon discovered this was a more complicated element than anticipated. In order to preserve a nonlinear navigation structure and still have breadcrumb navigation represented, I’d need to include some degree of JavaScript, and just wasn’t able to figure it out, especially while still nailing down a map and content for the site. Now that the site is more complete, and I have a better grounding in JavaScript with the work I did on the “Try Collage” page, breadcrumb navigation may be a worthy enhancement.
• Thumbnail target opportunity. A feature suggested by my peers during my in-class presentation, as well as (admittedly, briefly) attempted by me during the development process, I agree I’d prefer that my high-resolution gallery photos open in “pop-up” form on the page, rather than direct to a new page. As of now, I do at least have the thumbnail link targeting a new tab, but I’d like to introduce some scripting that will facilitate a temporary “pop-up” view. Some combination of already dealing with very high-resolution photos, knowing I’d have to use JavaScript for the mechanism, and fearing having to circumvent all those native browser pop-up blockers kept me from tackling this issue. I did find some lightbox script, but the load times were crazy. I’ll need to start by remastering my high-resolution images to a lower-end high-resolution, as right now they remain excessively large. Then, provided I find functional script, it shouldn’t be too terribly difficult to rework the thumbnail link targets to remain on page. However, it did put me somewhat at ease that the museum sites I used as inspiration and reference for this project (MoMA and Tate Modern) also have their high-resolution art photos open in a separate page.
• Responsiveness. As stated in my section on the Surface plane, website responsiveness ended up an enduring issue. I fear I’ve worked myself into needing separate CSS for mobile viewing, though a complete review and, for lack of a better term, audit of my divs may reveal easy opportunities to aid responsiveness.
• Accessibility. Though I’ve adjusted elements such as the rust-colored accents (particularly the header backgrounds) to satisfy the WebAIM contrast checker and all WAVE accessibility evaluation tool warnings, I never did a complete review of my site’s compliance with the W3C’s Web Content Accessibility Guidelines (WCAG). That’s a longer, more nuanced document than I had the chance to implement. It was an over-ambitious promise to make on my initial proposal, and something I need to target for future development. In the future, I would like to familiarize myself with these guidelines ahead of the design process so that I can design with this guidance in mind rather than retrofit a project near the end.

I am very proud of this project. I can’t believe how much work I put into it, and how much I feel I really learned about building a website. I came in with some dated HTML experience, with very, very minor CSS knowledge, and with loads of insecurity when it comes to this sort of thing, but feel I’ve finished with a solid grasp on the concepts and their application. Moreover, I feel better versed in the language of web design, and better able to understand the principles behind it: what makes good design; what makes bad design; and, what gets most often overlooked or outright ignored during the design process, i.e. accessibility and responsiveness (guilty). I found this course to be an incredible mix of theory and practice and appreciated the opportunity to hash things out on my own when it came to the actual code. We were told early on to use our resources, look things up, ask for help, as well as to seek out and “steal” cool code, and though these methods took some getting used to, I feel like a more well-rounded learner having embraced them. I decided to make a website about my little collage hobby because I thought of it as “low-stakes,” but what I’ve produced is a worthy representation of my coding ability, fit for use in “high-stakes” circumstances going forward. This is a project that can sit very well within my professional portfolio. Though I’ve targeted elements for revision and/or enhancement, this is just as well a finished product. My inclusion of the “coursework” section on my main site navigation supports this end. Rather than remove our module work from my finished project, I incorporated it into the greater story of my site, and in some cases styled the coursework to match with the website as a whole. That this was an assignment completed incrementally as my skill level increased at the same rate feels just as important to the nature of the site as the site purpose or content. The similarities between cobbling together this project and the act of making a collage is not lost on me. It’s a rare and rewarding thing to draw a parallel like this so organically, let alone to have an enduring (so long as the web is with us in some shape or form) artifact to show for it.