![picture of bar](img/EP_hero_pic.jpg)
Extended Play Bar
An Art 249 Project
Conceptual Planning
![sketches](img/sketches.png)
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](img/lofi_wireframe.png)
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](img/hifi_wireframe.png)
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](img/js_pic.png)
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](img/EP_welcome_pic.png)
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](img/final_pic.png)
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.