Website: Design boards

After preparing all of my design boards, it was time to insert them into my website. I wanted to include them into the folder I left blank.

The first thing that I had to do was to change the cover sheet of my project display.

I clicked on change column background and then clicked on image and uploaded one of the render I created.


Then, I adjusted the title and the read more button to fit the box. Additionally, the orange really matches the purple and they complement each other well. I think the picture looks great as a cover sheet and it encompasses all of my products.

The next step was to add my introduction. I drafted this onto word and then copy pasted it into my website. I included a description of my project. 

.
The next step was to add slide gallery for the individual perspectives of my products. I inserted 6 galleries for the 6 different functions of my products.

I then chose the images for each one of the galleries and then make sure to change the title of each and the description. I also made sure that I included different perspectives in the design to show all the angles.


I completed all the galleries with all the different perspectives. I chose the slide gallery as it is easily accessible and displays the work well.


I added them in the same order as the design boards to show consistency.

Later on, I added one more slide gallery and inserted the 6 design boards with the cover sheet. I enlarged it to make sure that it is the focal point.

I tried to also fix the phone layout. I adjusted the layout and all the sizes and the titles to ensure that it fits the screen.


I adjusted the text and the icons too to fit the screen. 


My tutor pointed out that it was hard to view the design boards with that specific gallery. Therefore, I replaced it with a slideshow gallery so that the viewer can further magnify it.

The viewer can magnify it using the icon on the top left corner. For each image, I added the general title, then a subtitle and the year in which I created these. I think that this gallery looks way more professional and will allow the user to view everything much better.

The last thing I noticed was that this gallery had some issues on the phone layout. This is what appeared in my phone layout on the website.

However, after looking at the actual website (not the edited one) on my phone, everything looked normal. I also asked for assistance by my tutor and he reassured me that website makes general assumptions about the layout and type. This made me realise that it might have just been a website error.

This is how the layout was in my phones view.


I like how the layout turned out. I think it works well and it is much more improved than the previous terms one. The copyright is also updated and so are the social media links. I think the description fits the products perfectly and the whole layout and colour scheme works nicely together. I definitely enjoyed this process and I will be focusing on some improvements over the next 2 days.

Comments

  1. This looks good on pc and on mobile view. Glad you got this sorted out.

    ReplyDelete

Post a Comment