2020 – 2021

Colour coding the site into coherency

Reconceiving the concentration and final project page templates

It wasn’t until I was furloughed at home for Covid Lockdown 1 that I was able to get back to working on the site.

I had been away from working on the site for six months and I had started to re-think my approach to the concentration and final project pages.

I was having two issues with the v1 concentration and v1 final project page templates I had created in 2019…

Issue 1 – While the contents of the concentration and final project pages felt perfectly balanced in desktop and laptop screen orientations, they felt massively overloaded when viewed on a tablet or smartphone orientation.

The problem stemmed from my desire for the concentration page template and final project page template to be both one-page presentations.

In 2019 I thought I had solved this overloaded problem by utilising tab panels and drown-down sections but the triggers for these panels and drop-down sections can easily get lost when viewing the page on smaller screen orientations.

So, if the user can’t easily get back to the trigger, they’ll never get to the content behind the trigger!

Ultimately, the pages just came across as bloated and confusing as one-page presentations.

Issue 2 – I felt the design strayed too far from the modular ‘Project Ara’ aesthetic I had established on the MTA Overview page.

It almost felt like the concentration and final project pages should exist on a different website to that of the MTA Overview page.

So I wanted to move the design of the concentration and final project pagers closer to what I had done on the MTA Overview page.

 

Rejigging the concentration and final project pages

The first major change I enacted was to abandon the one-page presentation rule and instead utilise multiple pages for the containing and conveying the information on the concentration page and final project page.

For the concentration page this meant that… each learning module would have its own page and there would also be a Diploma Wall page to present all the diplomas I had earned for each concentration.

For the final project page this meant that… the components of the final project would get their own separate pages to present their information (and additional adjunct pages if required).

But first I had to rejig the layout and design of the concentration and final project overview pages to bring them closer to the aesthetic of the MTA Overview page.

So I went back to the MTA Overview page and looked at each concentration group and basically said to myself, “How can I take each of these groups and expand them into their own concentration and final project overview pages?”

Firstly, I felt that I should re-utilise the banner modules on the concentration pages.

Secondly, I felt that I had to prominently utilise the colour scheme of each concentration group on their pages.

I had already colour coded the concentrations when I originally built the MTA Overview.

I did this to better visually group together a particular concentration group and to more easily distinguish one concentration group from the others.

The colour scheme is thus…

  • Dark greenGlobal Citizenship
  • RedLeadership and Management
  • YellowEducation Innovation
  • TurquoisePublic Health and Personal Fitness
  • Light greenEnvironmental Sustainability
  • BrownMultimedia Studies and Creative Technologies
  • PinkInformation Management and Career Development
  • Blue Business Administration and Finance
  • PurpleMarketing and Brand Management
  • OrangeCreative Producing and Entrepreneurship

The v1 pages were very bland in their colour design with a lot of white space and I wanted to fill up that white space with a lot more of each concentrations colour identity.

Creating concentration page version 2

I kept the full-width banner image and title from concentration page v1.

Then I wanted the colour identity of the concentration to be front and center, so I added a full-width turquoise coloured block containing a listed overview of the concentration together with a contextualisation quote.

This is then followed by a white section with a headlined explanation for why I included this concentration in my MTA Portfolio and a further contextualisation quote.

I included a second quote to fill up the empty white space beside the explanation headline, but also because some of my concentrations are dual-concentrations, such as is the case with Public Health and Personal Fitness. Therefore, including an additional quote allowed me to contextualise both halves of the concentration’s overall focus.

Originally, the explanation headline and second quote were followed by the explanation elaboration text I wrote for concentration page v1.

But I decided against including it because it made the page feel overloaded again and the explanation headline works just fine on its own.

Next up are the learning module banners from the MTA Overview page, but instead of being presented as a slider, here they are laid out in a grid pattern.

I kept them identical to the ones on the MTA Overview page

Here they are sporting the turquoise colour identity of the Public Health and Personal Fitness concentration.

Then a banner item for the concentration’s diploma wall follows…

Unlike the learning modules this is not a solid colour design, instead opting for a screenshot of the actual diploma wall under a turquoise filter.

Last up is the banner item for the concentrations final project…

Again, similar to the diploma wall banner, it boasts the cover image of Biohacking My Personal Fitness under a turquoise filter.

Last up, I included the footer navigation buttons I had originally conceived of on final project page v1, but this time rejigged for navigating back and forth between the concentration pages.

Creating final project page version 2

For v2 of the final project page, I just created a variation of the template I had created for v2 of the concentration page.

The full-width banner image and title from v1 is retained…

I’ve incorporated the full-width turquoise colour block from the concentration page v2…

Gone are the tab panels, but the same project overview and quote are included.

Underneath I’ve retained two of the tab panels from v1 – goals and timeline.

I opted to keep the tab element here because the timeline information is very long and is not essential upfront information, unlike the goals.

By keeping the timeline in its own secondary tab panel it allowed me to retain the information on the page.

Just a note on the timeline, the reason why all the final projects have a timeline section is because the development of each final project is very chopping and spread out over a long period of time.

So I wanted to acknowledge the full breadth of time I have put into the development of each project.

Then we have the project components section which is just the same banner item grid from the concentration page v2 for the learning modules.

Except this time, to create design variation between the final project page and concentration page, I have inverted the colours with the concentration turquoise colour now serving as a colour background/block behind the banner item project components.

Next up is the project wrap up section where I put my final conclusion on the project and sign off on it.

Biohacking My Personal Fitness does not currently have this section filled in because I added some additional project components in 2012 that I have yet to write, so the final project as a whole is not yet finished.

However, the write up section for the Not Your Average Life Coach project, which I wrote up on this site in 2021, is complete.

As with the concentration page v2 and final project page v1, the navigation buttons for going back and forth between final projects, or to their concentration overview page, are present at the bottom of the page.

Creating the learning module pages

As my MTA Portfolio has seventy plus learning modules, I wanted to create a learning module page template that would not require much additional content or graphic design creation.

I just wanted to copy what was present in the learning module sections on the v1 concentration page and then just past it in the template of each respective learning module page.

Keeping in mind the modular colour identity aesthetic I had achieved in v2 of the concentration page and final project page and taking inspiration from the solid colour block banner items present on the MTA Overview page and concentration v2 page,

I created a learning module page that was pure concentration colour identity.

The full-width banner item is a solid turquoise colour block wit the name of the learning module.

The flip blocks from concentration v1 are gone, but I have retained the original drop-down information for each course.

As with the learning module sections on the v1 concentration page, the course list is presented alongside the book list.

Next up is a turquoise colour block for highlighting the contextualisation quote for the module.

Then there is a section with a slightly expanded explanation for why this module is a part of my MTA Portfolio.

Last up is the navigation buttons form the concentration and final project pages, this time optimised for going back and forth between this concentration’s learning module pages, or back to the concentration overview page.

I just cloned that page template seventy odd times over and changed the contents to reflect the different modules.

Thankfully, the learning module pages did not actually prove that time-consuming to make.

Creating the diploma wall pages

Following the theme of more heavily utilising the colour identity of each concentration across their pages, I knew that the diploma walls pages would feature their respective colour identity as the page’s background.

Unlike the concentration, learning module and final project pages there would be no isolated colour blocks.

I wanted the diploma walls pages to look like a wall you would find in the office of a highly accomplished individual… a wall decorated with a whole assortment of diplomas.

This made creating the diploma wall pages incredibly easy.

I just had to create a new page and then make its background the same colour as the concentration to which it belonged.

However, affixing all the diplomas to those walls was a little bit trickier.

At first, it sounds simple.

I just upload each of my diploma files and feature them in a grid pattern on each of the diploma walls.

But I had to feature my diplomas in a way that was easily accessible for the user and responsively pleasing across different device screen orientations.

I had two choices for accomplishing this…

  • Add each diploma as an individual image component of the page’s wireframe.
  • Add all the diplomas into a backend gallery and use a WordPress plugin to present that gallery on the wall (with the plugin only being one element of the page’s wireframe).

Adding each diploma as an individual image component of the page’s wireframe was incredibly time consuming and came with various responsive issues.

The individual component option looked great on a smartphone orientation but very quickly encountered scaling issues on larger screened devices.

The main issue was that I couldn’t feature the diplomas on the page’s wireframe in a way that was streamlined and uniform across devices.

So, I gave up on doing it that way and crossed my fingers that I could make the second way work.

This is one of the biggest hurdles with web design – translating an idea in your head into a workable outcome in the internet browser.

It really boils down to how much time you’re willing to invest and your level of technical competence.

If you can code and style a website from the backend up, you can do anything with your website.

But confident backend coder I am not.

So I had to rely on my skills as a creative WordPress theme manipulator… which means finding a WordPress plugin that did what I wanted it to do.

I played around with a few different plugins until I found one called FooGallery which I’m still using now.

FooGallery is the perfect plugin.

I am able to place all my diplomas in a beautifully streamlined manner on the diploma walls.

The plugin is perfectly responsive and aesthetically pleasing across device screen orientations.

It has a wonderful hover function that reveals the title and caption of each diploma (as the size of the diploma images do not always make this apparent).

Clicking on a diploma image opens FooGallery’s lightbox in which the user can scan through all the diplomas in a slideshow fashion, if they so choose.

Best of all, I was able to achieve my diploma wall goals by only using the FooGallery’s free features, so I haven’t broken my bank account by using it.

Uploading the diplomas was the most time-consuming aspect because I couldn’t just upload the original files I had been issued by the online course platforms.

Why?

Because they were pdf files and you can’t upload pdf files into an image gallery, they need to be mpeg files.

That meant converting each pdf file into an mpeg file.

Adobe Acrobat does have a feature for converting pdfs into mpegs andyou have to use the paid version of Acrobat to access it (or the 7-day free trial, as I did).

But I immediately encountered two problems with converting the diploma pdfs into mpegs…

  1. I found the Coursera diplomas to be of a diminished quality after conversion, i.e. the mpegs were missing some of the patterned background details of the original diplomas in the pdfs.
  2. I couldn’t convert the FutureLearn diplomas because their pdfs had been password protected by FutureLearn.

So, this meant that I had to screenshot the pdf diplomas.

Each and every one… all 500 of them!

I also had to crop each individual screenshot to remove the non-diploma screen elements of the image.

The FutureLearn diplomas were even more demanding because they are presented on two separate A4 pages within the pdf.

I wanted to feature both parts of the FutureLearn diplomas which meant after I had screenshotted each A4 sheet and cropped them, I had to stitch the two A4 sheets back together as one mpeg image.

Then I had to upload all the mpeg files, while ensuring that I kept them all organised and segregated into their correct diploma wall gallery.

Finally, I had to label the name and caption on each mpeg to ensure the diplomas’ identifying information would show up when the user selected a diploma image on the frontend diploma wall.

Later on, it also occurred to me that I should really add in a clickable verification link on the frontend images’ caption area.

All my diplomas (aside from the LinkedIn Learning ones) have a verification page on the issuing platform’s website that shows I actually did complete the course for which I have a diploma (and not just create a fake diploma).

I’m annoyed it didn’t occur to me to add these links when I first captioned all the diploma mpegs because I’m still gradually adding those links in at the time of writing this!

This has been a very long process.

Creating the v1 About page

I never really had a clear idea what to do with the design of the about page.

This problem was further exasperated when I started to outline the about page’s content and came to the conclusion that I might need more than one about page to adequately cover it all.

I then had the conception to create seven about pages…

  • About page 1 – About my MTA Portfolio
  • About page 2 – About my Majors
  • About page 3 – About my Mission
  • About page 4 – About my Accreditation
  • About page 5 – About my Final Projects
  • About page 6 – About this Website
  • About Page 7 – About me

But, first, I had to come up with a page template that all the about pages could share.

I reasoned the most logical direction for the about page would be to create yet another Project Ara inspired modular variation on what I had already done on all the other MTA overview, concentration, learning module and final project pages.

So I went back to basics and started to fiddle around with the Olvi theme’s built in features to see if I could come up with a page design that fit with the aesthetics of the other pages but would also be distinctly separate from them.

I started by creating my first proposed about page – About my MTA Portfolio.

I decided to use a full-page header slider similar to the one I had used on the v1 MTA Overview page.

The Olvi theme has a wonderful banner slide that allows you to place letter cutouts in the banner image.

Therefore, I decided to use this function to highlight the abbreviation of my Master of Transdisciplinary Application – MTA.

It was also through constructing this three-panel slider that I came up with one of the key taglines of my MTA – “A master of all… is a master of none… unless you live in the 21st century.”

As the about page was about the whole of the website and the entirety of my MTA Portfolio, I decided to use the colour schemes of all the concentrations on the page.

I also created some photos of myself wearing a graduate hat that I found worked quite well posited inside the letter cutouts of each slide.

Then had a brief white space for providing a brief outline of my MTA Portfolio.

Followed by a three-panel tab section that provides a definition of what Master of Transdisciplinary Application actually means…

Next up, I included a colour panel with an elaboration on the tagline included in the page’s banner slides, “A master of all… is a master of none… unless you live in the 21st century.”

I also included a read more expander linker because the text was quite long.

Continuing the black and white aesthetic established in the graduate hat images included in the header banner slides, I included full-page image with a header title to further break the page up and make it more visually appealing.

This is followed with another colour panel with more text explaining the origins of my MTA Portfolio.

Again, this block of text also has a read more expander as the text was quite long.

Then there is another full-page black and white image with another header.

These images of me without the graduate hat come from 2014 and were originally taken as part of The Miracle of Crowdfunding project.

The next colour panel would have included a text that would have explained how The Miracle of Crowdfunding project led to the creation of my MTA Portfolio.

But I never got round to writing it.

Then there is yet another full-page image with header.

Followed by another colour panel that would have included text outlining my philosophy of growth.

Again, I never got around to writing it.

The colour block then continues as the page’s footer that includes links to all my other proposed about pages.

I didn’t get very far with creating the other about pages.

I did create a About my Majors page that included a full-page banner…

It also had a colour panel that provided definitions for my MTA’s majors in Sustainable Globalisation and Creative Enterprise…

I also created a About my Mission page that had a full-page banner…

It also had the mission layout from the MTA Overview page.

I also created an about me page…

However, none of these about pages progressed very far in their development.

By the time I had finished working on the concentration, final project, learning module and diploma wall pages, I was completely burnt out.

I wasn’t really happy with what I had done with the About my MTA Portfolio page, as I felt it was over bloated and was missing the point.

I also felt that the conception of having multiple about pages wasn’t helping to solve this over-bloated problem.

I needed a different approach for the about page and a bit of time to think it over.

So I took a break from working on ibuiltmyown.education.