Intention
I like creating web pages that are both functional and artistic. I don’t like web pages that are overly abstract because I find them useless and boring, but I also know that code without art is more boring. When considering what I wanted my Index to look like, I decided that a page with obvious function married with a fun design would best represent my type of coding. This is what I hope I have accomplished with my Index. I was particularly influenced by the vending machine example shown in class and feel that is a good example of the type of website I intended to create. To reach this point, I started by thinking about what my interests and hobbies are, and how I could organically incorporate them into the website. The favicon assignment helped me do this.
Favicon
My original favicon was a camera icon created using the shape of my initials. I chose to do this because I have a passion for photography, videography, and entertainment media, so I felt it best represented my interests. I love the design and will continue to use it for self-representation. However, though it is clever in full view, when used as a small icon it is unclear what it is meant to be. I decided to redesign while still incorporating my interests. This led me to Netflix. I have a deep love of reading, fantasy, movies, and TV series. Creating a Netflix-like site seemed like a fun and functional way to display my work.
Inspiration
I started by looking at the Netflix home screen and seeing what aspects I should copy, and which would be outside of my ability to code. I liked the idea of having a carousel of “movies” which would represent all my works. Though Netflix films don’t move of their own accord, I thought it would be a good way to incorporate animation if I had the movies moving across the page. This also requires the user to be more engaged to navigate the page.
Design Choices
After I had coded the basic layout, I started creating the visual elements in Photoshop. I wanted to have the iconic Netflix logo for my title and for each piece of work from the semester to have its own movie cover. I used a different font for every movie and images from the work itself to make the designs. This part probably took the most time to implement.
Refinement
I continued to add interactive elements like hovering and play icons to further the Netflix inspired design. I realized that while the moving images was fun, it wasn’t realistic for someone to view my work that way because they would have to wait for it to return to the screen. I coded separate pages which had lists of the works to make it easy to access. I designed these pages to look like episodes. I also coded separate pages for my reading responses. Though my code is relatively simple, there were a lot of small adjustments to be made in order to better match the Netflix site.
Reflection
I am very happy with the look of my Index. I feel that it accurately represents my interests as well as my coding style. If I had more time, I would incorporate more functions that are like how a Netflix page functions. For example, when you enter Netflix it first asks who is watching and makes you pick an icon – I would like to add that for the user to be more interactive. However, I am proud of all the work I accomplished in this relatively short period of time.
