Not to brag, but I am truly SHOCKED at how good my website looks. I came into this with a very limited idea of the range of possibilities offered by HTML. To me, if aesthetics are the main concern (and to me they always are), why not use the drag and drop features that platforms like Wix offer? I understood the power of the magical trio of HTML, CSS and JS, but I really didn't think that I, me, had the potential to tap into that too.

Below is the are.na board where I am posting process photos https://www.are.na/mc-otani/vis218_process

Series moodboard: https://www.are.na/mc-otani/series-imqbeweprqq

And a description of what I did:

• I started by building on top of my original website layout idea (which would imitate the highly saturated, overwhelming overload of information graphic design style of y2k teen magazines). My main source of inspiration was magazines like Nylon Japan and within them, particularly designs that imitated cyber/digital aesthetics

• To imitate this style, I thought: cyber fonts, neon color stories, and tumbler stickers. So I started by collecting some tumblr stickers and googling some fonts. I saved the lawngreen and deeppink HTML colors for when I was going to need them.

• I hate centralized website top headers, I generally try to avoid them at every chance. So once I found a font I liked, I thought I could make fixed vertical website title/link to the home page. I tried rotating the html text but I wasn't very successful in keeping it in place, especially for different screen widths. So I took a shortcut by photoshopping the vertical text, adding it as a photo and including a link back home.

• One of the elements that I wanted to incorporate was also the infinite horizontal scroll to add more depth and direction to each page (to even further the effect of sensory overload). I was able to find a relatively simple HTML implementation online and added columns inside so we could have a sort of chronological set of photos inside (I'm going to use this to document the prototype fabrication processes)

• Originally, I wanted to imitate the magazine and only have a paginated navigation. However, I quickly realized what a UI nightmare that would be. I really liked the idea of a fixed, interactive element, so I took the code for a scroll block and adapted it to make it a fixed footer with menu elements.

• I just kept some lorem ipsum text to see how the rest of the writing container could be structured, and then tried to experiment with photo placements by placing the tumblr stickers in the background (z-index) to get that nostalgic feel. And voila, I had a moving, colorful, cyber site that I really did not expect to look that good. Next step is actually making the content!