Portfolio Implementation

Implementing and interpreting planned work can be the most crucial phase in creative design. Here I produce all of my sketches and wireframes into design elements; on the creative field of Hotglue and Photoshop.

My first step of implementation was compiling all of my ideas into a Photoshop mockup of the site. This entailed designing the title and navigation buttons, and having a rough layout ready to be hot-glued. Another advantage of Hotglue is it's ease of use. I didn't need to spend much time in Photoshop as the Hotglue toolset pretty much covered what I needed!

The title and navigation bar in Photoshop (left) and the finished design (above).

The grid tool was of great use to align all the elements in this step.

An idea I had when first putting elements together was a welcome page. Although it's a nice feature to have on a site, the gain was little and it was just another closed door that required an extra action for the user to open. The trick to good navigation is to minimize the number of clicks needed to get around by the user.

The welcome page was therefore scrapped.

The finished header block in Hotglue.

Linking the navigation buttons during the implementation phase is usually not the biggest priority, especially in Hotglue, since I spend most of my time in edit mode (where the links don't work). However I always find that getting at least the first few pages linked together to start with saves time later, when I may have a significant number of pages.

Linking the Bio and Contact pages using the 'make object a link' tool.

Here is the first final page design for my homepage in Photoshop and Hotglue.

Upon finishing the header and navigation bar, it was time to put my design phase plans into action and build the home page of my Hotglue site.

The first steps I took were creating and placing all elements: text boxes, photos and images imported from Photoshop such as the custom text headers. Once everything was in place on the home page, I had realised that my initial designs were disregarded, and I followed a different page layout. This led me to a complete "make-over" of the website.

While building my Hotglue I had found that I had been sidetracked from my initial design plans. For example, my first page sketches included the home page to include a simple box model of two text boxes and an image. Quite simply, I built a whole different website. So I decided to overhaul the layout, and in turn, the colour scheme. I wanted to create a site that would display perfectly on every screen. A lot to ask I know, but I believed I could make it work well without using custom responsive code. So I decided to have my main container left-aligned and slim-designed. I was of course at risk of losing potential "extra" space, but in effect the user would be losing the same space, with content on. I couldn't have that.

After some heavy element and colour tweaking I reached a final design but then realised that the background image was large in file size, and after testing it proved to be heavily slowing down the page loading on mobile devices. This obviously was a set back for the functionality of the site, so it had to change.

My next design proposal was more simple as I abandoned the background image completely. I felt however that the overall site look and feel was dull, bland and lacked contrast. On to the next!

Applying a gradient to the page and darkening my main container gave the site a deeper and calmer feel. I created the gradient in Photoshop, using the gradient tool on a 1920x1200 canvas. This is a fallback for users on larger screens where Hotglue would automatically repeat the gradient image (below).

Viewed on a 1920x1200 screen, the smaller (1152x864) background gradient repeats.

Again viewed on a 1920x1200 screen, the larger (1920x1200) background gradient looks correct.

A quick (literally!) video of me building the Introduction to Hotglue page. Fat Boy Slim.

A neat little tool in Hotglue's arsenal was the 'embed webpage' tool. This allows me to embed any other webpage as an object on a page. I took advantage of this tool by embedding my navigation bar from another page on my Hotglue, called 'global-nav'. This page is completely blank apart from the navigation buttons laid out as an inline list in the top left corner. I then used the embed tool to place this page on every other page. The fact that this page is blank also meant I could style the elements using CSS with the 'custom code' tool. I added a simple hover state for the nav buttons using "div:hover {opacity: 0.8;}". I used the div property because this is the only way Hotglue allowed me to select the elements on the page. This caused a small inconvenience, of which the bullet points were also styled with the hover state. This is because they are also div elements on the page.

Now that the global-nav page was successfully embedded, it needed to be positioned carefully in the same place as on every other page of the site. It was as easy as swapping between tabs to get the position exact. The size also needed adjusting. It needed to be exactly the height and width as on the global-nav page (above) so there wouldn't be any unwanted excess pixel columns or rows on the page.

Using the embed tool, all that is required is a URL to the page and Hotglue handles the sticky stuff.

The correct size and position of the embedded navigation page in edit mode.

The final output of the embedded navigation page. The CSS hover state declaration is also shown to be functioning correctly on every page.

When I reached the point of having pages with massive heights (like this one) I wanted to add a 'back to top' button that would follow the user when scrolling up and down the page. This required the powerful scripting methods of Javascript. I did some research and found a script that what I was convinced would work wonders. I was wrong, and disaster was gaining on me. Upon copying the script into a regular text box (below) and then deselecting the box, I found I was in some sort of limbo-mode that no one told me about. Nothing on the page was editable, everything was locked into place including the casually-coloured-Javascript-frozen text box.

What I thought would fix the bricked page, was disabling Javascript through my browser settings. This didn't help, as Hotglue's editing environment requires Javascript to function. At this point I feared I had to delete the entire page and re-create it.
There was hope however! Using the nifty 'compare revisions' tool, I could revert the page to an older state. This meant losing a few elements that I had on the page as the server must have saved the page state much earlier that day. It was nothing of an inconvenience though as it was only a text box or two.