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/