Summary
To learn the fundamental Web technologies, the final class project for my hypermedia class had me create a website for an artist. I picked Vincent Van Gogh as I enjoy his impressionist style and love his Starry Night painting. For this assignment, I had to integrate three different technologies. I chose TimelineJS, P5JS, and LightGallery. Together I made an interactive website that explored the history of Vincent Van Gogh though public domain images, a timeline of events, and a paint program that simulates his painterly style.
Process
Brainstorming
Low Fidelity Sketch
I started by sketching a layout in Concepts. I used different colors to denote aspects of the website. I created a four different pages that shared the same header and footer for navigation and structure. I started with a home page to introduce the viewer to Vincent Van Gogh.
Then I made the Web page for the paint program written using the P5JS library. I made a large canvas that the viewer can draw on with different colors.
The third page was dedicated to the lightGallery, which included famous works made by Vincent Van Gogh.
Finally, the fourth page was dedicated to the timeline made with TimelineJS. The timeline featured notable events in Van Gogh's life that shaped him to be the artist that he is.
High Fidelity Mockup
Once I was finished with sketching my low fidelity wireframe, I made my mockup in Figma. I was able to adapt my low fidelity wireframe into a responsive mobile design and soon got started with web development after.