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;

Advertisement

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.

Finished Self-Promotion Pack

Now I had completed and printed my final versions for my self promotion pack it was time to create the packaging that would be used to send the material out to the client I decided to save paper and time to make mockups but instead of printing real sized versions I would print them to fit on an a4 piece of paper. I had already created a mockup with paper glued together to give me an idea of what it would look like.

Next was to create a digital version of this, something I had learnt from my trip to Wyke Printers was that if I were too create my designs professionally I would create a map for my printouts this would mean there are less visible edge and creates a better user experience. The first mockup can be seen below.

I have got the overall grid sizing correct and have lines for the necessary folds in the relevant places. This version allowed me to understand any required changes before creating the final version.

In my final version I have created, I have resized the address on the back, added a darker purple to the front then also created a cutout area on the front so it is easier for the user to access the stuff inside.

Below are all the different versions I have created oldest to newest from left to right.

Having printed out a real version of the design, gluing it together, in turn allowing me to put the marketing pieces inside, I have realised a couple of flaws that I would probably change if I had the opportunity to do it again. Firstly I dislike the texture of the glossy paper, I think it feels cheap and not as ‘luxurious’ as the card option I could have chosen, also I think it would have been better to include my full branding on the front with the words “AKB Design” along with the logo. I printed it without the words because I believe it would simpler and fit in with the ‘less is more’ approach to design but I have since changed my mind and I would add the wording in now. The final mockup to look at in person looks a little rough around the edges, I believe this is because of the lack of equipment when putting the final piece together. I have left marks where I have tried to score on the outside, the way round this would be to print on the other side and score that side instead. Also, one of the inserts was slightly too big for the packaging so I had create a different fold for the ‘lid’, you will see now that there is a white section on the back because of this mistake. Other than these reasonably small issues, I am very pleased with my final mockup as it fits in with the general over theme, has a maximum of three colours throughout and only used two fonts. Finally if I was to create this properly I would adjust these small issues and then use a professional press to apply the cuts and scores for me so I had a cleaner finish, i would research into better methods of joining them together so they would lay flat.