After the several attempts of building the website I finally came to a firm decision on the style of layout I wanted to use. Although all the HTML code is wrapped in the <body> tag I decided to also wrap the page information into another <div> tag in order to specify positions, colours, margin etc.
I decided to keep to a white background, this was so that there was no distraction towards to overall contenet of the page. Instead of using the standard menu layout were the attributes are placed in line with the additional function of drop down menus I decided to use random circles. Each main page will be displayed in a separate circle, they will all be placed at the top of the page although hey positions will result in a jagged look. Only 4 circles were used as i did not want to clatter the page with this technique, most of the circles were displayed as the same size apart from the portfolio one. This circle was displayed larger, looking through my research for my research methods assignment I came across the gestalt theories. In the similarity principle all elements are displayed the same except for one, this is exactly what i have done for the menu page.
I decided to keep to a white background, this was so that there was no distraction towards to overall contenet of the page. Instead of using the standard menu layout were the attributes are placed in line with the additional function of drop down menus I decided to use random circles. Each main page will be displayed in a separate circle, they will all be placed at the top of the page although hey positions will result in a jagged look. Only 4 circles were used as i did not want to clatter the page with this technique, most of the circles were displayed as the same size apart from the portfolio one. This circle was displayed larger, looking through my research for my research methods assignment I came across the gestalt theories. In the similarity principle all elements are displayed the same except for one, this is exactly what i have done for the menu page.
The overall look of the website at this stage was quit bland I felt that the font style needed to be changed. Here I visited Google fonts where there is a wide variety of font styles to choose from. I decided to use one called Marck script, here the design of the font interprets the look of hand writing. I felt that adding this authenticity to my website would make it
Below is an example of what my menu looks like:
I gathered this idea from http://www.visualswirl.com/inspiration/designer-portfolio-website/
I did not want the menu to be static, some form of animation was ideal in adding interactivity towards the website. At firth I wanted to incorporate transitions that rotate the elements up to the degrees I choose but because I was working with circles this idea was not the most appropriate therefore I came across the function to scale. Here each menu section will increase size when the user hovers over it, it is a form of notifying them which section s active at that time.
HTML
CSS
Slider
Within the homepage i felt that clattering the page with information was unnecessary, a jQuery image slider was incorporated in order to display some recent pieces of work This techniques is to draw the clients in wanting to visit the rest of the pages. The initial slider was downloaded from http://basic-slider.com this was used as a template in order to create my own. The font style used for the rest of the pages has also been incorporated into the slider therefore keeping the font style consist all throughout the website. I kept the navigation of next and previous in order for the users to be able to control the content as they wish. Below the slider there are numbers displayed, each number represents a different feature of the slider, it is a form of notifying them how much content there is and where they are exactly.
Footer
The footer design was taken from http://www.degt.cl where the designer uses 3 different columns to display information.
Attempt:
I used CSS3 columns to place the text separately and added some shadows in order to make them stand out. This technique was unsuccessful I felt that the overall effect did not look good. I decided to scrap this idea and attempt a different approach.
Within this section of the website I wanted to display information that was unnecessary within the main content. This was going to consist of further information written in short sections; another form of de-clattering a page but filing up blank spaces. My next attempt consisted on placing each section in a <div> instead of a column. Here I used floats in order to place each section on either side and one in the middle of the footer. Two of the columns had pink underlined writing these were links to other pages with further information. I decided to use pink and an underline in order for users to be able to identify the link.
Portfolio Page
When it came to constructing the portfolio page with my work i wanted to avoid using an image slider as each type of project needed to be categorised accordingly. In the first attempt I attempted the use of a slider but this was then removed as I wanted to categorise each section of my work.
I decided to use icons and links that display pop-ups to the product, this is an effective method in not directing the user to another page and avoiding to reload multiple elements. Below is an example of the overlay pop up, as you can see it loads the content from You tube without the need to direct the user to the website. The advantages of the image overlay apply to this technique, the loading of the video does not disrupt the rest of the elements of the page. The video loading time is decreased as the page only has to focus on loading a single element. This is a practical technique as potential clients will not wait around for content to load they will expend on demand responses.
About Page
Although in the about page I need to talk about myself I decided to minimise the amount by being direct with my wording. I also incorporated a Facebook and Twitter logo for users to be able to visit my page and see further information or constant updates.
Contact Page
In the contact page I wanted to keep the centre layout simple as the client only has one job and that is to contact me with information. I also used a similar structure to the website http://www.degt.cl as the designer keeps the overall look simple and straightforward. A jQuery form was implemented where various details of the user will be submitted through the use of email. I added the php code for the function to fully work.
Logo
The logo was left until last the reason for this was that I wanted to develop the overall design and then create a logo to match. Here I kept the design simple, I used the same style text as the rest of the pages although my name was highlighted in pink with the sub-heading being a smaller size and different colour.
Google Fonts. (N.D.). Marck script. Available:
http://www.google.com/fonts/#UsePlace:use. Last accessed 5th May 2013.
Enthropia. (N.D.). Quick Starting iBox v2. Available:
http://www.enthropia.com/labs/ibox/readme.php#images. Last accessed 10th May
2013.
basic-slider. (N.D.). Basic jQuery Slider. Available:
http://basic-slider.com. Last accessed 30th April 2013.
Unknown, (N.D), Twitter Icon [ONLINE]. Available at: http://www.tgh.org/images/TwitterIcon.png[Accessed 05 May 13].
Unknown, (N.D), Facebook Logo [ONLINE]. Available at:http://www.msjc.edu/StudentServices/StudentGovernmentAssociation/District%20Committees%2020112012/facebook_logo.png[Accessed 05 May 13].
dzyngiri. (N.D.). Slick Contact Form using jQuery and PHP. Available: http://www.dzyngiri.com/slick-contact-form-using-jquery-php/. Last accessed 11th May 2013.
