Introduction
In this unit
21 assignment 2 design a website I aim to discuss and make Initial 5
page wire frames produced in an online tool of the pages for which you are
responsible, Blog entry of your meeting with you group describing the strengths
of your design with any improvements you are going to make, Final 5 page of
wireframes produced in a second web page design tool for your final design,
Description of your design, comparing your draft and final wireframes, Description
in blog describing and justifying the tools used in producing the wire frames.
By doing I will have met the page layout part of the assignment.
1. Initial 5 page wireframes produced in an online tool of the pages for which you are responsible
Click on the Link to see the Index page
Click on the Link to see the Product Information page
Click on the Link to see the Checkout page
Click on the Link to see the Terms & Condition page
Click on the Link to see the Shopping Cart page
2. Blog entry of your meeting with you group describing the strengths
of your design with any improvements you are going to make
Once upon the completion of my draft of my
five page wireframes my group and I sat down together and reviewed my 5
wireframes to see what the strengths were are about it and also discuss
whatever improvements that can be made or incorporates on to the wireframes to
further better it.
From the group sessions we all thought
that one strength of my wireframes was the way the navigation was via a
navigation bar, we thought this because we felt that it was suitable for how we
wanted the users to move and navigate around the site. This means that users
are able to go through the site via a tool bar with the main section as well as
though sub menus that branch off the main sections of the site. We thought this
was strength as it would significantly reduce the time for a user to stroll
form part to another part of the site. Also we thought it was a strength in
terms of a design view, in other word this means the positioning and the sizing
of it makes the site have a more professional feel to it which could have a big
effect as it could make users feel comfortable using the site leading to them
staying and keep using the site as it is easy and quick for them to use. If however
if I had done the opposite then users wouldn’t feel comfortable and lead as it
would be a affective or efficient website due to the fact it doesn’t look right
or doesn’t have a degree of professionalism to it. Although we thought my
navigation had much strength to it, the group however including me noticed
there can be improvements made to have a greater impact. One improvement that
could be made is to add some colour, as shown below my navigation bar does lack
colour which could have a negative effect on user when using it. As a group we
discussed that due to a lack of colour it looks boring and may cause users not
to use it which would mean they can’t navigate. The reason why they may not use
it is due to it looking like it may not work which could force uses to leave
site. Also we agreed that if I added some colour to it would bring some more
life to the site making users feel more comfortable and stay on the site and
use it as it may have a more professional appeal to it.
From the group sessions we all
thought that an extra strength of my wireframes was that it incorporated social
networking elements into the site. This means that when users use the website
they can connect their Facebook or Twitter to the site so
when on their social network they can receive latest news
about products, latest upcoming events and etc. Also due to a majority or
people on these social networking all people who have an account are able to
sync their account to the site keeping them well informed.
Also from the group sessions we all
thought that another strength of my wire frames was the way the
layout of each page is set out, we thought this because we felt that it was
suitable for how we wanted the users to view the page with some sort of
continuity. This means that users are able to go through the content on each of
my web pages in a chronological order, we thought this was a strength as it
would significantly make it much easier and stress free for user to be able to
get through the content and understand it on each page due to it being laid out
in such a way users can read it with out to much difficulty and getting
confused where they are. If I hadn’t laid out my content in a chronological
order then I users may find it hard to grasp what is what the message is as it
is all over the place. Also we thought it was a strength in terms of a design
view, in other word this means the positioning and the sizing of it makes the
site have a more professional look and feel to it which could have a big effect
as it could make users feel comfortable using the site leading to them staying
and keep using the site as it is easy and quick for them to read the content
and understand the message more efficiently as it may fit their needs to how
they want to read or watch content on a site. If I had done the opposite then
users wouldn’t feel comfortable and found it time consuming to grasp the idea
of the content. This would affect the website due to the fact it doesn’t look
right or doesn’t have a degree of professionalism to it which can potentially
put them of as it doesn’t fit their need of how a site should convey message
effectively to them.
Although we came up with some strengths
about my 5 wireframes, we al noticed there could be other additional
improvements that could be made. One improvement that was pointed out that I
could do is put a user log in and password entry point on the top next to the
title of site for each wireframe. By doing this it would allow users to be able
to log then rather going to the log in page to log in which would be a short
cut and a quicker process to users logged in. This can be beneficial as well
because if a user is on a page that is important for them to stay on it rather
than losing the page they can automatically sign in while on the page they are
on which can result in not much time is wasted which is one of the needs of the
user of the site. Another improvement that could be made is to add some bright
colour, as shown my colour scheme does lack bright colours which could have a
negative effect on user when using it. As a group we discussed that due to a
lack of colour make it looks boring and may cause users not to use it which
would mean they can’t navigate. The reason why they may not use it is due to it
looking like it may not work which could force uses to leave site. Also we
agreed that if it added some colour to it, it may bring some more life to the
site making users feel more comfortable and stay on the site and use it as it
may have a more professional appeal to it.
3. Final 5 page of wireframes produced in a second web page design tool for your final design
Click on the Link to see the Index page
Click on the link to see the Product Information page
Click on the link to see the Checkout page
Click on the link to see the Terms & Condition page
4. Description of your design, comparing your draft and final wireframes
When comparing my initial wireframes to my final wireframes I am able to see there are many differences in terms of the design and some features or functions.
One difference that I can see when comparing the initial wire frame to the final wire frame is in the final wireframe there is some colour which the initial colour. Colour was used to change the atmosphere to be more positive and welcoming rather than being dull and boring. By being more positive and welcoming it bring some life into the site and makes the user feel comfortable which could be key in retaining them, comparing it to my initial wireframes it just look better to look at as my initial wireframes we boring due to the colour scheme was just black and white which doesn’t stand out. In the final wireframes the colour scheme of grey and black were used with purple texture also used on the index page, this was better in terms that is wasn’t too bright or too dull which meant it wasn’t hard to look at as not very bright colour were used but still had good effect in terms of looking nice to view. The reason why this change happens from the initial to final was due to the amendment that pointed out in the group meeting. By have this feedback it has much improved the look of my site with effect in the sense of looking much better compared to by initial wireframes.
Another difference that I can see when comparing the initial wireframe to the final wireframe is in the final wireframe there is a username and password with its space form information to be typed in on the banner. By having this it allowed users to be able to get into their accounts without having to leave the page at present they are on. By not having to leave the page it makes it less time consuming for users which could make them uncomfortable and make the process of getting product much quicker rather than going back and forth to get the process done. For this to happen as in the initial wireframes there was no such thing so I incorporated it into my final wireframes which is one difference between the designs that allowed users to log in without having to go onto a different website. Also due to this feature that is incorporated in the final wireframe not the initial it can help keep with the three click rule which will make it much quicker and simpler to purchase the product. This was also highlighted in the group meeting that could do to better the site compared to my initial wireframes.
An extra difference that I can see when comparing the initial wireframe to the final wireframe is in the final wireframe there is a mini navigation bar at the bottom of each of the wireframes. By having this once users are at the bottom their action is reduced as they don’t need to scroll back up to be able to go onto another web page in the site, this wasn’t possible in my initial wireframes as I didn’t have this sort of functionality incorporated into it. Due to this the users scrolling is further reduced meaning it will be less time consuming for the users to get to their destination and therefore less time consuming to complete their transaction for our product which couldn’t be done in the initial wireframes. This was also highlighted in the group meeting that could do to better the site compared to my initial wireframes.
5. Description in blog describing and justifying
the tools used in producing the wireframes
For me to be able to create my five page
wireframes we had to use two tools to create a draft and final five page
wireframes for our design of website. These tools consist of Cacoo for the
draft and iPlotz for the final.
IPlotz is an online application that
allows it users to be able to create wireframes so they can experience them as
a real website. Users can add, delete, rename pages of the site maps drag and
drop website components onto a resizable page and link them to external
webpages if needed. Also users are able to drag and drop their own content such
images or videos onto a page and exporting pages as a png, jpg and pdf file
formats. As iPlotz provide website components such as buttons, to us users they
can be used to be constructed together to create my five final wireframes of my
website. By doing this I am able to create the look of my webpages with all
components and also have a good sense of how it is going to be. The reason why
this tool was used in producing the wireframes was because it was quick and not
difficult to produce an effective wireframe in a short period of time. The
reason why iPlotz was quick and not difficult to produce an effective wireframe
was because all that was needed to create the wireframe was to select website
components and drag and drop the components onto the page and then allow the
user to be able to position and resize the website components to our
preferences. Due to iPlotz being quick and easy to use I was able to create my
five final wireframes successfully which consisted of the index page, product
information, shopping cart, terms and condition and the checkout page without
too much time taken to complete it. Also by iPlotz being quick and easy to use
it will help my timing in a positive way on the rest of the project as a whole.
This means that I didn’t need to spend a long time in creating the five
wireframes which meant I didn’t fall behind which resulted in my timing in my
project plan had not been affected. Furthermore this meant I didn’t need to
change my project time to accommodate more time for me to complete my design
for my wireframes which was a big help. Another reason why I used iPlotz
to produce the five page wireframe was due to the functionality of being able
to file share my designs with other people online. This had helped me very much
as I was able to get comments and feedback from other people from my group
straight away instead waiting to the next day when I see them. This also saved
time which meant I didn’t need to make changes to my project plan.
Cacoo is a design tool that mainly allows
users to create diagrams such as wireframes from a various variety of shape or
advanced shapes available for use and elements from a large library to be put
together to create effective diagrams. As there are some advanced shapes
available for use, these shapes can be used to construct my five pages of
wireframes successfully. The reason why Cacoo was used as the tool for me to
create my initial design was because likewise with iPlotz it was easy and quick
to use and produce my five page wireframes. The reason why Cacoo was easy and
quick to use in producing the wireframes was because all that was needed to be
done was to drag and drop shapes wanted on to sheet for the user (us) to be
able to position and resize to our preferences which was similar to how iPlotz
allows it using to construct a wireframe. As of the easy usability I was able
to create my initial five page wireframes successfully without too much time
taken. Also by Cacoo being so easy to use and being quick it likewise with
iPlotz it will have a positive effect on the project as a whole. In other word
this means I didn’t need to spend a long time creating each which resulted in
me not falling behind and playing catching up which would have affected the timings
of the project and my project plan, meaning important tasks wouldn’t be
completed as result of me spending a lot of time in making the diagrams which
shouldn’t really take a lot of time. Another reason why I used Cacoo was
because likewise with iPlotz the functionality of being able to file share my
designs with other people online. This had helped me very much as I was able to
get comments and feedback from other people from my group straight away instead
waiting to the next day when I see them. This also saved time which meant I
didn’t need to make changes to my project plan.
Conclusion
Overall taking
everything into considerations after completing these various tasks I
have ended up with a better understanding and established a firm
foundation of what our site is going to look like and how the navigation will
work out. This will have a further positive effect on the project as I
will have a starting point of how I should approach in creating out
site. For instance the wire frames I have created will show me how I should
layout and what colours I should use and with the different diagrams
which show me how I will structure the site navigation.
