M104MC – Final Project – WordPress Website

Website design and building has come a long way in the last few years. To be honest, I have built a site for a long time, however my wife has done so for her different businesses. She was currently working on a new site for her new venture and was able to advise me on where to start.

It was at this point in my project where I had decided to name it, this was encouraged by the decision to build a website as I would have purchase a domain name to host the site. I had toyed with the name ‘Collective’ when I started working on the build in Klynt, but this didn’t fit the artists. It was in a conversation I had with Alan Dyer recently that ruled this name out when talking about how the Coventry 2021 City of Culture was being interpreted at the warehouse, the artists would only engage with the project as individuals and not as a collective from the warehouse. This made sense as they are all very different people/artists that happen to be under the same roof.

The emphasis shifted from the artists to the warehouse, as this was the entity that had drawn them together. I decided upon ‘Common Spaces‘ as the title of the project.

There are hundreds of companies that are producing theme, plugins and builders for WordPress these days. One of the leading packages is called ‘DIVI’ by a company called Elegant Themes. Kate had purchased the ‘DIVI’ builder package and was able to install a copy for me onto my nice and new WordPress page. ‘DIVI’ is a visual builder package, and works in a similar way as Klynt does by building the different elements of each page and linking them to the relevant media files. One limitation I found very earlier that I hadn’t realised was that there was a maximum file size limit of 100MB. This was a bit of a problem as most of my video files sat just over this amount. To get round this I had to upload my videos to YouTube.

Screen Shot 2018-08-22 at 13.39.00
My YouTube channel suddenly filled out

YouTube can take 4K video files, or 8K in 360 degree films, and at this point I toyed with the idea of re-exporting my films in a higher resolution. I decided to test the films as they were exported for Klynt on the website. They looked perfectly fine on the desktop and mobile phone, and most importantly there was no noticeable loading or lag time when they were selected to play. Test with the 360 videos were successful too, they sat in their own window on the website without the need to switch out to YouTube, you did have the option to turn the quality up in the window which caused some buffering, but this is the same if you were trying to view them on the YouTube site itself. You have both options to drag the video round or navigate via the arrows in the right hand corner.

Building ‘Common Spaces’.

Using ‘DIVI” was so easy. First you need to create a new page and name it. This then gives you the option to either start building the elements in the traditional builder or using the visual builder. Both work in the same way, you can add rows to the page and in turn you can add columns to reach row individual using simple template options. To any of these row and columns you can add modules. Modules can be anything from a simple button, a text box or a video player.

Screen Shot 2018-08-22 at 13.48.54
Creating a new page
Screen Shot 2018-08-22 at 13.49.57
Adding rows, columns and modules
Screen Shot 2018-08-22 at 13.50.29
What the page looks like in the visual builder

Each of the modules and rows in turn have a settings option that control all the elements, from sizing to design and playback options. Another element you can control is to switch between desktop, tablet and mobile formats. You have options to customise just for one of those platforms without effecting the other.

For each page you design, you can save them as a template to use again and again, making the build time quicker, all you have to do is change any links or media on the new page. I put together the site using the design templates I had made as seen below.

Content for the warehouse elements was supplied by the Canal Basin Trust who had approved the statements.

Screen Shot 2018-08-22 at 15.27.48
Home page design
Screen Shot 2018-08-22 at 15.28.05
Artist page design
Screen Shot 2018-08-22 at 15.28.25
Artist interview page design
Screen Shot 2018-08-22 at 15.29.21
360/artist film page design
Screen Shot 2018-08-22 at 15.29.41
Warehouse page design
Screen Shot 2018-08-22 at 15.29.57
Warehouse page element design
Screen Shot 2018-08-22 at 15.30.19
Credits page design

 

Refinement and redesign.

My main focus, with a deadline looming, was to make sure I had a fully functional site. I added the questions as overlays to each of my interview videos to help keep the design tidy. Another thing I was able to address was to stop the suggested videos on YouTube appearing when any of my files had reached the end, a quick look online suggested a WordPress plugin to add to my site that fixed the problem.

Another area I needed to review was the design element of the site. Although functional, the first version just lacked a slick design. By now I had the chance to arrange for the artists to all have their portraits taken by Kate which look amazing. To do them justice I used them as the pivotal element in redesigning the artist main page and individual page.

Screen Shot 2018-08-22 at 15.46.09
Top of page
Screen Shot 2018-08-22 at 15.46.32
Bottom of page

As you can see above, the look of the page has improved dramatically. Using the images with labels released my from having to use grids with text headers and tidied up the design, both for the desktop and mobile devices. All that was left to do was to re-link the pages to their new versions and publish the page.

 

 

 

Advertisements