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. 

Designing a website- Part 5 - MS Visio Vs MS Word

Comparison between MS Word and MS Visio

I have used both programs for designing my 13 page site maps on I have found out that....

Easier to use:

I am much more familiar with the tools on Word making it easier to find the shapes, the writing and navigating the boxes around the screen, but saying this when I used Visio these functions where also easy to find on the screen because in Visio a design needs to be selected in order to make boxes and draw lines.

Boxes:

In Word there are only 4 designs to make boxes where as in Visio there is many more. In Visio the user can select what type of box they require this way they can select a range of group boxes or just a plain box so this way it’s easier to understand. They where used to separate each of the pages showing the matrix map clearer. I used it just for that to indentify more clearer the pages. 

Lines:

Drawing the lines which connect between boxes is critical, they show how the website will navigate not having these lines where necessary it could resolve in the website not functioning as it should be. Having broken links between pages or not being able to go back to the home page. In Word these lines could be draw dead straight with one bend in the middle or free hand by the mouse where as in Visio the option of drawing it free hand is simple not possible. I have used the free hand option in my design in word yet in Visio I had to find another way of doing the same job, pop out messages saying where they should go. When moving the boxes around in word the lines do not go with the them, in Visio they do which makes the whole process of positioning so much easier because later when the design needs improving not everything would need to be moved manually. The arrow at the end of the lines defines the direction of which way the user can and can’t go, in word when right clicking on the line this could be selected pretty easy but very time consuming in Visio it was done through the top menu bar which I found to be quicker and less time efficient.

Colour:

When using both of the programs for the first time I didn’t use any colour any parts of the designs, but on both programs colour can be used for both the lines and the boxes to identify their group or connections between each of them. This makes it much easier for the user to understand what’s going. I used the colours for the lines just so it can make it easier to read and for the boxes so when i draw the bubble it made it easier to understand what's going on.

Background:

Visio allowed the background to be changed from the standard grey to something more interesting, making the sitemap look better in every way. Word does not have this kind of option. I used this fuction to make the design look better. 

Speech Bubbles:

Although both programs have this kind of option of making speech bubbles, Visio’s version is better because once is put in place they will stick to the object, so when the object is moved the speech bubble will move with it. I used a speech bubble so I can describe what coloured boxes mean. Using such bubbles made the map look simpler by making some of the line disappear.

Measurements and precision:

In Word when making adjustments of the way things are positioned it its quite hard to get the result looking for so if I was to make the same size box from scratch it will be very hard to get the right size. Where as in Visio there is measuring tool at around the screen so when doing this it’s easier to create. By that moving the boxes around the screen I was able to makes them at the same level this way  they look identical and all in all better looking.

To conclude Visio is the better program to draw this kind of maps on but Word is still good as it mostly designed for word processing. I the future I will only use Visio.