Final Prototype

This final prototype is the last iteration before handing in my university degree. It took feedback from lots of user testing and the testing of the previous prototype. This feedback impacted the overall design of this prototype.

To begin with I added a homepage, login to or create account section and an introduction. There are many pages in these section but they look like this;

Once logged in they are greeted by a tutor who explains the basics like so;

Next the user is free to explore. they will be greeted with the homepage, and will notice if they hover on items they will see monuments from that country appearing. These screens are shown below;

Once a user has chosen a continent they will be provided with the flags of the contries there…

Once selecting that country they will be taken to the departures Lounge where they can begin that journey.

Once that experience has begun they will visit pages like the tourist information where they will learn about a place.

Next they go to the social page where they can send messages and play games with other users in that virtual chatroom.

Next up is learning languages, which can be seen here

Then to allow users to select their favourite picture of their frog in that place;

Talking to a penpal next;

The user gets to share the experience with a postcard;

After that the user gets ‘closure’ to their experience. They do this by participating in quizzes about that country to test their knowledge they have acquired throughout the experience. You can see this here;

 

Finally the user has a profile to explore that contains their profile, ability to customise their frog, friends, chats and store. You can see all of that here;

Advertisements

ACORN ROOFING – Final Evaluation

When starting this project I thought it was crucial to avoid diving in with designs and code so I did some research into the users of the site, and with a focus group of the competitors website I found an interesting correlation. The more the company was worth the better their website was, this could mean two things, a good website can give the  indication of a company being bigger and better than it is, or it could simply mean that the bigger the company the more money they have to spend on their website. Regardless it was an interesting correlation that proved a good website can go a long way. Next I brainstormed my ideas on paper which allowed me to start selecting important ideas for design, this included deciding the content of the pages and how they were going to be designed. I thought due to time constraints and knowledge that it would be a too bigger task to try and make the site responsive or adaptive so I simply focused on make the site accessible by every browser, this meant I created a website that was 960 pixels wide to fit on the standard monitor and tablets. I then created three wireframes which focused on the placement of the content to allow me to visualise the site. Next was to turn these wireframes into physical designs, and once that was done I was able to choose one and start building it. I realised (when I had almost completed building the site) that the pageless design was flawed and was bad for search engine optimisation. I started researching the flaws of SEO and realised that this design was going to fail in the seo area so I decided to restart from the wire frame stage. I took the best of all my wireframes and built them into one overall design, next I created the final design and built this from the ground up. The final stage I took was to test the site on all browser and devices to make sure it worked and luckily everything worked as I wanted. The only issue being is that on mobile the text and buttons were quite small but this was expected as I hadn’t planned to make a mobile version of the site.

Something I learnt was how to use file transfer protocol (FTP) to make sure I was editing my site live on the server rather than locally, as I am aware it is important to do so because it means that should any problems arise I can fix them right then rather than waiting until I FTP my finished site only to realise it has issues once it is on the internet. I was also aware of the fact that I should you the put and get tool on the local & server sites area of Adobe dreamweaver, this is important as if you drag and drop you can corrupt the files beyond repair meaning the site doesn’t work at all.

I learnt that hierarchy within the file structure of the site is extremely important because it means that should another developer need to work on your site, it easily understandable what and where everything is. I learnt it was important to separate images which were an integral part of the design, and the the pictures which featured on the site. I also understand that because images take a lot of bandwidth to load on a site, I found it was crucial to make sure the image was the smallest possible file size it could be. I did this by making sure that every image featured on the site was set to the exact size the actual image was.

One issue I have discovered with my website is when you hover over images within the site, I have created divs that use css to implement the background, the reason for this is to allow the text to be easier manipulated on top. I have used the :hover element in css to select a slightly darker version of the image when you hover, the problem with this however is that when you initially rollover the image, the area turns to white for about a second then shows the darker image. with a bit of research I believe it is because there in no code specify what the onMouseover image is, but there is no way of doing this within the css. I would simply have to code the images through html and use  onMouseOver and onMouseOut, this would me to get the desired effect without the white spaces, although this would mean I would have to create a z-index for all of the content within the div.

Another issue I was unable to resolve was that of the underline to the bottom left of the twitter logo in the footer. I removed both Twitter and Facebook logo html and both time the underline disappeared, this is confusing because you can select it on the page as if it was physical content but there is no sign of it within the code, after researching it and trying to understand what the issue is I am still unsure and this is something I will continue to try and figure out.