Now that I have my full alphabet printed, scanned and digitally manipulated I can now begin to develop the coding for my working website. As I have recently done the web workshop I have refreshed myself with the basics again from last year and learnt a few helpful tips that will speed up the production of this leaving enough time to sort out the written element ready for binding.
I began by working on the landing page and adding anchor points so that it would scroll down to the correct point for the main body. Also added the introductory content to the landing page to visually show of the font before moving onto its use and explanation further into the site. This is to be a direct mimic to the printed specimen book so effectively this is used to replicate the front over of the booklet so that the audience views the font in a similar way on both platforms. This is to question the audience further about the concept of if you can tell what is traditional and what is print.
After this was completed with all the content in place I began to work on the main website pages. The navigation proved tricky as I soon realised that my wire frame was wrong as I had followed the guides in Illustrator instead of working out myself. Because of this I had to change the variables several times until I achieved a layout which I was happy with and replicated the idea from my scamp.
'Application' as a word was too long in length so this was changed to 'Apply' so that the navigation bar would look more balanced and centralised.
Once the navigation was sorted I began to add the content to each page. Following the idea of my scamp I wanted the navigation to remain static on each page in the exact same position. For this to work I added an iframe so that the content could sit within and this would then be the only element to change. This was very difficult to do because of the anchors used to separate the landing element and main body. To overcome I moved the navigation onto each page so that this would also appear inside the iframe. This stopped the whole page going back to the landing page each time a link was clicked.
With the book on web coding I was able to link the contact to a email address and the FAQ to a new blank page which contained a great deal of content similar to the information in my rationale but referring to the personality and language to sell the font. The only link I couldn't make work was the 'download' button as this would need to externally link to a working font file which I was unable to create in the end because of the lack of time to learn Fontographer.
Looking back at the web specimen versions I have researched I liked the visual of the scroll where the text stayed still on the page. At this stage I am running out of time to figure out how to do this properly as the designer of that has done. So to create the same visual and movement I split the iframe into another iframe so that this could include just the image. By doing this it would mean the text could remain static in the first column and the other would scroll as aimed. The paragraph was tricky to position and took a few experiments with pixel size for the margins to get correct.
The overall website took longer to develop than I first imagined but I am pleased with the visual outcome that I have achieved and it works to a standard that accurately conveys my content and purpose to the audience. It took longer because my wire frame wasn't correct in the first place which meant I had to keep tweaking pixel by pixel and this is something I need to work longer on in the future. I would have liked to add an animation to the scroll but unfortunately I have run out of time to achieve this and make it work properly which is a shame as the finished visual quality lacks slightly, especially the transition from the landing page to main content.
No comments:
Post a Comment