ICM Week 6

I don’t 100% like the theme of this blog. Especially, I don’t like the layout of each category page. I’ve always wanted to make it have a grid structure, but this theme, SoSimple, doesn’t support that. Therefore, when I first saw the goal of this week’s assignment, I immediately thought up redesigning my blog.

I first tried to download all the HTML and other related files of my blog and upload it to p5 web editor, but for some reason, my blog wasn’t shown on it in that way. Actually, there were too many files with complicated codes for just one simple page. Most of them may have been for the functions supported by WordPress. So I build a page with HTML and CSS from scratch. For this, I draw a wireframe of my ICM assignment posting page that has a grid view on Sketch.

As I am not very skilful with web programming yet, drawing all the borders of each HTML components was helpful to understand the actual structure being drawn on the browser and debugging.

I used the typeface, Futura PT, for the title and Proxima Nova, for others. I succeeded to import the new fonts into the page, though failed to make the title as thin as I intended in the wireframe. I uploaded the exact same font to the server and set the font-weight to the smallest value, 100 but it still looks thicker than on the drawing.

Only with HTML/CSS, it is a still page with no animations or interactions. I next, added some dynamic parts on it using P5 dom library.
I first implemented a hoverable drop-down menu below the ’01’ button.

Ui GIFs - Find & Share on GIPHY

The drop-down menu only appears when the cursor is on the ’01’ button and each menu’s background colour changes also when the mouse is on it.

To make this, I referred the code here: https://www.w3schools.com/howto/howto_css_dropdown.asp

Next, I made a mouseover interaction for the posting thumbnails. Their image and text dimmed whenever the mouse cursor was over them.

Interaction GIFs - Find & Share on GIPHY

I gave all the <td> elements that contained thumbnails to have IDs and applied the same code to all of them. I don’t know if there is a better way to make this interaction work.

Finally, I added an animation on this page. So far, it was all about adding new HTML elements and giving them CSS properties and I doubt that it is really an effective way to use the p5 library instead of directly using HTML and CSS code. But drawing a dynamically moving animation is worthwhile to develop with p5 and as it’s much easier than doing so with Javascript!

As my blog was overall quite simple and in a monotone, I didn’t want to add any colourful effect. So I came up with an idea of a concentric circle waves that appear in random positions on the header area and fade out from their centre and finally disappear. At the beginning, I struggled a bit to set the canvas’s z-depth as the HTML’s background colour was grey and that of the header was white, so that if I set the z-depth of the canvas to -1, it wasn’t able to be shown hidden by the header. But if I made the canvas transparent, I couldn’t have the waves fade out. I solved this issue by getting rid of the background colour of the header and laid the canvas with white background beneath the header. Also, I created a class for the circle waves and finally got them work on my page.

Animation GIFs - Find & Share on GIPHY

The full screen view is provided here: http://alpha.editor.p5js.org/full/ryX-1Ix6-

Also, the complete code can be accessed here: http://alpha.editor.p5js.org/yeony102/sketches/ryX-1Ix6-


Posted in ICM

Leave a Reply

Your email address will not be published. Required fields are marked *