Week Five: Website pages refining

After making some refinements, as shown in our last post, with our pages, we wanted to do a bit more finessing and create some more interest to the site. One thing that we were not so happy with was the "further sources" page. It didn't quite have the same standard and finished look like the rest of the pages. So we decided to have a look for inspiration toward how we could display the sites in an interesting/unique way rather than just a list that opened up new windows.

We found a site that had created icons, which had an area within them to click the link. So, drawing inspiration from this, we decided to create some icons for each of the links on the page. The screenshots below show the process.

Here are the finished icons:

Once the icons were made, we placed them into the further_sources.html and started to have a play with how we wanted them to work with the text. We found that because the icons relate back to our header, we would follow the same theme that the header does, using a centered alignment.

From here we then coded each of them to be a button that would take you to the external link that it is associated with. This became a little fiddly and is still a work in progress, but the buttons all work currently which is the main thing, we just need to work with the css a bit to get the final look we want.