My Website design

As previously discussed I wanted my site to fit a template like my mock-up. I changed it slightly so it just consisted of a main banner, side bar, and content. I created my own banner using simple shapes on Illustrator, before adding my digital signature, I created for IDAT 107, using Photoshop.


I wanted to use my digital signature as I put a lot of work, time, and research into making it something that truly represented myself, see the IDAT 107 labels for a full breakdown. It was also from that research that I decided that I wanted to use the font type Arial throughout my site as personally I find it a friendly, warm font which is slightly rounded, all of which could be said about me. Also I used the same colour scheme, black and white, for most of the site as I feel it gives the design a more ordered, mature look ( blue text is used to highlight certain things, but still compliments the black and white), and two, it signifies how I often see the world in things being black or white. To achieve this uniformed look and feel across the site I used one CSS sheet to style all the main pages.

In terms of content, I viewed the website as an ongoing project which I would like to add to and change in the future, so with that in mind I just added four additional pages which are about different aspects of me. I have a brief intro about myself on my home page, and then I have a separate page to do with my travels, one to do with my hobbies, a cool stuff and links guide, and also a contact form. Although some of these pages may seem a bit bare at the moment, my thinking was by laying them out in such a way it would make them easy to add to, or to add a separate page for another topic in the future.

The site contains links to other sites, and also to navigate around the content, this was achieved using anchor tags, and specifying the destination using href, reference point attributes. There are three other parts to the site which use specialised coding, the story, the contact form, and the photo slideshow.

The story was achieved by using alert popup boxes to gain information, then by using variables and if statements, to place the relevant information back into the text at set point to make it appear like I personal story.

The contact form also uses different data collectors, and that data is sent to a specified destination linked to the “submit” button. In this case the destination is just an echo form which displays back the information you sent, but demonstrates that, in theory, the information could be sent to myself. The form also has if statements built in to check the three main elements required when submitting. These are run client side using JavaScript to check that a name, message, and a valid e-mail address have been entered. If not an alert is activated to ensure the user knows why the form will not submit. I chose to check for these items because if it were to be submitted for a real person to reply, these are the only three items they would need, a name, a place, and a question, whilst the other fields are just additional data. The name and message are checked by simply having a value, whilst the e-mail address is checked, crudely, by seeing if there is an ‘@’ symbol after the first character.

The photo slideshow of New Zealand uses variables and if statements to place a picture into a specified source, along with another variable to control the amount of time that image is displayed, before the code is run again to pick up the new picture variable value, and therefore change the image displayed. The continuous cycle of these images is achieved by using modular division (represented by percentage symbol [%]), so the number used in the statement is the remainder of the sum, not the answer. For example if there were 5 pictures, and the variable in the equation was 1, then 5 goes into 1, 0 times, but has a remainder of 1, therefore the image displayed is linked to that number. The cycle is achieved by the fact that when the variable then becomes higher, say 6, then 5 goes into 6 once, but the remainder is 1 again, so the first picture will be displayed again. Similar to how a clock works I believe. The getElementById function is used to enable the line of code to work in any browser.

There are a number of improvements I would like to make in the future which I will discuss once the site is active.