$ ls -R ~/








Dev Log: Creating art on the web – the redesign process


Date: 07/25/2019

Every 6 months you typically see a new website from me, and a new post detailing my motivations, thoughts, and technology for it. What I haven’t done, however, is write about the entire process from start to finish, for those who are interested in creating art on the web, and what I think about, and do, to craft what I create. That’s why I’ve started this new series; to share an intimate look into everything that goes into creating art on the web with my redesigns.

I always start this a month or two after I launch the previous redesign, just because the initial planning for art like this should never be rushed.

How I start redesigning my website

The first thing I think about is a theme. What do I want to say? What sort of visuals do I want?

I’ve had a number of themes, but one common start to my approach is the state of my mind. How do I feel about myself? What have I learned about who I am, and how I think, recently?

The theme of the current design as of writing is “Live with coal, plan for a diamond.” This spawned from my push to learn more, and appreciate the process of learning and growing from the start to finish. The next one is, in a way, a sort of “part two” to that.

I want to communicate complexity, but I also want to share failure, and how failures can, in a way, create something beautiful.

That’s why I’ve been thinking a lot about glitch art, as shown in my recent code tutorial on glitch design on the web. I want to utilize a glitch theme, and how roughness and chaos can be a beautiful symbol of growth, time, and more. I also want to, in a less direct way, show how my mind is scattered, or abnormal. I don’t mean to sound negative; I consider how I think to be a positive. My focus on logical progression, inability to fully comprehend irrationality, and my weakness when it comes to emotionally connecting with people has its downsides, but ultimately, I would never change that.

So, what thoughts have come about from this on making new art on the web?

The initial visual considerations for my website redesign

As i noted previously, I want to focus on a glitch theme. There are countless ways to approach that, so what am I going to do?

Contrary to my more recent work, I will need to step away from insane over-optimization. I want to utilize high-resolution photography and other imagery, rather than minimal SVG art. I want powerful animations, which will require more code than simple CSS transitions. So, I start thinking about it in pieces.

I noted utilizing photography, so what will I use? One idea I have is something I’ve considered in the past; rendering something different depending on the time of day. So, the current plan is to shoot 4 scenes; one at dawn, one at noon, one at dusk, and one at night. The homepage will render differently depending on the time of day, utilizing a different image for each stage.

I also want to utilize glitch art, obviously, but how will I approach it? Besides the glitch design experiment above, I am also exploring 3d rendering, and dynamic glitching of images. I’ve written some code concepts, and have explored 3rd party systems to see what is out there now and what I can do. Ultimately, I think I will utilize a mix of established tools while crafting my own implementations.

Initially, I thought about crafting believable rendering errors dynamically in the browser for imagery; I wrote some code to do this, but thought better of it. While it is cool to be able to fake what looks like a corrupted image with code and make it look real, it doesn’t really suit the visuals I’m wanting to achieve, even if it does match the chaos referenced in my initial theme discussion. I may share that later on on my Codepen.

So, I will go with a more hand-crafted approach. There will still be a certain amount of dynamic chaos, but it will be controlled in the confines of the art and the visual goals.

What’s next when thinking about a website redesign?

Next, I’ll be writing about the technology stack considerations, before I get too invested into the art direction. In this situation, I am less concerned about the tech stack as I was previously, as I’m not going to focus on extreme speed and rendering like I have in the past, but I do need to be sure that I’m not going overboard. While you can accomplish a lot on the web – more than you could 20 years ago – you still need to make sure your website is usable.