Creative CodeCraft
These are not illustrations which might have been simple with Adobe Illustrator or another drawing application. They are all hand coded with HTML, CSS, and a little Javascript. (Languages most commonly used to design and render web pages in a browser.)
I write code to create each element as a container — no text, no photos, few rectangles. I assign attributes to each element: shape, size, placement, rotation, color, gradients, transparency, patterns, interactions and animations.
Where most websites look like a box full of boxes, I tried creating outside of them.
I started challenging myself with this process to see what kinds of shapes and effects I could create, and it became a great way to polish my coding skills.
The process has its limitations and takes much longer than illustration software, so the result is not as sophisticated, but it has been a fun and constructive way to meld my passions for art, animation, and web design, transforming structure and style into art through Creative CodeCraft.
Click the links to see the interactive or animated web pages.
(Works best in Chrome, and may not work as well in other browsers. These are still works in progress and my intention is to add cross-browser fixes at some point.)
Some of my favorite things to explore are softness (like clouds and waves), textures and complex shapes. After years of doing illustration in Adobe Photoshop and Illustrator, I developed a workflow of illustrative techniques using layering, transparency, and custom brushes that I have had to radically rethink in this process to add levels of interest, atmosphere, texture and subtlety.
I started doing web design in the mid 90s, though this did not become a full time pursuit until 2010. One of the things that frustrated me about web was “The Grid”—everything based on boxes. This exists for good reason, but it has its limitations. Relatively few sites break those bounds.
I challenged myself to make art unconstrained by the typical grids used in HTML and CSS by learning about how to overcome those limits to draw complex shapes and objects with soft and hard edges, gradient fills, transparency and appear to have the depth of illustrations—and to animate them as live web pages, while incorporating some of the aesthetics of my personal illustration work.