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.