Website Creation: Updating the Website

Following UX Testing, in which many have responded with feedback on the website, I have decided to update my Gallery page. This post will detail the process of how I updated the Gallery and Home page. 

First of all, I made the project's landscape poster for the website. To begin with, I started with a blank canvas, colored it grey, and then went to Elements to add the graphics. I added a Celtic Knot Triquetra, which I researched to be a symbol for strength and three stages of life, crows as a symbol of death, and golden flowers for hope. The font for the title is Charmonman sized 187 px, and the subtitle below it is Charm sized 31,3 px. After that, I exported the image into png.

For the website itself, I began with choosing a project template by going to Add Elements then Projects. I chose side by side because I think the picture and description are balanced.


Moving on, I copied the description of the Gallery page from the previous page to the new one. I then adjusted the strip size and changed the background to a picture in Unsplash. After that, I changed the title to Gallery and sized it 56px, then I changed the description to be sized 16px.


After that, I deleted all the projects below it except for first one. Then I changed the image into my project's poster by deleting the image template, went to Add Elements, Images, and then import the image from my computer. I changed the title into my project name, and then added a new description on it about what my project is about. I changed all of the text to Avenir font, with the title being 30px, the description being 16px. After that, I added a Read More button by going to Add Elements, Buttons, and choosing the one I like before clicking on it and changing its typing to Read More, Avenir, sized 20 px.


Moving on, to create the project page, I created a general page, chose a template, which is overlapping. After that, I went to Pages, placed it under Gallery, right clicked it and then made it a subpage.


For the cover of this page, I changed the title from the template into my project's name, and sized it 50px. After that, I added the date and project type, which is screenwriting, and made it size 20px. Then, I wrote a logline or description of the story, sized 18px. Lastly, I changed the column background into an alternative image of the same poster I used for my project, which has no writings on it.


After that, I added my flipbook to showcase my work. To add this flipbook, I went to Yumpu, open my project, copied its website link, went to Wix, chose Add Elements, Embeds, embed a site, and then pasted the website link into the box. After that I enlarged it into the size of the page. 


Moving on, for mobile view, I first put the title (sized 35 px) on front of the strip then changed it to white. After that, I changed the size of the description to 16px. Below it, I arranged the placement of the title, words, and numbers to be more organized by putting the numbers beside the project title, sized it 27 px and 23 px. The description of the project is sized 15 px while I reduced the button text size to 20 px. 


In the project page,  I moved the title to the front of the column image. Then, I adjusted the size of the text with the title being 28px, date and project type at 18px, and then the description at 14px. After that, I changed the size of the Yumpu flipbook to be fitting with the size, which is more of a vertical rectangle.


Moving on to Home page, because I have already finished the project, I will be changing the last section of the home page.


First steps I made is to delete the "Coming Soon..." text and change the 10-15 pages to 15 pages in the description. After that, I went to Add Elements, Button, and added the button I chose on the same spot of the "Coming Soon..." text. I then changed the size of the text in the button to be 35px with the font being Poppins Semi Bold. After that, I changed the old script image from Celtx to the new one from Writer Duet by clicking on the image, change image, then uploading the a screenshot of the Writer Duet script, then pressed choose image.


I then checked on the mobile view of the Home page to see if everything looks fine. I changed the text within the button to be 18px, and then arranged the image slightly.


With that done, I have updated my Gallery page according to the feedback I was given, as well as updated my Home page after I've finished my project. I think that the feedback that was given to me in the end have been meaningful for the website, as I found the improvements much better. Though, there are some feedback that I found to be vague and not specific enough, which in the end led me to keep the feedback for a later time.


Comments

  1. Great that you made the changes Charlie. Would be good if you could add screenshots of the final website including the mobile view, with your thoughts.

    ReplyDelete
    Replies
    1. Thanks for commenting! I've added more on the feedback and improvements made. That said, I think I'll only talk about the final website on the reflection post.

      Delete

Post a Comment

Popular posts from this blog

Website Research: Hirokazu Kore-eda and Dany Cooke

Website Creation: Gallery Page

Reflection: Moments of Sorrow