Review the project management process and identify successful and unsuccessful choices made and decisions taken

Looking over the project which I (Mohammed), Sam and Rami undertook did not pan out as how we interpreted it. Looking over our project plans I believe that tasks that we had carried out for the project partially some tasks that were carried out ran over the time span allocated that we set on the project plan. Even though sticking to the dates on all tasks set, I wasn’t able to stick to some of the tasks time span stated on the project plan. This meant that some tasks had to be rushed in order to keep on track or when running over, keeping the overtime to a minimum as possible. The reason why some task took more time to complete was due to the fact that there was a large quantity of work such as the website not being at its best. The main problem that had occurred in the project was that Rami webpages that he create didn’t meet the standard of a website specifically he used lorem ipsum which meant that there was no information on his pages about our site which lead to the user not have a clear message being conveyed to them. Because of this the group had to wait a week because of half term to do presentation to the client which caused a lot of overtime for this task of presentation to client. Due of the fact of time management the webpages created were kept very basic so we could keep to the timing set on the project plan which is one of task that we met. Regarding the successful that went well with the project management part of the project was that the group was able to complete the project on time according to the project plan even though with some tasks we did not completed on time and over ran a bit. Other successful things the well was that we got feedback from our client and peers, because of this it enabled us to be able to get idea of how to improve our webpages. Another successful thing that went well in the project was that the group I (Mohammed, Sam and Rami) all worked as a, there were lots of tasks to be done at specific times and we got them complete such as the interim reviews and designs.

Tools Used

Introduction

There were many tools and techniques available for use that could be used to create a fully functioning website. I however used two main tools in the creation of our website; these consisted of Komodo Edit 7.0 and Paint.Net mainly. By using these tools I was able to create my webpages and make it work and interact with each other.

Komodo Edit

Komodo Edit is a webpage code editor tool what allows for html (in my webpage’s html 5 was used) coding to be written to create a website page or even a website, in addition CSS coding and meta tagging can be written in this tool as well which will help describe and implement the presentation of the web pages or website. As komodo edit allowed me to create my webpages there were series of techniques that enabled me to this, in particular using the tagging text files i.e. HTML, CSS and meta tagging. By using tagged text files in komodo edit I was able to put various elements in to my webpages theses consisted of forms, images, text, paragraphs and lists. In addition I was able to create the layout of my webpages via using special tagging text called “div classes” and div id” which was used in my webpages which could also be used with the layout and declare the various elements properties on the webpages such as images.

Using these div tags I was able to create a header, navigation bar, content container and footer, also can be used if want to edit properties of various elements such as images to a specific size. In doing this I was able to work one parts of the webpage at a time which made it easier to get through the implementation of the website which was made possible by komodo edit as its one big sheet and can start wherever I wanted to do. Also as this special technique is used, it was also used to edit the properties of the element via CSS for instance in my index webpage I have an image and I used the special technique of a div tag to give the image a class which made a its own unique element and with CSS I was able to edit the width, the height and padding of it to make it smaller. Once finishing all these different areas using this technique I could use komodo edit to put it all together on one page to make it work together. In doing this, komodo edit provided me a logical technique in making my webpages in the sense of one after the other and building up to a complete set of webpage’s.

HTML (Hypertext Mark-Up Language) was used in the komodo edit tool as a technique to create what will be on the actual webpage’s. The types of elements that were on the HTML were text, images, forms, lists and tables. For these elements to work on a HTML they must have special text with it to be classed as elements my the html, for example to class a bunch of text I start of with the special text of ‘<p>’ and end it with ‘</p> by doing this I have told the html that the bunch of text is classes as a paragraph which can be further formatted though the CSS.

CSS (cascading style sheet) was used in the komodo edit tool as a technique to control the formatting of my webpage’s. For example I was able and used special text provided to me by komodo edit when coding the CSS to edit various elements of the webpage. For instance by using CSS coding on a header of my webpage’s I was able to make the header much larger then it was originally by using special text such as ‘font-size’ to enlarge the size of the text and also use the special text of ‘font-family’ to make the text of the hear in a particular style which was Veranda. My HTML was linked to my CSS via a meta tag which ensured my webpage would be formatted by the CSS so when preview I could see what my website will look like with my CSS I created formatting it. My CSS code was written in a separate file, this was due to it making formatting much easier as all of it is done in one location making it simpler to portray a house style though out my webpage’s I have created. When making the site in komodo edit I sometimes needed to alter it for instance a change in the sizing of an image or positioning of it, a change would need to b made in the CSS rather than several changes to the HTML which would be hard to locate. 

Paint.Net

Paint.Net is an image creator and editor tool which allowed me to create various image from scratch for my web pages and edit certain images to incorporate into my webpages. In my webpages images were created to make specific buttons for certain areas of each of the webpages I was creating. For instance in the Paint.Net tool I made buttons for the product page specifically I made a ‘Add to Basket’ button for the page, in another page such as the shopping cart page one button I created was a ‘Delete’ button which was used to allow users to get rid of a product if they didn’t want it. Also I had an image of a backscratcher which I got off the internet and I imported it into Paint.Net and edit it to my preferences.  Being able to use this software tool I was able to create images and edit images successfully, also this software tools provided me special techniques that I could use and follow to make and edit images successful and to my liking for the webpage’s.

Testing

As a group we sat down together to test each other’s webpages to make sure they were all working as they should be. I (Mohammed) was testing Sam’s, Rami was testing mine (Mohammed) and Sam was testing Rami’s. From this test we all got back positive feedback with some few points on what we could fix up. After testing Sam’s webpages I noticed certain images specifically the product image wasn’t loading up. This wasn’t a major problem to deal with as Sam had made a mistake in the code for the image, it was a matter of just correcting it by changing the spelling of the code which made the image load up.

Here shows me test and the image isn't loading

I find that the destination foldername is wrong and needs to be changes by Sam

Sam changed the the name to the correct folder name

Because of the change the image now appears due to the mistake I found in the testing of it

Week 18

Week: 30 April 2012 - 6 May 2012

This week we continued in creating our website for them to be completed and tested successfully by the 18/05/2012 (new deadline date, original date was 11/05/2012). However during this week I was told that I had an extension due to the other group being behinds meaning I have more time to complete my website. Because of this it had affected my project plan in the sense that I to change the dates to meet the planning finishing date of the project. Some examples of changes I made was that I changes the Presetation to client to the 25/05/2012. Changing the date of the Presentation to Client also mean that other tasks dates were changed even the the finish date. When the change to the presentation to the client the finished date went over about a month of the original finish date, to get it back to the original date I reduced the time to complete the Evaulation from 11 days to 5 days. THis has been a significant cut which will make it tight to complete this but I have confidence that I can complpete it on time. Progress wise I was on track to meet the original dates which means if I meet this original dates I will have more time to do extra checks on my webpage and complete other tasks.


To see the second changes to my project plan  due to certain circumstances. Click here

Week 17

Week: 23 April 2012 - 29 April 2012

This week we have continued to create our website and I feel that I am making good progress in making the website. I am making good progress as I feel that I have a majority of the site done, this is a good point as the timing of it will work well with my project plan. This is due to as will me finishing it off well before the planned deadline for implementation. Also this week I have received my M6 back and fortunately I have passed this meaning extra time wouldn't be needed to correct which could affect my website production in the scene of not having enough time.

Week 16

Week: 16 April 2012 - 22 April 2012


This week we have returned to college from the Easter holidays. We continued to create the website while at the same time we had submitted the M6 criteria to our teacher for it to be marked and ticked off. Also we were thought how to create forms in our site, i was able to successfully make a log in form which i can use in my website and make choices for the registration part of site. Looking over my project plan I am up to date as I am well before the planned deadline i have set.

Interim Review

Interim Review

To view the actual Interim Review notes where everything was noted down click here

As a group Me (Mohammed) Rami and Sam sat together as a group for about fifteen to twenty minutes for an interim review. By doing this we were able to get up to date of what going on in the project in terms of our progress, meeting deadlines and any problems we have faced. In doing this we have a better understand of where we are up to in the project and stuff that needs to be undertaken as well as understand what is done in correlation with our progress. We first of all went over all of our progress through the duration of the project from the start of the project. The sort of points that we got back from us was that we were generally up to date and haven’t fallen behind with reference to our project plan. In addition by being up to date we had all the design completed on time before the designated time as stated in the interim review bullet points this included our completed 5 initial and 5 final wireframes. However a problem we encountered was that Sam wasn’t in one day which meant we could tell him a feature we wanted to add into out site. On the other hand this worked out not to be such a big problem as it was first though out to be, this because we were able to phone up Sam and let him know what we wanted to add to our site. From this review we all decided that we will have another review session before our presentation to client. If there are any more things we need to work on we will complete it on the second review day so its ready for the presentation.

Week 15

Week: 9 April 2012 - 15 April 2012


This is the second and final week of the Easter holidays and I am still continuing in creating my site and I feel i am making good progress as I haven't fallen behind when looking over my project plan. In addition I have done a write up of the group interim review which too place on 6/04/2012, in doing this I have gained a greater insight of how the group is progressing up to this point in the project and future task that need to be undertaken. I did encounter a small problem which was that i could not put my interim review notes and write up on blogger, this is because blogger wasn't loading up. However this wasn't such a big problem as i waited for a couple of days and then i uploaded the interim review to to my blogger.

Week 14

Week: 2 April 2012 - 8 April 2012

I have started to create my website from scratch. This was made possible as i have the appropiate package in the form of komodo edit to create the actual website. This week I have manged to make the template of the webpages which gives me clear vision of how the web pages look like.

At the same time on the 06/04/2012 we met as a group to have a planned interim review that we needed to do, this is where we checked our progress at the moment to see if we are up to date and where we should be in the future of the project. We also in this interim review set down "goals" that we wanted to achieve so when we do another interim review which is the day before presentation. Because of this I had made changes to my project plan specifically I had taken a day off the planned testing and using that day for a second interim review in order for us to have a chance to review and discuss what has happened. In doing this I have met a deadline stated clearly displayed on the project plan displaying I have a met a deadline that cross referenced my project plan. Which demonstrable me meeting s review date when cross referenced with my project plan. When checking this week to my project plan i can see i am up to date and on track to meet the finish date I have planned for the implementation of the website.In doing this I have met a deadline which I have set. When looking at my project plan I am able to see that i am on track to meet my deadline for the implementation which is a good thing as I haven't fallen behind menaing im not rushing things. 

Week 13

Week: 26 March 2012 - 1 April 2012


The week we finished off completing out practice three column webpage, I was able to come up with a very professional looking website which gave me encouragement that I have  what it takes to make a successful and professional looking website. After this I started straight away in implementing my real website. My progess is again all good and on track to meet dealines that I have set in the project plan.


Click here to see the changes I have made on my project plan.

Week 12

Week: 19 March 2012 - 25 March 2012


This week we continue being taught how to make the layout for the for a website on komodo edit. We continued making a two column, once completing that and understanding it we moved onto making a three column site on komodo edit. Looking over my project plan i can 'see im up to date and 'im not fallen behind which is a relief as we are fast approaching the ending of the project which is very important.

Week 11

Week: 12 March 2012 - 18 March 2012


This week we were taught how to make the layout for the for a website on komodo edit. We first started making a one column, once completing that and understanding it we moved onto making a two comlum site on komodo edit. looking over my project plan i can 'see im up to date and 'im not fallen behind which is a relief as we are fast approaching the ending of the project 

Week 10

Week: 5 March 2012 - 11 March 2012

This week has been an unusual week as blogger wasn't working on the computers we used all week in the sense of  not loading up the profile. This has resulted in the teacher not being able to see my conclusion for unit 21 assignment 2, however this was resolved by us being relocated to another room which had a working blogger site that loaded our blog profile.

Week 9

Week: 27 Feb 2012 - 4 March 2012

This week I have been going back and revising over the css and html on komodo edit so I can refresh my memory of doing. This has been successful as I know feel comfortable to go on and create our website for the project. Up to this point i feel my project is going well as i haven't fallen behind which has meant that i didn't need to change my project plan as i'm on track. Also we were given back our assignment for the design a website and fortunately I achieved all criteria which mean extra time wont be need as i have achieved everything which is a good relief for me.

Week 8

Week: 20 Feb 2012 - 26 Feb 2012

Week 7

Week: 13 Feb 2012 - 19 Feb 2012

Week 6

Week: 6 Feb 2012 - 12 Feb 2012


After finishing my designs for the navigation and wire frames I looked at my project plan to see what is to do next and I saw that the implementation of the site had to start. This week I started the implementation of t our website. This demonstrates that I have met this dead line in the sense I have done what I planned to do. By staring the implementation this week shows mg progress is up to date and good as I have kept to the deadlines I set for myself.

Week 5

Week: 30 Jan 2012 - 5 Feb 2012


This week is the deadline for Unit 21 Assignment 2, fortunately I completed my all my wire frames by 03/02/2012 which helped as I had a little time to revisit my design to make sure that all was in order. I had more time due to my project plan stating the finish date should be on the 06/02/2012 and I finished on 03/02/2012, this means I have three extra days to make sure everything is all in order. THis further meant I was ahead of shedual when looking over the project plan at this point in the project.In the end I had a completed initial and final wire frames submitted on time when compared and looked at the project plan on the 06/02/2012. In other words this means in doing so I have met a deadline stated clearly displayed on the project plan displaying I have a met a deadline that cross referenced my project plan. The result of this was that I am able to continue on with the project. By completing this on time I have a firm foundation and of what my website will look feel like and how it will operate. Up to this point I feel my progress has generally been positive as it have not missed the deadline for the wire frames and not fallen being in my project plane as it states that I am on track. 

Design a Website - Site Layout

Introduction

In this unit 21 assignment 2 design a website I aim to discuss and make Initial 5 page wire frames produced in an online tool of the pages for which you are responsible, Blog entry of your meeting with you group describing the strengths of your design with any improvements you are going to make, Final 5 page of wireframes produced in a second web page design tool for your final design, Description of your design, comparing your draft and final wireframes, Description in blog describing and justifying the tools used in producing the wire frames. By doing I will have met the page layout part of the assignment.

1. Initial 5 page wireframes produced in an online tool of the pages for which you are responsible

Click on the Link to see the Index page
Click on the Link to see the Product Information page
Click on the Link to see the Checkout page
Click on the Link to see the Terms & Condition page
Click on the Link to see the Shopping Cart page

2. Blog entry of your meeting with you group describing the strengths of your design with any improvements you are going to make

Once upon the completion of my draft of my five page wireframes my group and I sat down together and reviewed my 5 wireframes to see what the strengths were are about it and also discuss whatever improvements that can be made or incorporates on to the wireframes to further better it.

From the group sessions we all thought that one strength of my wireframes was the way the navigation was via a navigation bar, we thought this because we felt that it was suitable for how we wanted the users to move and navigate around the site. This means that users are able to go through the site via a tool bar with the main section as well as though sub menus that branch off the main sections of the site. We thought this was strength as it would significantly reduce the time for a user to stroll form part to another part of the site. Also we thought it was a strength in terms of a design view, in other word this means the positioning and the sizing of it makes the site have a more professional feel to it which could have a big effect as it could make users feel comfortable using the site leading to them staying and keep using the site as it is easy and quick for them to use. If however if I had done the opposite then users wouldn’t feel comfortable and lead as it would be a affective or efficient website due to the fact it doesn’t look right or doesn’t have a degree of professionalism to it. Although we thought my navigation had much strength to it, the group however including me noticed there can be improvements made to have a greater impact. One improvement that could be made is to add some colour, as shown below my navigation bar does lack colour which could have a negative effect on user when using it. As a group we discussed that due to a lack of colour it looks boring and may cause users not to use it which would mean they can’t navigate. The reason why they may not use it is due to it looking like it may not work which could force uses to leave site. Also we agreed that if I added some colour to it would bring some more life to the site making users feel more comfortable and stay on the site and use it as it may have a more professional appeal to it.

From the group sessions we all thought that an extra strength of my wireframes was that it incorporated social networking elements into the site. This means that when users use the website they can connect their Facebook or Twitter to the site so when on their social network they can receive latest news about products, latest upcoming events and etc. Also due to a majority or people on these social networking all people who have an account are able to sync their account to the site keeping them well informed.

Also from the group sessions we all thought that another strength of my wire frames was the way the layout of each page is set out, we thought this because we felt that it was suitable for how we wanted the users to view the page with some sort of continuity. This means that users are able to go through the content on each of my web pages in a chronological order, we thought this was a strength as it would significantly make it much easier and stress free for user to be able to get through the content and understand it on each page due to it being laid out in such a way users can read it with out to much difficulty and getting confused where they are. If I hadn’t laid out my content in a chronological order then I users may find it hard to grasp what is what the message is as it is all over the place. Also we thought it was a strength in terms of a design view, in other word this means the positioning and the sizing of it makes the site have a more professional look and feel to it which could have a big effect as it could make users feel comfortable using the site leading to them staying and keep using the site as it is easy and quick for them to read the content and understand the message more efficiently as it may fit their needs to how they want to read or watch content on a site. If I had done the opposite then users wouldn’t feel comfortable and found it time consuming to grasp the idea of the content. This would affect the website due to the fact it doesn’t look right or doesn’t have a degree of professionalism to it which can potentially put them of as it doesn’t fit their need of how a site should convey message effectively to them.

Although we came up with some strengths about my 5 wireframes, we al noticed there could be other additional improvements that could be made. One improvement that was pointed out that I could do is put a user log in and password entry point on the top next to the title of site for each wireframe. By doing this it would allow users to be able to log then rather going to the log in page to log in which would be a short cut and a quicker process to users logged in. This can be beneficial as well because if a user is on a page that is important for them to stay on it rather than losing the page they can automatically sign in while on the page they are on which can result in not much time is wasted which is one of the needs of the user of the site. Another improvement that could be made is to add some bright colour, as shown my colour scheme does lack bright colours which could have a negative effect on user when using it. As a group we discussed that due to a lack of colour make it looks boring and may cause users not to use it which would mean they can’t navigate. The reason why they may not use it is due to it looking like it may not work which could force uses to leave site. Also we agreed that if it added some colour to it, it may bring some more life to the site making users feel more comfortable and stay on the site and use it as it may have a more professional appeal to it.

3. Final 5 page of wireframes produced in a second web page design tool for your final design

Click on the Link to see the Index page

Click on the link to see the Product Information page 

Click on the link to see the Checkout page 

Click on the link to see the Terms & Condition page

CLick on the link to see the Shopping Cart page 

 

4. Description of your design, comparing your draft and final wireframes

When comparing my initial wireframes to my final wireframes I am able to see there are many differences in terms of the design and some features or functions.

One difference that I can see when comparing the initial wire frame to the final wire frame is in the final wireframe there is some colour which the initial colour. Colour was used to change the atmosphere to be more positive and welcoming rather than being dull and boring. By being more positive and welcoming it bring some life into the site and makes the user feel comfortable which could be key in retaining them, comparing it to my initial wireframes it just look better to look at as my initial wireframes we boring due to the colour scheme was just black and white which doesn’t stand out. In the final wireframes the colour scheme of grey and black were used with purple texture also used on the index page, this was better in terms that is wasn’t too bright or too dull which meant it wasn’t hard to look at as not very bright colour were used but still had good effect in terms of looking nice to view. The reason why this change happens from the initial to final was due to the amendment that pointed out in the group meeting. By have this feedback it has much improved the look of my site with effect in the sense of looking much better compared to by initial wireframes.

Another difference that I can see when comparing the initial wireframe to the final wireframe is in the final wireframe there is a username and password with its space form information to be typed in on the banner. By having this it allowed users to be able to get into their accounts without having to leave the page at present they are on. By not having to leave the page it makes it less time consuming for users which could make them uncomfortable and make the process of getting product much quicker rather than going back and forth to get the process done. For this to happen as in the initial wireframes there was no such thing so I incorporated it into my final wireframes which is one difference between the designs that allowed users to log in without having to go onto a different website. Also due to this feature that is incorporated in the final wireframe not the initial it can help keep with the three click rule which will make it much quicker and simpler to purchase the product. This was also highlighted in the group meeting that could do to better the site compared to my initial wireframes.

An extra difference that I can see when comparing the initial wireframe to the final wireframe is in the final wireframe there is a mini navigation bar at the bottom of each of the wireframes. By having this once users are at the bottom their action is reduced as they don’t need to scroll back up to be able to go onto another web page in the site, this wasn’t possible in my initial wireframes as I didn’t have this sort of functionality incorporated into it. Due to this the users scrolling is further reduced meaning it will be less time consuming for the users to get to their destination and therefore less time consuming to complete their transaction for our product which couldn’t be done in the initial wireframes. This was also highlighted in the group meeting that could do to better the site compared to my initial wireframes.

5. Description in blog describing and justifying the tools used in producing the wireframes

For me to be able to create my five page wireframes we had to use two tools to create a draft and final five page wireframes for our design of website. These tools consist of Cacoo for the draft and iPlotz for the final.

IPlotz is an online application that allows it users to be able to create wireframes so they can experience them as a real website. Users can add, delete, rename pages of the site maps drag and drop website components onto a resizable page and link them to external webpages if needed. Also users are able to drag and drop their own content such images or videos onto a page and exporting pages as a png, jpg and pdf file formats. As iPlotz provide website components such as buttons, to us users they can be used to be constructed together to create my five final wireframes of my website. By doing this I am able to create the look of my webpages with all components and also have a good sense of how it is going to be. The reason why this tool was used in producing the wireframes was because it was quick and not difficult to produce an effective wireframe in a short period of time. The reason why iPlotz was quick and not difficult to produce an effective wireframe was because all that was needed to create the wireframe was to select website components and drag and drop the components onto the page and then allow the user to be able to position and resize the website components to our preferences. Due to iPlotz being quick and easy to use I was able to create my five final wireframes successfully which consisted of the index page, product information, shopping cart, terms and condition and the checkout page without too much time taken to complete it. Also by iPlotz being quick and easy to use it will help my timing in a positive way on the rest of the project as a whole. This means that I didn’t need to spend a long time in creating the five wireframes which meant I didn’t fall behind which resulted in my timing in my project plan had not been affected. Furthermore this meant I didn’t need to change my project time to accommodate more time for me to complete my design for my wireframes which was a big help.  Another reason why I used iPlotz to produce the five page wireframe was due to the functionality of being able to file share my designs with other people online. This had helped me very much as I was able to get comments and feedback from other people from my group straight away instead waiting to the next day when I see them. This also saved time which meant I didn’t need to make changes to my project plan.

Cacoo is a design tool that mainly allows users to create diagrams such as wireframes from a various variety of shape or advanced shapes available for use and elements from a large library to be put together to create effective diagrams. As there are some advanced shapes available for use, these shapes can be used to construct my five pages of wireframes successfully. The reason why Cacoo was used as the tool for me to create my initial design was because likewise with iPlotz it was easy and quick to use and produce my five page wireframes. The reason why Cacoo was easy and quick to use in producing the wireframes was because all that was needed to be done was to drag and drop shapes wanted on to sheet for the user (us) to be able to position and resize to our preferences which was similar to how iPlotz allows it using to construct a wireframe. As of the easy usability I was able to create my initial five page wireframes successfully without too much time taken. Also by Cacoo being so easy to use and being quick it likewise with iPlotz it will have a positive effect on the project as a whole. In other word this means I didn’t need to spend a long time creating each which resulted in me not falling behind and playing catching up which would have affected the timings of the project and my project plan, meaning important tasks wouldn’t be completed as result of me spending a lot of time in making the diagrams which shouldn’t really take a lot of time. Another reason why I used Cacoo was because likewise with iPlotz the functionality of being able to file share my designs with other people online. This had helped me very much as I was able to get comments and feedback from other people from my group straight away instead waiting to the next day when I see them. This also saved time which meant I didn’t need to make changes to my project plan.

Conclusion

Overall taking everything into considerations after completing these various tasks I have ended up with a better understanding and established a firm foundation of what our site is going to look like and how the navigation will work out. This will have a further positive effect on the project as I will have a starting point of how I should approach in creating out site. For instance the wire frames I have created will show me how I should layout and what colours I should use and with the different diagrams which show me how I will structure the site navigation.

Week 4

Week: 23 Jan 2012 - 29 Jan 2012

This week I have completed the first part of my design which included my draft and final navigation diagrams by the 23/01/2012. This means in doing so I have met a deadline stated clearly displayed on the project plan displaying I have a met a deadline that cross referenced my project plan. After this I have now moved onto the wire frame design section and it tasks. According to my project plan I am on track meaning I have not fallen behind. This is because in my project plan all my wire frame and navigation design all had to be completed by 06/02/2012 and I am well before the deadline date.

Additionally when looking at my project plan when checking my progress up to this week I noticed I had missed a important task of 'Website Sign Off', when discovering this I made a change to the project plan by inserting a new task and named it Website Sign Off which is an extra task my group needed to take in the project. Once this was done my dates changed for the other tasks specifically the Project Evaluation and End project and had to correct this. Because of this my end project date went beyond the date it had to be which was 01/06/2012, to counter act this I reduced the amount of days needed for the design of my site  (even though there is a deadline for this was 03/02/2012). Making these changes didn't cause me much trouble which meant it didn't affect my project plan and no further changes would be needed due to how quickly the changes took. Also I fortunately completed my all my navigation by 23/01/2012 which helped as I have met a deadline I have set for myself on the project plan which then allowed me to continue and start on the draft and final wire frames for my website. In the end I had a completed initial and final navigation submitted on time when compared and looked at the project plan on the 23/01/2012. 

Here is the link to my changed project plan due to  certain circumstances . Click here

Week 3

Week: 16 Jan 2012 - 22 Jan 2012

Likewise with Week 2 I have continued in completing the other tasks that are needed to be completed. At this stage looking over my progress I thinks it is at a good standard as I completed the task needed to be done at a good  standard  on time and not fallen behind. This also keeps on track with my project plan as i have not run out days to finish these design tasks and overrun into other planned days.

Week 2

Week: 09 Jan 2012 - 15 Jan 2012

This week I have completed making three diagrams which will clearly display how our website will work out and also what pages I will be creating and how they will work out in a fully functioning website. These diagram that I created consist of a Hierarchical Diagram, a Matrix Diagram and a combined navigation diagram. As I have completed these diagrams on time I am waiting for them to be reviewed by the teacher to see whether they are correct so i can move forwards. In the mean time I have continued in completing the other tasks that are needed to be completed. At this stage looking over my progress I thinks it is at a good standard as I completed the task needed to be done at a good  standard  on time and not fallen behind. This also keeps on track with my project plan as i have not run out days to finish these design tasks and overrun into other planned days.

Week 1

Week 1: 03 Jan 2012 - 8 Jan 2012

This week we are starting our project, as we have started a group was created which included me, Sam and Rami. Once the group was formed we each decided what each web page we will be doing and creating throughout the project. By defining what each of us are doing we can start getting ready and research about the type pages were are going to do in order to better prepare us. In addition we all created our project plan in order for us to plan how we are going to undertake the project with specific timing for each of the tasks we are going to do. During this week I feel my progress had gone off on a good start because I have not fallen behind in my preparation and also as I am keeping in time of my project plan this is because according to my project plan I haven not over run my schedule and i'm on track.  

Design a Website - Site Navigation

Introduction

In this unit 21 assignment 2 design a website I aim to discuss and make 5 Page hierarchical site map produced in Word and linked to blog, Individually produce full site map produced in Word displaying Hierarchical Diagram & Matrix Navigation Diagram, Comparing & Evaluating all site maps produced within group and evidence of agreement of the final design, Final Site of Map produced in Visio and linked in blog and Description in blog describing and justifying the tools used in producing the navigation and purpose of site map, Description in blog describing and justifying the tools used in producing the navigation and purpose of site map. By doing I will have met the navigation part of the assignment.

1. 5 Page hierarchical site map produced in Word and linked to blog

Hierarchical Diagram

In this hierarchical diagram it displays the pages that I will be creating for our group website and how it will work out on our website. The index is the main page and the four “sub" pages I will be doing is the product information, checkout, terms and condition and shopping cart. From the diagram we can see that the that the four "subpages" are all linked to the index page which means the "sub" pages can be accessed through the index page. In the diagram I have put my checkout page underneath the registration as it shows the logical way of getting to that page on the website.

 Matrix Navigation Diagram

In this matrix diagram it displays the pages that I will be creating for our group website and how it will work out on our website. The index is the main page and the four "sub" pages I will be doing is the product information, checkout, terms and condition and shopping cart. From the diagram we can see that the four "subpages" and index page are all linked together that will allow the user of the site to go from one page to another for example product information to terms and condition or any other combination such as shopping cart to index and etc. Users can be anywhere and still be able to go to a particular section of the site according to the diagram.  

2. Individually produce full site map produced in Word, displaying Heirarchical Diagram & Matix Navigation Diagram
Combined Website Navigation Diagram

In this combined website navigation diagram it displays above all the pages that we will be creating as a group website and how it will work out on our website. The index is the main page and six "sub" pages these consists of product information (1, 2 and 3), Registration, customer service and help and shopping cart. Under the two of the main pages which are registration and customer service and help, there are further “sub” pages which give them a logical sequence that will take the user in a sensible chronological order to get through those pages. For example with the log in users would make an account and then be directed to a log in page where they would log in to get their account up and running and then checkout to finish off the transactions. I know this because how the diagram depict it meaning the orange boxes show they are related by the blue box via the orange lines.

Combined Matix Navigation Diagram

In this combined matrix navigation diagram it displays all the pages that we will be creating as a group website and how it will work out on our website. The index is the main page and thirteen "sub" pages these consists of product information (1, 2 and 3), Registration, shopping cart, contact us, delivery policy/information, terms & condition, FAQs, Customer Service Help, checkout, log in and registration. I know this because how the diagram depict it meaning the orange boxes show they are related by the blue box via the black lines. Also according to the diagram when on one page users can get to another page through the original page making it easier to navigation around the website to get to the correct position.

3. Comparing & evaluating all site maps produced within group and evidence of agreement of the final design

After individually completing our diagrams of how our navigation of our website is going to be like and diagrams of how each page is linked we all sat down together and discussed on which designs we should use for our website.  After reviewing all our diagrams it was evident that we all had gone in a similar direction with our website navigation layout, however we has some differences in putting them down this was very helpful as we highlighted the problems with our diagrams and things we had over looked when designing them. For example with my diagrams the logical sequence from registration to log in to checkout transaction didn’t seem right in a logical sequence. As we had made our diagrams in different ways it provided help in identifying the difference between them making it easier to identify which diagram should be used so therefore making a final decision of which diagrams to use for our website.

From looking at my diagrams designs firstly at first glance we as a group all agreed together what the good points and the bad points were.  At the first glance of my diagrams it was easy to under the information on the page, this is because the diagrams clearly displays the pages in a sensible order and also has different dependencies highlighted with different colours for example in the hierarchical diagram and combined navigation diagrams three levels were used and all levels are represented in three different colours. These highlighted the different dependencies displaying that they are different webpages and at different class so if used we know what will be the main page, subpages and sub underneath subpages. Also my diagrams were not annotated; they only had headers for the sections distinguish what section was what. This could also be a bad point as I could have used different fonts to distinguish which webpages each group member was doing in the combined navigation diagram. Additionally all boxes were lined by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. However though there are some good points about my diagrams there are some bad points are we noticed when reviewing it. In my hierarchical diagram and combined navigation diagrams there were some logical inaccuracies that made to the diagram seem not right. For instance one of the subpages was registration and the subpages for that were login then checkout, this seem not to be logically right as you won’t be asked to register to purchase product. Due to this I change my diagrams to show that you had to log in then be asked to register if no account is made and then finally checkout. With my matrix and combined matrix diagrams they lacked colours to depict dependencies which make it less clear of what was the main page and subpages.

From looking at Sam’s diagrams designs at first glance we as a group all agreed together what the good points and the bad points were.  At the first glance of Sam’s diagrams likewise with my diagrams is it is easy to under the information on the page, this is because the diagrams clearly displays the pages that are going to be done in a sensible order which helps people who see it understand how the navigation is going to be. However though this is a good point it can be seen as a bad point as there is only one colour used rather than separate colours which could depict the different dependencies used in the navigation system. Compared to my diagrams, my diagrams had different colour which showed the different dependencies of the navigation clear which we could not have been said about Sam’s diagrams. On the other hand this point could similar to my matrix diagrams which lacked colour making the dependencies more unclear. Similarly to my diagrams Sam’s diagrams additionally had all boxes lined together by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. Another bad point that was identified was that the registration, checkout and log in were separate subpages of the main index page, this was identified as un logical by the group.

From looking at Rami’s diagrams designs at first glance we as a group all agreed together what the good points and the bad points were.  At the first glance of Rami’s diagrams likewise with mine and Sam’s diagrams is it is easy to under the information on the page, this is because the diagrams clearly displays the pages that are going to be done in a sensible order which helps people who see it understand how the navigation is going to be. However though this is a good point it can be seen as a bad point as there is only one colour used rather than separate colours which could depict the different dependencies used in the navigation system. Compared to my diagrams, my diagrams had different colour which showed the different dependencies of the navigation clear which we could not have been said about Rami’s diagrams which is likewise with Sam’s diagrams. On the other hand this point could be similar to my matrix diagrams which lacked colour making the dependencies more unclear. Similarly to my diagrams and Sam’s diagrams additionally all boxes were lined together by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. Another bad point that was similar to my and Sam’s diagrams were that was identified was that the registration, checkout and log in were separate subpages of the main index page; this was identified as un logical by the group.

In the end we used Visio to gather our ideas and take the best points of each to create final diagrams which would work past the original problems we encountered.

4. Final Site of Map produced in Visio and linked in blog

5. Description in blog describing and justifying the tools used in producing the navigation and purpose of site map

To create our diagram we had used two tools to create our diagrams for our navigation of our website. These tools are Microsoft Word and Microsoft Visio. Microsoft Word is a word processing software tool that also has some drawing features to create basic diagrams with variety of limited shapes available for use. As these basic shapes can be constructed together to create diagrams or shapes they can consist of being able to create basic Hierarchical diagram, basic matrix diagrams, basic maps, new shapes, designs and etc. The reason why this tool was used in producing the navigation for the website and purpose of the site maps as it was easy and very quick to produce the necessary diagrams needed in a short period of time.  The reason why Word was easy and very quick to produce diagrams was because all that was needed to be done was to select the shapes wanted and it automatically pasted the shapes on the sheet for the user (us) to be able to position and resize to our preferences. Due to this we were able to create four successful diagrams which consisted of two basic hierarchical diagrams, two basic matrix diagrams and combined website navigation diagram successfully without too much time taken. Also by Word being so easy to use and being quick it will have a positive effect on the project as a whole. In other word this means I didn't need to spend a long time creating the diagrams which resulted in me not falling behind and playing catching up which would have affected the timings of the project, meaning important tasks wouldn't be completed as result of me spending a lot of time in making the diagrams which shouldn't really take a lot of time. Also another reason why I used Word rather than any other program was due to the reason I was familiar with the program, this meant I knew how to use it meaning not a lot of time was needed to train myself in it to be familiar with it. Due to this I could get my diagrams completed much quicker without too much difficulty experienced.

Microsoft Visio is a diagramming software tool that mainly uses vector based drawing features to create higher end diagrams for commercial purposes with a variety of advanced shapes available for use. As these higher end shapes can be constructed together to create diagrams or shapes these can consist of being able to create basic Hierarchical diagram, basic matrix diagrams, basic maps, new shapes, designs and etc. The reason why this tool was used in producing the final navigation for the website and purpose of the site maps was it was easy and very quick likewise with Microsoft Word to produce the necessary diagrams needed in a short period of time.  The reason why Visio was easy and very quick to produce diagrams was because all that was needed to be done was to drag and drop shapes wanted on to sheet for the user (us) to be able to position and resize to our preferences. Due to this we were able to create a combined website navigation diagram successfully without too much time taken. Also by Visio being so easy to use and being quick it likewise with Microsoft Word it will have a positive effect on the project as a whole. In other word this means I didn’t need to spend a long time creating the diagrams which resulted in me not falling behind and playing catching up which would have affected the timings of the project, meaning important tasks wouldn’t be completed as result of me spending a lot of time in making the diagrams which shouldn’t really take a lot of time. An addition reason why Visio was used was because of the more variety of shapes that could be used, by using this I was able to use more unique shapes that made it more obvious what things were what. For example a home icon shape was available to use and it made it more clear what the index page was which the home page was. An addition reason why Visio was used was because it could be saved as a picture format. This helped because it would help being viewed by everyone when uploaded on a blog. For example in my blog my diagrams are in a JPEG file format which can viewed by everyone on whatever device.

Conclusion

Overall taking everything into considerations after completing these various tasks I have ended up with a better understanding and established a firm foundation of how our site is going to navigation and how it will work out. This will have a further positive effect on the project as I will have a starting point of how I should approach in creating out sites navigation. For instance the navigation I have created will show me how it will operate for example from the home page users are able to go to the terms and condition page.