Portfolio Design Exercise


Creating a Portfolio

The main goal of learning HOTGLUE was to create a portfolio. In order to get to know this tool in depth, experiments were made and questions regarding its development were raised: Is there a way to make HOTGLUE responsive? Does it break if scripts are used?

Previous experiments performed by multiple year one Digital Media students showed misplaced content on pages across different resolutions, displaying properly only on the one it was initially built in. Resulting in having to scroll in a panning way to view the content. Including mostly text, it was decided that the content should be visible and accessible in multiple devices, making sure that at least it would show properly on different desktop screens.

After understanding how HOTGLUE works, the next step was to think thoroughly on what kind of content this web space would be built for and which piece of content has more importance over the other, in order to wire frame the website and also be able to build a page structure.


The top sketch is defining a sitemap while the bottom one is an attempt to wireframe the different pages.

At this point, choices were made about how the content would look on the page and it was decided that it would be striped from unnecessary elements, opting for a minimal layout. Also the content would be visualy responsive, but since writing custom media queries would take a significant amount of time, using the Twitter Bootstrap framework was the best option.

However, some Bootstrap features use JavaScript files and libraries such as jQuery. This can override HOTGLUE's scripts and completely break the tool with no easy fix but to e-mail the support team. With this in mind, nothing more than the twelve column grid was used from the framework, leaving additional features powered by scripts behind.


Screenshot taken from the homepage of the already assembled online portfolio.