Updating my website

In this post I will explain the process of updating my website up until it is ready for assessment. There was a lot of work for me to do, because I needed to create a page for each of my characters and place there the image of them and the GIF and also a short description of the character - a backstory that would introduce the character to the viewer. 

Firstly I needed to create a gallery in my main project page. I needed the gallery to be very simple to use - that means whenever someone clicks on a character, the separate page for the character would open. At first I created the page like this:

 

I did quickly realize that the page is missing some things. Firstly, my tutor let me know that the introduction should be a little less vague and I also noticed that I did not incorporate a button that would get the viewer to the separate page about the cartoon's concept. I needed to make a few changes to make this page look more visually pleasing and easier to navigate. Here is the page after the changes I have made:

Now this page looks busier but also more professional. Everything is clear and it does not look empty. I like it after the changes. 

Every character got its own separate page and this is how I positioned each of the pages at the beginning: 

Between the images I put the text about the character and to be completely honest I did not like it at all. It looked messy and not very professional. My tutor suggested for me to place both of the images on one side of the page and then the text next to it. I decided to follow that guidance because it did seem like a generally good idea for me to develop this website. 

This is what I changed the pages to. I have also switched the icon button to a normal button that says 'Back to the project' and I have also added the 'Next character' button so the viewer does not have to go back to the main project page to see the next character. I definitely like this page design. I think it looks clear and is easy to navigate. I also think that it is a good way to show my project work in a best way possible. When someone clicks on one of the images, it enlarge itself so it is clearer to see it. I have also added the black frames around the images because that prevents them from blending with the background too much. 

After I have fixed all the pages for all 6 characters, I also had to work on the mobile version of the website. I needed the mobile version to look as good as it does on the desktop. 

I have decided to put the text about the character on the top of the page and the images on the bottom. I have also made sure that the 'back to portfolio' buttons are both on the top and on the bottom of the website and that there is also a 'next character' button at the bottom. It makes it easier to view how the project work is presented. 

When all the pages were done in the same way, so they are not too different from one another, I also needed to create a page for the cartoon concept. 

This page can be accessed when a viewer clicks on a button that says 'Discover the world of the Amethyst Planet' or clicks on the family photo or the logo. Here are some main information about the cartoon and how I visualize it as an animation, not only as a set of characters. I personally think it is a good page that explains the idea fairly well. I do not think that anyone who reads this page is still confused on what the cartoon is about. 

I have also made sure it all looks alright in the mobile version and when I was happy with it, I have made it live. Here is the link to my website: https://dariapieczynskadmu.wixsite.com/mysite