Designing a web page - evaluation of wire frames Att 2 D

Introduction:

In this section I will be comparing and evaluating the 3 designs which my group made, Abdul’s 5 wireframes designs, Remy’s 5 wireframes designs and my 5 wireframes designs. By the end of this comparison I will draw a conclusion of what the final wireframes will base our final design on.

<--Remy's design                                                                                                              Abdul's design-->

General:

I have looked at Remy's and Abdul’s designs. They have done a pretty good job, Abduls I found it was a little bit too jumbled up by that there was too many icons at the top bar, Remy's designs where similar in the respect that all the buttons are at the top as well yet by look of things a little bit better laid out. Both designs include the main pages links which are required. By that you can go to the log in page, product page and so on, it's good!!! The positioning of the navigation buttons is random in Abduls designs, by that Remy’s designs makes the navigation process for the client a little bit easier. But all in all I find my design to be even stronger since it follows a pattern which the other designs don’t, making my designs stronger by that easier for the customer to navigate around the website. This is a key feature that the final designs need to be based on so this way we don’t draw the customers away from the website.

Shortened word: 

Here we can see how Remy’s designs can be confusing for the customer, most of the customers will not know what SDP means or PP is. We need to ensure that our final design doesn’t have these kinds of errors so the customers always know what each of the menus means.

Menu:

In all of our designs there is proximity which allows the user to concentrate on specific areas which are common grouped together, this is where my designs I feel are the strongest, in comparison to Abduls designs where I feel like most items don’t belong where they should by that the design does not fit in well. For example the “software download” button is at the top of the screen in the middle of nowhere, at the bottom of the page there is other groups of buttons which don’t need to be there such as deliveries, feedback and about us. Simply because we will not be creating the following pages deliveries and feedback. About us buttons will make it easier for the customer if they found it at the top menu like in my designs which all in all that’s where it is on most websites.

In Remy's designs are well conman grouped, I feel that some of the pages links should be at the bottom of the screen such as website policy. Some of the links buttons for the other pages are missing, making the design not compatible with the matrix which shows the way the website will be operating. By this we need to make sure we make the design compatible with the matrix in order to insure that the client will get what they have asked for. My design follows the matrix very closely by that it will make an ideal choice to choose it for the base of our website since it has the buttons links already in place.

In my design I liked the way there are only 4 menu bars which makes the page really well sorted out, in Abdul’s designs the buttons are jumbled up by that I can make it difficult for the user to follow through, in Remy’s designs the buttons are better laid out but I think my ones look better and are place better, Home, Products, Software, About pages. I didn’t like the way Remy added the register page in to the menu bar I liked the way Abdul did it, it's similar to mine in the same way so its at the top corner of the webpage and has a icon instead of writing.

Colour:

Abdul and Remy seemed to use be using greens in their designs as we have discussed in previews meets, in Abdul’s colours scheme we see other colours such as red and blue which don’t really go with the green in Remy’s designs there is lots of brown and black although they are earth colours they don’t look ideal for the purpose we are trying to archive in my opinion by that we should take different shades of green and use primarily only green for these designs this way the website can stay with the theme of hiking and outdoor rather than having dark or random colours which make the website look unprofessional. In comparison to their design I have used only greens in the wireframes designs, by that being another reason why my design should be used as the template to design the final designs on. If we choose ugly colours it will make our website uninviting to our customers by that there will be less of them buying our products. We need to ensure that the people will like it so they go on it therefore there will be more of a chance for people to buy the actually stuff. The green will welcome all sides of the gender tree male and female to little boys to little girls. Because it’s green the customers will automatically known and symbolise what the site is about, nature and hiking. In comparison to the black which Remy uses in he’s wire frames which may symbolise other things.

Spacing:

The top bar where everything is in may be a little bit too big in all of our designs, looking at other bigger websites such as amazon.com or play.com we can see how their top bar is very small this allows them more space for the products to go under it and produce more advertising. But in comparison to that our webpage will only be selling 2-3 products in comparison to amazon.com which sells thousands of products the advertising needs will not be as much required as the products which all go through amazon.com or play.com therefore for filling this need.

At the bottom of the page it’s the website police page which does not require as much space as I have left on it therefore the space can be moved down a little bit so this way there is left more room for the items on the top which will be used more and is more important for them to have more space since they will allow the company to function.

Scrolling:

None of our designs makes the page to scroll up or down, this is something that we had agreed in our previews meetings and that’s how we have designed the wireframes. This is important for both parties us and the customers, it allows everything in that group to be see together and the hustle of moving the mouse down to see the more important bits like the advertising it’s eliminated. Although the customer might not appreciate it this way they will be able to see everything there is to see on the website. All of our designs meet these points therefore are each good as each others.

The little things:

All the designs suffer from little errors, by that tweaks need to be made in order to insure that the final designs function and works properly.

Remy’s

·         log in wireframe does not have a “log in” Button

·         log in wireframe missing links and buttons

·         accessories wireframe does not have a “buy” Button

·         Accounts page does not require such a big recommended products box. By the no symmetry

·         The home page menu lay out is different from the rest.

·         Requires better colour scheme

Abduls:

·         Feedback does not need to be there.

·         The home page menu lay out is different from the rest.

·         Symmetry missing, everywhere.

·         Requires better colour scheme

Mine:

·         Too much space left at the bottom for website policy

·         Tel number maybe irrelevant since we are trying to sell online

Conclusion:

Based on the following evaluation I think my design is the strongest by that we should make our website based on it. It has the strongest colours scheme, easiest to follow, best lay out and strongest symmetry. I will persuade Abdul and Remy to agree to use my designs as a base in order to create the website required and meet requirements and specifications of the client. If we are to use their designs as they are the website will not meet the specifications asked by the client through the matrix diagram.

Action taken:

During a short meeting we agreed into using my wire frame design as the one which the website will be based on. During the final design we'll have to consider adding the register page as part of the top banner through out of the pages which I didn't add, because at first my matrix design suggested that the user should only go on it through the log in page.

Designing a website- Final designs (Wireframes)

Final Designs

we finished designing the final wire frames on time to meet both deadlines the course work and the project plan deadline now we can start actually righting the code.

Designing a web page - evaluation of wire frames

I have looked at Remy's and Abdul’s designs. They have done a pretty good job, Abduls I found it was a little bit too jumbled up by that there was too many icons at the top bar, Remy's designs where similar in the respect that all the buttons are at the top as well yet by look of things a little bit better layer out. Both designs include the main pages links which are required. By that you can go to the log in page, product page and so on, it's all good!!!

In all of our designs there is proximity which allows the user to concentrate on specific areas which are common grouped together, this is where my designs I feel are the strongest, in Abduls designs I feel like most items don’t belong where they should by that the design does not fit in well. For example the “software download” button is.
In Remy's designs are well conman grouped, I feel that some of the pages links should be at the bottom of the screen such as website policy.

In my design I liked the way there are only 4 menu bars which makes the page really well sorted out, in Abdul’s designs the buttons are jumbled up by that I can make it difficult for the user to follow through, in Remy’s designs the buttons are better laid out but I think my ones look better and are place better, Home, Products, Software, About pages. Ididn't like the way way Remy added the register page in to the menue bar i liked the way abdul did it, it's similar to mine in the same way so its at the top courner of the webpage and has a icon instead of writing.

All in all I think my design i the strongest by that we should make our website based on it. I will ask Abdul and Remy if they agree to use my design??

During a short meeting we agreed into using my wire frame design as the one which the website will be based on. During the final design we'll have to consider adding the register page as part of the top banner through out of the pages which I didn't add, because at first my matrix design suggested that the user should only go on it through the log in page.

Update of where we stand

At this point of the project Abdul is not in lesson and has not done the designs for the wireframes, Remy is in lesson yet hasn't done the wireframes as well. This means that we are behind schedule a little bit but if they do the designs by the end of college we can get back on track by finish project at home. By that we still need to evaluate the designs and draw the new ones.

Abdul has come in to college, Remy is nearly finished. Now they are working on the designs and finishing them, I can start evaluating their work.

Meeting

I asked Remy and Abdul for their wire frames in lesson this way I can start the evaluation of the work and meet the deadline. This is also important so we can stick to the project plan and meet the deadline as well.

Designing a website- Part 4.1 - Final design on Visio

The final design- matrix on Visio...


We have finally come to an agreement by that the site map will look like this. What I suggested to change was exactly what they was thinking we discussed it thoroughly in lesson and changed the site map so now it looks like this.

Designing a website- Part 6 - Paint VS iPlotz

 Comparison Paint Vs iPlotz....

I have used both program to create my wireframes for my website. Both programs where fairly easy to work with, yet iPlotz because it was an online program it allowed me to edit the design from every computer with a internet access which makes the designing, easier to keep track of and most of all access. Paint is a program which is pre-installed on all PC’s, the images draw are saved as JPG or PNG file type formats which later they can still be edited.  iPlotz is a paid for service but does offer 5 designs where users can try it for free, in paint the user can make as many different pictures as she/he may want.  

Boxes:

Both of the programs allowed drawing of boxes, they were easy gain control of and scale up or down, in paint after placing the box down there is no going back to it , to get re-sized, in iPlotz you change it at any point making it easier to work with.  In paint I used these boxes for every section for my work, in iPlotz I found other tools which I used to demonstrate the work such as pre set image boxes to demonstrate where there will be images.

Images:

Or otherwise known as components are tools which are used to demonstrate the items of the webpage, this was only available in iPlotz. Unlike paint where if I was to use such images they would have to be pasted from another file. This made my work so much more easier as I didn’t have to write down each time what the box drawn actually represents this way I was able to create the wireframe quicker and easier on iPlotz than paint.

Pre-set size:

When starting a new wire frame on iPlotz I was able to set the size of my webpage with one button at 800x600 or 1024x768, rather than guessing what the size should be as I had to do so in paint. Paint made the size difficult to guess, I had to go by my instincts in order to think of what the size is going to be.  IPlotz also had different pre set size where wireframes can be created for iphone or android, which it might be a useful tool to use when creating the site for these users. Which deals which other devices all-in –all to get rid of the guessing to tell true sizes which pages require to be.

Colour:

Both programs offered a wide range of colours, iPlotz however was a little bit better since it actually say what the colour’s number 339900. This will be a very useful when the time comes to physically design the website on notepad as the number can be just re-entered and the same colour will come up. To achieve the same colour from paint on the actual website will be difficult since it will involve a lot of guessing what the colour is. Colour is important to be used in the wireframes since they would give a idea of how the page will finally come to look like. I have used colours when designing the wireframes this way I would know what I need to produce and whether it will look good before actually seeing it online.

Grid/Tabs and Alignment Lines:

These tools where only available on iPlotz. I have used these tools to correct and make sure the alignment of the components is true, so they are set as they should be and the right amount of space is left where it should be required. Paint didn’t have this kind of option instead I went and aligned the components by eye, in some places meant the boxes are not centred or are of design and moved over and place as they shouldn’t be.  I used this throughout the 5 pages and aligned the wire map so it had the necessary symmetry and made good sense of how it will look like.

Zoom

Both programs had a zoom tool, allowing the page to be zoomed out and seen as a whole but also zoomed in so it’s seen as the viewer will see it on their browser, yet of course because paint didn’t have a preset size this was difficult. This tool did help out since it allowed me to zoom right in to achieve a precise alignment of the components. I used this tool on both programs to achieve what I want.

History:

This tool was only available on iPlotz it allowed me to change some of the lay out but then set it back as it was previously when I like it. But also allowing me to go forward again and re reset the lay out. It’s good as it gave me options of before and after between a bigger time period. Paint has a undo and a redo function but after 10 clicks or so it can’t go as back into the history as iPlotz does through out history.

Sent to tool:

This tool in iPlotz allowed items to be seen on the back or forward among one another such as having them on thing or behind them. In paint this tool does not exist you don’t have the freedom of choosing how items over lap, instead they would require to be draw bottom layer first. I have used this tool for the top title bar so the logo is over the green background.