This is the first of 3 posts charting my progress through the module Interactive Media Web Authoring and will focus on the development of a basic website using NotePad++ to construct the site.
In planning this site I looked at a number of collections of portfolio sites. Of them all I probably found the most useful information on what makes a good basic portfolio site here. Some of the most common advice includes being visually well designed, only a selection of the designers work and have contact information easily available.
This website from a former student caught my attention for it’s simplicity & it’s style. It’s a great looking site that looks like it was made with WordPress, however while it seems to have a lot of the same styling it does not use WordPress. Great site though. http://www.gregormcguckin.com/
The work of the New York based photographer Satoshi has been a favorite of mine perhaps since I took up the study of photography and his website probably embodies everything I enjoy & aspire to in design. It mirrors his work in it’s simplicity and minimalism, it’s clean & bright, easy to navigate and it only has some of his best work on display. His earlier works of minimalist still life images will probably remain in my list of favorite works of all.
Part one of this module is to create a simple portfolio website to showcase my work online. We used a basic template and created the html code to lay each page out as desired. The first look at html dealt with laying out page structure into boxes in which we placed our content be it text or image.
For instance, when the page is viewed on different devices the content will respond accordingly. So on a pc, the page would look as above in example 1, but when viewed on a mobile device all the content will resize & even stack on top of each other as specified by the html and look like the example 1b.
We used java script for a number of uses but started off by changing the size of text (Example right) , then by introducing a message box when arriving at the page before revealing the full page (Example Below) .
I was able to style the website with my own branding, colour palette & Logo marks which were developed in the Advanced Typographic Design module. I used a minimum amount of branding as is recommended in my brand guidelines ( gra-brand-guidelines-march-2017) but did place a logo mark in the bottom right of each page & also a Favicon in the tab of each page.
Some of the issues I encountered along the way included getting the social media buttons to place where I wanted them. I wanted to float them to the right hand side of the footer but they insisted on sitting more to the centre. Also, when I tested the site on a mobile device they did not stack up evenly. Also, my brand mark which floated to the left was not sitting flush with the social media icons which gave the footer a very uneven & messy look. I managed to get it all good in the end though. The site was uploaded to Hostinger where I was able to set up a free hosting account and the website can now be found here.