design template D1

Mockingbird
wireframe on mockingbird

Paint

meeting the deadline

In this report I will be comparing and evaluating two different designs. To meet a particular specification and justifying the one chosen and which one to implement. I will be showing my final wireframe designs, and writing justifying my designs.

Logical sequence. Some of the elements on the page are palaces in the right places such as the logo and title, which are placed on the top of the screen. Placing these elements in the right place makes it easier for a user to understand, know what to do and know the company name.

Patterns make it easier for the user to know and learn faster how to use something. To users patterns maybe pictures on GUI or its layout. Templates on programs provide consistency and evenness which is symmetry. In this interface the layout is placed in different areas of the screen which is a little untidy and compared to other website interfaces the buttons placement particularly inconsistent.

When designing the new interface GUI you need to have colour awareness.  This interface will be designed with 3 main colours blue, red and yellow.  Two of the colours are in the trichromatic system. That means that they are detected by tree different types of cells on the retina of the eye, which are known as receptors. This helps the user see the interface better. The template user interface will have perfect amount of colours which may not apply to the user’s eyes.  Colours affect different people in different ways. For example the colour red maybe easier for some to read but for others more difficult. If they was to use colours on the website they have should have used colours such as red, green and blue. This is because there are three colours of the trichromatic system

When designing my homepage I will make my website have a good colour scheme. The website will be updated all the time to the related theme depending on the month of the year and also when adding offers and discounts on our products. I will be creating a newsletter on the homepage so the customers can have the latest news on our products straight away when available. Drop down menus will be created on all the pages of my website. Flash animation will be also designed to display the products.  Contact details are going to be easily spotted and the main page on the front fold.

Popular purchases are easy to spot as they are displayed on the main page which will attract customers to purchase them. The logo of the website will be displayed on the corner of the screen were when the user click on it they will go back to the homepage. 

my offers page will be designed by me. This page will include offers and discounts on the products which will make customers be drawn into it, so it has to be appealing to the eye straight away on first impressions. 

on my freqently asked questions these will be the question I will be adding to this page as it will be the most asked questions from the client, stakeholders and users.

1.       What will happen when I place my order online?

2.       What if I have a problem placing my order online or I am not sure it’s gone through?

3.       How do I know when my order will be delivered?

4.       Do you deliver internationally?

5.       My order's incomplete - what should I do?

6.       When will my goods arrive?

7.       What are your delivery times?

8.       Will my parcel be left if I am not at home?

9.       Can I change my delivery address on a parcel?

10.   Can I amend my order?

11.   Can you specify a return pick up time or slot?

12.   What is your product guarantee?

13.   How do I return items I've bought online?

14.   What period of time does a refund take?

15.   Can I have an exchange?

16.   Can I use gift vouchers online?

17.   Can I cancel my order?

18.   How do I order replacement parts?

A good thing about this interface is its proximity all elements are close together as a group.  This forms a common region. Such as if wanting to select a size you can just select one without moving around in the group.

The symmetrical pattern of this interface has bad points. The bad points are that some of the buttons in different groups have different sizes which makes there have no symmetry. The groups on the left side have more space than on the right hand for no reason at all. This makes it baffling.

Humans can recognise visual patterns in this case my interface has many patterns from the colour of the design to the symmetrical size of the buttons on screen.

In my interface I have added the element that are physically close together in proximity and can also be considered grouped. For example the way in which the menu bar is close together.

The interface clearly has a logical flow and describes what the user should do. It’s not confusing and jumpy like the first design which had a bad continuity. In this new interface the user can take step by step actions to complete the order of the product. This list is:

1.       Look at the page you want to go on

2.       Go on a product page

3.       Select the tem

4.       Select quantity

5.       The computer program would do all the calculation

6.       Press add to shopping basket

7.       And send to your account page

 Patterns make it easier for the user to know and learn faster how to use something. To users patterns maybe pictures on GUI or its layout. These templates on this program provide consistency and evenness which is symmetry.

Buttons stand out because of the pop out effect. With pop out effects the brain is capable of perceiving elements of an image that pops out. This can all be done as a result of changing their sizes, colours and rotation, which help to make the image stand out to the user/audience.

My wireframes has meet the user requirements by designing a multi page website to meet stated requirements. I designed a website both the navigation and  page layout before you sit down in front of your of your computer and produce the code, because if you don’t you can be guaranteed it will be a recipe for disaster.

toms site map

I think toms smartart sitemap is very Organised and understandable. I like how he laid out the sitemap and in my opinion the best one in the group. However it might be organised but not all the pages link together which makes it hard for a user to go to my accounts page from the homepage. To do this they would have to go from homepage to registration page then to login page and finally my accounts page.

anthonys site map

Anthonys smartart sitemap could have been better especially when linking the pages together and many of the pages we discussed in meeting that were going to link to other pages aren’t linked. I good point I can see in his sitemap is that I can understand it and it and complicated and I can also see he understood how to use the tools on work smartart correctly.

A similarity is that all the members have seen how all pages should be linked and have achieved the 3 click rule. This tells me that all 3 members in the group have given it all and made sure the user of the website can navigate easily.

my site map



One of the disadvantages of my smart art sitemap is that it can get a bit messy and confusing. My word processed site map looked so confusing and I think if someone else was to look at it they wouldn’t know where to start. I could have used different colour to make it stand out and also change the font size and box sizes.

However the good and the main advantage on my sitemap is that it links to every page we discussed in the group meeting. If you follow the lines carefully you will see that they all join to the pages and the homepage also links with all the pages on the sitemap.

Similarities between all our site maps are that the give the user on the website the choice to go from any page to another without going back on the back button. You can clearly see this by the homepage or index page having linked to all the pages. This can also avoid over clicking and this will not cause the problem of over 3 clicks

reference
https://gomockingbird.com/

smart art site maps

toms site map

I think toms smartart sitemap is very Organised and understandable. I like how he laid out the sitemap and in my opinion the best one in the group. However it might be organised but not all the pages link together which makes it hard for a user to go to my accounts page from the homepage. To do this they would have to go from homepage to registration page then to login page and finally my accounts page.

anthonys site map

Anthonys smartart sitemap could have been better especially when linking the pages together and many of the pages we discussed in meeting that were going to link to other pages aren’t linked. I good point I can see in his sitemap is that I can understand it and it and complicated and I can also see he understood how to use the tools on work smartart correctly.

my site map



One of the disadvantages of my smart art sitemap is that it can get a bit messy and confusing. My word processed site map looked so confusing and I think if someone else was to look at it they wouldn’t know where to start. I could have used different colour to make it stand out and also change the font size and box sizes.

However the good and the main advantage on my sitemap is that it links to every page we discussed in the group meeting. If you follow the lines carefully you will see that they all join to the pages and the homepage also links with all the pages on the sitemap.

wireframes

paint

I used paint as one of my program tools used to design my wireframes. Paint is very simple and easy to use. However can be very irritating because after clicking away from the shape or tool you are using you can’t go back the change the shape, and the only way is to undo and start again.

Paint is very good for the detailed designs are you can use the rubber to erase little things and won’t need the delete the whole thing. Unlike mockingbird which don’t have a rubber tool.

Shape tools on paint are really good just like on mockingbird. However on paint you can draw the shape straight away where you want. But on mockingbird you have to drag the shape out then adjust it to the shape you like and prefer, which in my opinion might take a longer process.

mockingbird


I used this program because it makes the tool more easy to use and also help to create and to link together, this save time and keeps the project in such an order, also mockingbird keep the planning fast and efficient. This program satisfies the customer because it communicates with a good way where clients can see it clear. This bring new ideas to mockingbird and is a rapidly to set and to design new things. The good thing about mockingbird is that is made with the tool that I can use for the wireframes and designing the website templates. And also I can open many pages as I want and it will still be linked together and I can arrange them easy and there is nothing to install. I can access from where ever I am, so this make more easy and faster to use and understand more details. 



reference
https://gomockingbird.com/
http://en.wikipedia.org/wiki/Paint

full site map

final sitemap

 

This is my group’s final sitemap. We designed it on word as we thought it would be the easiest and the faster way. Designing it on Visio made sense as the diagram is all vector graphic format. This format can be enlarged in any size and it won’t change because the pixels are coordinated to the program.

We looked at everyone’s sitemap and decided as a group that my Visio sitemap was the best and will be our final site map.

Tom said that the way in which all the necessary pages link together was good and he also added that on his sitemap he forgot to link the homepage to the accounts page. He also said that it is well organized and can be understood easily.

Anthony also agreed with what tom and with additional input saying that his sitemap didn’t have all the pages linked together and didn’t look as clear to understand as mine.

We choose this site map as our final site map because as you see all pages are linked together and is clearly shown how each page will link together and how all our 5 pages will join together aswell.

visio and smartart

Smart art and Visio

I used smart art as one of the tools to design the site map to create the website. Smart art makes it very easy to create business diagrams that display information in an easy and understanding format. I could easily grab a box and put it in the diagram showing the user how and where the pages linked together.

One of the disadvantages of smart art is that it can get a bit messy and confusing. My word processed site map looked so confusing and I think if someone else was to look at it they wouldn’t know where to start. I could have used different colour to make it stand out and also change the font size and box sizes. Unlike my site map on Visio which is clearly visible to everyone and easily understandable.

Smart art has many different layouts such as charts to step by step processes, I used the hierarchy layout because it was going to show how each page on the website linked together.  If you don’t know how to one of the layouts there are step by step in a sequential process to provide help to the users. The hierarchy group contains organisation charts and table hierarchies. You don’t have to use the shape selected and can change it if you want. This is a good advantage as I could change the layout later without losing any of my work.

To create a smart art diagram you simply have to first open Word 2007, Excel 2007, PowerPoint 2007 and Outlook 2007, then click the insert tab and select smart art icon in the illustration group. When you choice which of the following smart art graphic you wish to use. And in this case it’s the hierarchy diagram.

I also used Visio to design my website sitemap. Visio is a great program for making flow charts, sitemaps, websites or wireframes for software programs.  This program was very easy to design the boxes and connecting the lines to the boxes was much easier than on smart art. When linking the boxes makes it very easy to move the box and also the lines as the will be connected together. It’s much faster to draw diagrams in Visio than in word smart art. 

I think if I was to draw my final site map it will be on Visio and I might also you Visio for my wireframes.

On the other hand smart art can be better presented as you can add nice shadowing and effects such as 3D shapes. On smart art you can also had colour which makes it stand out and the user can tell the different between hierarchies or the matrix site maps.

http://office.microsoft.com/en-us/word-help/create-a-smartart-graphic-HA001205867.aspx

http://en.wikipedia.org/wiki/Microsoft_Visio