picture of bar

Extended Play Bar

An Art 249 Project

Conceptual Planning

sketches

Sketching

Taking a pencil to paper is probably something I need to work on the most. I usually do all my sketches on Illustrator, but theres something organic and comforting of having a pencil in your hand. By attempting to do more sketching, I end up forming a more intimate bond with my work.

lofi wireframe

Lo-Fi Wireframe

Building the first wireframe in Adobe XD is the first step to figuring out the layout and heirarchy of the site.

hifi wireframe

Hi-Fi Wireframe

The first of many iterations. As the project went on throughout the semester, I was continuously learning new techniques and coming up with new ideas. The color and layout of the site evolved as my ideas evolved.

The Process of Programming

javascript code pic

Bells & Whistles

A big theme of programming this semester, was figuring out what my limitations were. As a beginning progammer, Javascript is something I haven't grasped 100% yet. However, when you want more functionality in your site, you can't shy away from JS. By watching countless youtube tutorials and with the help of 3rd party solutions, I was able to reach the level of functionality that I wanted in this site.

javascript code pic

Look Ma! I'm animating!

One of the biggest breakthroughs this semester was figuring out how to animate in after effects, then import those animations into my web projects. There was a lot of trial and error, but in the end I was able to incorporate animations, video and parallax without seriously impeding the performance of the site.

Summary

finished product pic

The Finished Product

By continuously pushing myself and asking an infinite amount of questions, I was able to design and build a professional looking website that is exciting, fun and classy.