DES 350: Digital Media Design IV

This course introduces intermediate and advanced concepts, practices, and technologies to design and develop interactive web applications. It taught me to explore the world of front-end development through HTML, CSS and JavaScript, and expand creative coding skills using the P5.JS Library

Mountains

Assignment 1: Design and Develop a Tribute Page

I had to create a tribute to someone/something that I admire such as a pet, a fictional character, a topic. Select the content (text, images, links, etc) from different online resources and use it to practice the content discussed in class. Make one page only using HTML + CSS, but I may have gone too extra because I did add Javascript into this assigment.

I had decided to make a tribute page of my favorite band, which it similar to the other project. The difference is that I had to make a one page site, I include social media icons, and more interactive.

Lights

Assignment 2: Black Square

So many inputs to choose from (variables, randoms, loops, if statements, etc.); I had to start with a basic black square on a white background—how and show how far take it to create. I may have gone too extra because I had made it bit more interactive.

In the first page, I had switch the color, which the first show a black background and a white square. Move the mouse and you will see the background color change.

To change to the next page, press the spacebar and it more interactive. Then more the arrow keys to see the square move around the screen.This only runs on PC/MAC (not on phones or tablets)

Nature

Exhibition Poster

Design and Develop an Interactive/Animated Poster for an Exhibition of your choice. You are free to choose any institution where the exhibition was hosted, the artist, and time when it happened.

  • · The poster should include: Title, Date/Times, Institution Name, Location/Address.
  • · Use the exhibition description/abstract and the artist work to inspire your designs.
  • · Size: 750 x 1125 px (Width x Height)
  • · Output: Website Folder w/ all assets (index.html, sketch.js, style.css + images/fonts)

For this, I decided to pick an exhibition from the National Museum of Mexican Art. Only follow the first process to open the poster. It may look plain and simple at first look. Until, move the mouse left and right and you will see the title of the poster size increase. As you move the mouse up and down, the description will switch into the location of the museum. Lastly, press the mouse and a big surprise will pop out. You can hold on to it for to take time to admire the surprise. This only runs on PC/MAC (not on phones or tablets)