design:web

portfolio

I chose to build a portfolio site from scratch to explore front end tools and processes. Using a template would have simplified the process but I wanted to make sure that the site would be an opportunity to take a deeper look into the building blocks of the web.

Creating the design assets from scratch was also important as I wanted to approach the project with a holistic workflow that would produce insight into both development and design. I plan on using it as an ongoing platform for code and design experiments. Stay tuned!

iterations

The site went through a number of revisions that successively simplified the overall theme from the original intent. It had a welcome effect of standardizing the design framework for pages that play similar roles.

sitemap

Navigation took on different forms as the site went through changes. Simplifying the overall design allowed for the opportunity to work on a literal interpretation of a site map as a nav tool thanks to an increase in whitespace.

characters etc.

Sample collection of design assets created for the portfolio site.

homepage

navigation

space

The space scene was primarily an exercise to begin learning SVG and CSS3 animation capabilities. I had been exposed to SVG while using D3.js during a previous project and knew about the concept of vector linework through architecture school but was unclear on how exactly it fit into a web environment.

iterations

There were two versions of the space scene that were explored based on scale and complexity. The initial version was a contained scenario that resembled the interior of a snowglobe. The final version takes up the full width of the browser and allows for the types of interactions with elements as originally intended.

animations

SVG animations can quickly develop performance issues depending on the quantity and complexity of objects being rendered. A number of revisions were needed to deal with these issues but it was a great way to learn about performance constraints and the available browser developer tools to test them.

characters etc.

Sample collection of design assets created for the space scene.

planets

astro

comets 1

comets 2