I only managed to get part of this assignment done.
Below are some screenshots of the mock-up in Photoshop along with what I was able to complete.
Above are images of how I wanted the page to look after I would have created it in HTML/CSS.
Below is how much I was able to get done towards that.
The divs are placed where I want them for the most part, but the padding and margins still need a lot of work, along with the colors, fonts, and alignment.
Oxypyx is a fictional brand created that specializes in the design and manufacture of products in relation to {(bpbp)Co2II(NO3)}2(NH2bdc)2 * 2H2O.
The name is derived from the prefix oxy, which is used to denote a connection to oxygen. The second half of the word, pyx, is derived from the greek root meaning a can or container.
This is a video that is meant to be used as a promo for the brand while informing the viewer of the product and its various benefits. It also covers the benefits of the product itself, while using color to create a personality for the brand.
The experimental portion of the video is mostly at the end where the logo for Oxypyx appears. I wanted to emphasize the importance of chemistry, so I created a logo that would still be readable and legible while incorporating benzene and aromatic rings, which structurally work in structuring the counter and bowl of the O and the P, respectively.
The fonts that I used are Helvetica, as well as another one that I downloaded called "Keep Calm" which can be found at:
http://www.dafont.com/keep-calm.font
It was used for the name of the chemical during the beginning portion of the video.
Below are sketches as well as images created in Illustrator of how I wanted the video to look.
Quite a few changes were made, such as with the diction on some of the slides. The order of the sentences were changed to create more coherence. The logo at the end was also changed slightly, especially with moving the O in "Oxy" down to align it better with the baseline, and rotating both that and the angle of the one stroke on the bowl of the P so that they match the angle of the cross-stroke in the X of "Oxy."
Overall, I am fairly content with how the video turned out. I do think it would have been beneficial to have given myself more time, because I would have liked to have split up the text into separate chunks to avoid so much information be displayed at once.
It was difficult deciding which layers needed to be separate in the original .ai files, and then importing them so that the would work with the video.
Above are sketches of how I wanted certain parts of the video to look along with a very rough storyboard.
Here, I changed the font for the title. I also changed all of the prime symbols into proper apostrophes using the proper syntax. Lastly, I added a faint line under the titles to help create separate sections and draw attention to titles. Margins were also adjusted for the title of the entire page, which was changed to "Current Popular Films," because it seemed more fitting for the assignment. The acronyms were also adjusted via span classes to be reduced by 1px in size in comparison to the body text.
Above is a picture of the HTML and CSS files for the portion of the assignment in which we had to create our own composition.
This is the first design that I had. The strong vertical line seems evident, but I still think the design itself lacked depth and originality.
This is my second design that I decided to go with, and the HTML and CSS above matches for this one. I decided to make the A yellow, because the color black in combination with the size of it made it visually too demanding. I wanted to further emphasize the vertical line by doing what was done in the tutorial, which is aligning the words "A is for Alignment" on the opposite side of the line from where the body copy would be.
