Conclusion

I have produced a functional website using a range of techniques in order to have a successful user experience. Within the website I have areas that work well and those that need further improvement. The website needs a larger form of jQuery implemented in order to provide more interactivity the only forms of jQuery consist of the slider and the portfolio displays. The overall layout of the menu works at this time but as I build up my work I will need to develop different pages according to each type of work. The contact page is very dull, it has to much blank spaces therefore in order to fill it up I could implement the social networking websites for users to be directed to. It will be a form of filling out blank spaces without the need to use so much text. As part of the jQuery functionality I could have added an <iframe> with a Google map of where I am located along with my address just in case clients want to contact me by post. Within the portfolio page I will need to implement a scroll bar in order to be able to incorporate further projects without the need to create other pages and add further menus. Although I like the font style used I do believe that it will not appeal to as many users as a normal font style would. This is an area that I did not test during the user testing therefore the results are unreliable. Within the about page I felt that incorporating an image of myself would have been ideal for clients to see who I am. The page seems bland there is only text and some logo icons added, I need to add something more in order for the clients to want to read my information. Within the footer I added several links to pages, these links changed the colour of the text in some pages. Unfortunately I was unable to detect where the error was as it did not occur all the time. This is a main feature of adjustments that is needed. Overall I feel that I successfully built a website with the required information. Although I have only posted a limited amount of work but it's my best projects so far. I will continue to develop this website even after the project is due in, it is an important aspect of what I will use in the future when I am working.

User Testing

The user testing did not come about until the website was finished, this was a result of a restricted time frame as I spent too much time experimenting with various designs. Here I wanted to experiment with the functionality of the website and how well it works. I also wanted to test the design to see if it appeals to the audience or not.

 

Test:

• What do you think of the design?
• Do you like the colour scheme?
• Navigate through the various pages, are the labels correct?
• Navigate through the image slider, does it work accordingly?
• Enter some details in the contact form, does it let you insert information?
• Select various images and videos on the portfolio page, do they load?

Results:

 

3 participants took part in the user testing here they all completed each question/task the results are as follows:

 

The students liked the over design, they mentioned how the page was not clattered with information and how features were clearly displayed.The colour scheme was another popular attribute, the students like the grey,black and white combination. They mentioned how the minor sections in pink were not offputing, the use of a different colour made it easy to detect elements. The overall labelling of menus and sections was also clear, the students found it easy to navigate through the various pages. The contact form allowed the students to enter their information although the functionality does not fully work as the PHP section hadn't been incoporated accordingly. The different icons and links in the portfolio page load and overlay pop up although do to some of the size restrictions the loading of elements was delayed, this also had to do with the internet connection.

 

Constructing the Website

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. 

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.

Sources

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.

Colour Schemes

I researched through different colour combinations in order to have an idea of colours that would be appropriate for my website. I looked through http://www.colorcombos.com a website that provides colour schemes for design implementation. I thought this would be the best way to test colours and find a set that would suit my portfolio. 

 

Below I have displayed different colour combinations that I thought I could use for the design of my portfolio. 

Colour Combination 1:

Colour Combination 2:

 

Colour Combination 3:

Due to the unsuccessful attempts I have had with the colour schemes I have used I decided to use the 3rd colour combination for my following attempt. I chose to use these colours as the previous websites I researched had a successful overal look I thought the pink could be used to highlight certain features of the website that I would like the user to be drawn to. 

Techniques to Use

In order to have a successful portfolio several techniques will need to be implemented in order to attract clients.

Logo

This is your identity and most important the focal point when a user visits a website. It is important to have an effective logo in order to appeal to users into visiting the rest of the website.

Tagline

Here the designer will need to say what they do, this tagline will need to be short and straight to the point. You need to state who you are and what you do, adding your nationality and your work status. Adding your location will inform clients if they want to hire you, you might be very far away making it inconvenient to them.

About Me Page

An about me page should be incorporated here a description of who I a and what I do should be implemented along with a profile image of myself in order for clients to see who I am.

Portfolio Content

Here I will need to add my previous and present work completed in order for clients to see what I have done recently and in the past. This will also show the variation of work and how I have progressed. I will need to add links to the official product instead of displaying it on the initial page as it can make my page process become very slow. Each project should have a description and date when it was completed, I could also include some of the processes that I took in order to complete it.

Contact

Contact information is vital; here I will need to implement a form for potential clients to enter their information and requests.

Services

Here I will need to display my tagline but add further detail about the different services I offer to customers.

Blog

Adding a blog page will allow me to post about projects and experiences that I have had. Blogging about work will show clients that I know what i'm doing. This is a form of permanently keeping my website updated and active, projects can take weeks and months to complete therefore the website needs some form of daily interaction. I will need to implement security measures with this service in order to protect myself and the clients comment on my blogs.

Call

In each page a button should be implemented allowing clients to contact me for a quote or to set up a contract. This needs to be enabled

Social Networking

Social Networking websites provide a wide range of people who could become future clients, having a Facebook, Twitter and YouTube page will allow me to promote myself to those who have not heard of my work. Updates should be posted on these websites with links to the initial website in order to attract more traffic.

Language

I need to make sure that the website is clear and straight to the point unnecessary text is off-putting for users and it will draw them of the website. Since I’m bilingual I will consider adding Spanish as one of the languages

Sources

Munroe, L. (2009). 10 Steps To The Perfect Portfolio Website.Available: http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/. Last accessed 31st March 2012.

Website Designers

The first stages of the assignment was to research portfolio websites, in order to have an idea of what I could create. 

http://www.studioairport.nl/en

The portfolio stood out to me in terms of its navigation system, icons have been used to display text. The hover tool have been incorporated in order to display when the user has placed their cursor over that particular icon. In order to avoid clatter within thr page the designer only displays text with the use of the hover tool, this is used to identify the various pages it has implemented. Some of the icons used are universal, the designer has used a telephone as the contact icon therefore the need for text is unessessary in this case.

http://www.paulcurrah.com

This website displays much more content within, the designer has divided the content, here the various types of work have been placed at the top, the user has been given the choice to either view the content according to their category or as a whole. I like the choice of option as it goves me the choice of preference, this is an attribute I could consider for my website. The choice of categories allows the clients to choose the specific section they want to see. The next form of menu is the personal section providing information about the designer and how to contact them. I like the use of colour within this website, each menu section has been given their unique colour combination that makes it easier to identify. I like the form of gradient from one colour to another implemented on the top menu. The use of very light greys instead of whites actually makes the page look more interesting and less bland. The logo use is very simple just a letter to represent the name, I might use this technique for my logo instead of displaying my whole name I could have my initials or an abbreviation of my name. The designer has added a brief description about them underneath the logo, I quite like this techniques as it gives the viewer a taster about them it could determine if they are interested in finding out more information that would then be displayed in the about page.

http://www.ollygibbs.com

The main element that stood out to me about this design was the font used. it gives a more casual impression that such a formal one. I like how he has kept it consistent all throughout especially on his logo. The use of different colours to underline each section allows the user to identify each category; he has also incorporated the ability to view all the content at once. Although I liked the font the overall feel of the website is quite bland and boring, there is nothing amazing about the logo although I see he has followed Gestalts principle of similarity. The text is the same although he has adjust the logo to be a larger size there drawing the user to it.

 

http://pixelbot.ro

The portfolio is effective regarding the colour scheme used, the designer has kept to black, grey and white, and the colour pink has been used in order to highlight features. I like the use of symbols on the logo to replace text; it has been implemented effectively as you can still identify the missing letter. The robot is effective as people can identify the website with the avatar; it is a form of representation. The designer has added their recent work as images that serve as links in order to give the viewers a taster of what they have created, the links will lead to the actual product therefore there is no need to look through the menu etc. The actual menu has been placed at the very bottom of the page along with their social networking pages. I like the positioning of these attributes, it makes the user come across their latest work before they reach the menu because of this it constantly promotes their work and projects. The use of a simple menu gives a very casual impression; the pink highlights on attributes are eye-catching as the rest of the page mainly consists of greys, blacks and whites.

Introduction to the Project

As part of the dynamic scripting module I am required to construct and develop a website which will be my personal portfolio for clients. The website needs to be designed as a true reflection of myself as a designer and web developer. Before any initial designing and coding is commenced I will need to research pre-existing websites in order to see the types of layouts and functions that are most effective. I then need to research into colour combinations and choose an appropriate scheme for my website.