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.

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.