I Built My Own Education
Component 2
Education Website
There was never a time when I was not designing my life or working on improving myself
When I eventually hit on the idea of building my own master’s degree, using a website to house it seemed like a no-brainer!
By far, the most challenging website to build has been my education website.
Not just in terms of all the technical problems I had to overcome to get the thing working properly, but in terms of the visual presentation and logical structure of the website.
I Built My Own Education has been a long time coming, I first had the idea of building a website for my MTA Portfolio all the way back in 2014.
Then it spent four years on the backburner while I devoted my time to studying all the courses that make up my MTA Portfolio.
2013 – 2018
Designing a site that is an explorable master’s degree
Conceptualising an interactive diploma website
One of my biggest complaints about my bachelor’s degree is that I had spent four years working myself into the ground to earn a first-class degree… and all I had to show for it was a dead piece of paper.
Degrees don’t hold the same weight that they used to.
A traditional degree diploma is a dead piece of paper that says nothing about all the blood, sweat, tears and life-changing and skillset building experience that goes into earning a first-class degree.
So when I decided I was going to build my own master’s degree, I knew I had make up for this deficiency and not just produce another dead piece of paper.
I had to create an engaging multimedia degree diploma that you could open up and explore a fully-fledged overview of all the grit and grinding and growth that went into earning my master’s degree.
I needed my master’s degree, with all its concentrations and final projects, to jump out at people.
I needed a fully responsive website to act as the interactive diploma for my self-directed master’s degree.
Foretunately I had already acquired the technical knowledge for creating my own original website in the final year of my bachelor’s degree.
Repurposing an unused concept
The idea for a website existed long before I even had an inkling that I was going to create my own master’s degree.
During my final year of my bachelor’s degree, I had hit on the idea of creating a website as part of my practical dissertation.
My practical dissertation was a web series concept proposal package called EYES.
For EYES I devised an idea for a short form web tv series idea that was expressed in a series bible document I wrote; a 7-minute pilot episode that I wrote and directed; a producer’s planning portfolio document I compiled and a blog that chronicled the development of the project.
An additional project element I had planned on including was an original video-centric website that I would use to house the pilot episode and other project components.
The site would also act as a concept of what the actual website/online branding for the fully released web series would look like.
Ultimately, I decided against building the website as it would have created a whole new mountain of work that I just did not have time to do.
But I had already done a lot of research and preparation for building it at the beginning of 2013.
I had already purchased some web hosting.
I had also purchased a WordPress theme to let me realize the rough idea I had for the overall website.
I even had a plan to create another original website that would have served as my personal portfolio website.
So the desire to enroll myself in web design and to build websites was already present in my mind when I graduated with my bachelor’s degree in 2013.
I hate leaving things unfinished.
I’m also a strong believer in recycling.
If I can’t use something for one thing, you can bet I will eventually find another use for it.
It’s no surprise that I very quickly hit on the idea of creating an embodying website when I decided I was going to create my own self-directed master’s degree towards the end of 2014.
I already possessed the technical knowledge of setting up my own WordPress site and the desire to build my own websites.
I just needed to figure out what my master’s degree website would look like.
I spent the next four years mostly focused on studying online courses as I built out the curriculum of my MTA.
But alongside this I would occasionally sketch out ideas and make notes for my MTA website.
I never mapped out what the full site would look like, but I did have a clear idea of what the homepage would look like and how all the elements of my MTA Portfolio would branch off from it.
Towards the end of 2018, I had reached a clear threshold in the development of my MTA.
In fact, I naively believed I had completed the study part of it (how little I knew).
I now had my MTA formed into its ten concentrations… with it’s ten final project slots (and the intention to make the building of my MTA website one of those projects).
Possessing a clear structure for my MTA Portfolio meant that I now had a clear structure for the website to house it.
But before I could start building that website, I needed to decide on a definite name for it.
Branding the site as something distinct
In order to start building the site, I needed to attach a URL (Uniform Resource Locator) to it and that URL, a.k.a. web address name, needed to embody the branding of the site.
So before I started building anything, I needed to figure out the branding for my website.
I had already christened my postgraduate studies my Master of Transdisciplinary Application a.k.a. my MTA Portfolio.
But I was never going to call the website that housed it www.masteroftransdisciplinaryapplication.com.
It would have been ridiculous to call the site that!
Way too wordy and dull.
I guess I could have called it mtaportfolio.com.
That certainly sounds better and is more succinct.
But it doesn’t really express what the site is about.
I needed a name that expressed the nature of my self-directed studies without calling it a Master of Transdisciplinary Application.
A name that needed to be similar but separate.
The working title I came up with was…
My Big Picture Education a.k.a. mybigpicture.education
Being a transdisciplinary master’s degree that goes above and beyond traditional disciplinary boundaries, my postgraduate studies are much focused on big picture thinking.
Big picture thinking refers to a thinking strategy that focuses on the entirety of a concept or idea instead of on each individual detail. People who use big picture thinking can often see the long-term possibilities of a plan and the overall potential for success.
What is the big picture?, Indeed.com
Utilising the ‘big picture’ phrase was also a part of a much bigger branding plan I had for my overall career brand.
Originally, I had planned on using the big picture name for my personal brand, my life coaching brand and the education platform offshoot of this site.
Then I experimented with differentiating the different sub-brands of my career brand by dropping the big picture phrase from them and giving them mostly distinct names.
This is when I started using the phrase renaissance in my branding.
Renaissance referring to concept of being a renaissance men or person…
A cultured man of the Renaissance who was knowledgeable, educated, or proficient in a wide range of fields. A present-day man who has acquired profound knowledge or proficiency in more than one field.
Dictionary.com
I very much consider myself a renaissance man.
In addition to my personal website being called renaissancepete.com, I did consider calling my MTA site myrenaissanceeducation.com.
But I decided against it when I felt it would be smarter to distinguish all my sites with their own brand identities.
This also is when I decided to call my MTA Portfolio website…
MTA Education a.k.a. mta.education.
I had been researching what urls are available and had discovered that you could use all sorts of TDLs (Top Level Domains), that’s the name or set of letters that comes after the dot in a web address.
It’s actually also how I hit on the name for my life coaching business as Not Your Average Life Coach when I found the .coach TDL, I could create a shortened url as notyouraveragelife.coach.
Stylistically, it was also very clean and quirky.
Likewise, when I discovered the .education TDL, I just knew I had to use it for the name of my MTA site.
Then I hit on mta.education for the name.
While I liked how short the name was, I still wanted to find a name that more thoroughly encapsulated the essence of what I was doing with my self-directed MTA.
But mta.education would do until I came up with something better.
I think I very wisely decided against using the big picture or renaissance phrase for my overall career brand.
While the big picture philosophy and being a renaissance man are both very much central to me as a person and how I go about operating in the world, they’re already pre-established phrases and brands.
I needed to come up with my own original branding that was unique to me and to my creative thinking.
Increasingly, I was looking at the design of this website and its name from a marketing perspective.
The reason why I was building my own master’s degree and a website to house it was so I could market my expertise to potential employers, collaborators and clients.
The breakthrough came when I was designing my personal website, a site I eventually came to call Pete Be Creative a.k.a. petebecreative.com.
I was working on my personal website, my life coaching website and this website all at the same time throughout 2019, so they all rubbed off on each other.
As I explained in the component page detailing the creation of my life coaching website…
I wanted names that would sum up each brand and that would work as clear descriptions about me on the main page of PeteBeCreative.com.
mta.edcuation didn’t sum up the essence of my self-directed master’s degree.
I wanted something a bit snappier, quirkier and immediately clear to understand.
Something that was a simple statement.
A statement that would work on its own and alongside the other brands present on my personal website.
So I started conceptualizing…
Ibuiltmyownmasters.com
Ibuiltmyownmastersdegree.com
Ibuiltmyownmastersdegree.education
Ibuiltmyownmasters.education
I really liked ibuiltmyownmasters.education but I was concerned with there being confusion over whether it was ‘master’ or ‘masters’ (although really its ‘master’s’) and people typing the url in wrong and not finding the site.
Not that most people do type in urls!
Most use search engines.
But it still didn’t sit right with me.
Then I thought about replacing ‘masters’ with ‘postgraduate’
Ibuiltmyownpostgraduate.education
That worked.
Although it was a bit long.
And then I thought, why not just…
Ibuiltmyown.education
Perfect.
It’s a simple, short, descriptive, catchy and proactive statement of what I’ve done with my postgraduate studies.
It’s also a name that allowed me to fully separate my MTA Portfolio into its own distinct brand and to make the construction of its website a project in its own right.
This is why the building of ibuiltmyown.education is now component 2 of the final project for my Education Innovation concentration.
A final project that is slightly confusingly called I Built My Own Education.
So ibuiltmyown.education is both a product of my MTA Portfolio and the website that encapsulates it!
The name of this site as ibuiltmyown.education doesn’t sum up the focus of my studies as being a transdisciplinary master’s degree in Sustainable Globalisation and Creative Enterprise.
But, the name does something so much more important, is sum up the philosophy behind my postgraduate studies.
After all, I had built my own education and now I was going to build a website to house it.
2019
Building the site and finding its form
A site that is modular and flexible
To match the constantly evolving state of my MTA Portfolio, I knew that ibuiltmywon.education needed to modular and flexible in its design.
I needed to have a website that I could easily adjust to suit the changing shape of my MTA.
One of the main sources of inspiration I for the form of ibuiltmyown.education was Google’s Project Ara.
Project Ara was a modular smartphone that would have allowed the user to build their own smartphone using customisable and upgradable elements that could be attached to a base phone template.
Project Ara was intended to consist of hardware modules providing common smartphone parts, such as processors, displays, batteries, and cameras, as well as modules providing more specialized components, and “frames” that these modules were to be attached to. This design would allow a device to be upgraded over time with new capabilities and upgraded without requiring the purchase of an entire new device, providing a longer lifecycle for the device and potentially reducing electronic waste.
– Wikipedia
But the modular and flexible design aesthetic of the Project Ara phone was very much how I wanted ibuiltmyown.education to embody my MTA Portfolio.
This thinking very much influenced the WordPress theme I purchased to build ibuiltmyown.education.
I had a good dig through the theme packages available on themeforest.net and settled on using the Olvi WordPress theme.
I could see from its demo pages that the Olvi theme would allow me to build something akin to the Project Ara aesthetic.
Project Ara was ultimately cancelled by Google in late 2016, but not after many years of being teased to the general public.
I had even held of getting a smartphone because I wanted to build my own Project Ara smartphone.
I ended up getting a Google Pixel 2 as my first smartphone in 2018 once I accepted the fact that I was not going to get to build my own modular smartphone anytime soon.
I couldn’t build my own modular smartphone, but I could at least build my own modular website.
Building the overview page/original homepage
As I was building a website to mirror the structure of my MTA Portfolio, I figured the best place to start growing out the site would be with the overview page for my MTA Portfolio.
For the longest time, my MTA Portfolio was an abstract that didn’t really have anything visual to represent it.
My MTA is very big with many different parts and it’s not exactly the easiest thing to visualise in its full totality.
The best I came up with was a few rough flow diagrams demonstrating the hierarchy and structure of my MTA.
My MTA Portfolio has evolved quite a bit since I first drew these two diagrams in 2019 which, again, demonstrates the importance of having a website that can easily evolve with them.
But, even before my MTA evolved further, I had to translate these diagrams into a logical, workable and responsive website structure.
I figured the best place to start building ibuiltmyown.education would be with the MTA Overview page.
I reasoned that if I could translate those flow diagrams into a coherent and modular page that clearly laid out the structure of my MTA, the rest of the website would grow from it.
SCREEN CAPTURE VIDEO
The first thing the overview page had to do was highlight the key attributes and metrics of my MTA.
The Olvi theme has a wonderful number box counter element which you can embed on any page and which you can program to display any information.
So I added six number boxes to the overview page…
- One for the overall courses studied
- One for the concentrations
- One for the learning modules
- One for the years I had been building my MTA
- One for the final projects
- One for the diplomas earned
Amongst the box counters I also added a definition for ‘master’s degree’ and one for ‘transdisciplinary’ because being an overview page for my MTA, if needed to define what MTA actually meant.
Next up are my MTA’s two majors and how many concentrations, courses, learning modules, diplomas and final projects make up each major.
Depending on what device you are viewing the overview page, you will either see the two major strands side by side (desktop and laptop devices) or one major strand after the other (tablet and smartphone devices).
All the concentrations, learning modules, diploma walls and final projects are arranged into their respective groups and within their parent major strand.
Going back to the Project Ara modular aesthetic, the Olvi theme has a great page element that lets you embed banner modules.
Within these banner modules you can place whatever image, text and links you want, so I decided to use a banner to represent each of elements within the concentration groups.
So there is one banner for the concentration itself which includes a link button to the concentration overview page.
SCREEN CAPTURE VIDEO
There is a banner for the learning modules which includes a link button to the learning module page.
The banner module can also be used as a slider as I have done with the learning module banner which means I was able to include each individual learning module as its own slide.
All the learning module slides circulate in an endless loop.
There is one banner module for the diploma wall which includes a link button to the diploma wall page.
Finally, there is one banner module for the final project which includes a link to the final project page.
The rest of the concentration groups continue with the same four banner module pattern.
Each concentration group is segregated by a divider which labels which major strand you are looking at.
As there are five concentration groups for both majors, you also get a nice bit of visual symmetry when viewing the two major strands side by side.
Both major strands are locked off at the bottom of the page by a panel which states the mission of my MTA.
This is then followed by a definition for ‘application’, which links back to the definitions for ‘master’s degree’ and ‘transdisciplinary’ at the top of the page.
The site’s current MTA Overview page hasn’t changed all that much from the original one I built.
The only major difference between the two is the inclusion of a header slider on the original one.
SCREEN CAPTURE VIDEO
This header slider serves as an introduction to my MTA because I used the MTA Overview as the initial homepage for ibuiltmyown.education.
Right from the start, I had other plans for the site’s actual intended homepage.
Until I got round to building that homepage, I used the MTA Overview page to fill the gap.
Overall, I had created one concise overview of my MTA.
Not only does the overview page look better than a flow diagram, but it proved to me that I could visualise my MTA Portfolio in a structured form on a website!
Next, I just had to start creating the pages that all the overview page’s banner modules would link to.
Creating a concentration page template
I always intended to create one page design that I could duplicate and use as a template for each of the ten concentrations in my MTA Portfolio.
So there would be a uniform design layout for the concentration pages that would only alter with regards to the contents of each concentration.
The first concentration page I created was for my Public Health and Personal Fitness concentration (back with it was called Public Health, Nutrition and Exercise Science)…
Overall, the page was a very simplistic design and I never completely finished it (hence why the Public Health, Nutrition and Exercise Science page has a Olvi theme stock image for its page title header).
This first version of the concentration page had one aim – all the contents of a concentration had to be illustrated on a single page in a clean and clear fashion.
That is a very tall order when you consider that each of my concentrations contains a multitude of online course, learning modules and diplomas.
The key to achieve a seamless one-page presentation of each concentration was to utilise two features of the Olvi theme I had been playing around with – the tabs element and the hover box element.
SCREEN CAPTURE VIDEO
The tab element allows you to create different page panels with different content that can be switched between via the tab menu.
So I created four tab panels.
The first tab was for the learning modules…
Here I included each module as its own section which had the name of the module, a brief description of the module and a quote to further contextualise the module’s focus.
For listing the courses that make up each learning module I used the hover box element which allows you to create a panel that flips around whenever the user clicks on it or hovers their cursor over it.
On the front side I put how many courses were present in that learning module…
On the back side I listed the courses with each course name acting as a drop-down function that reveals the course data when clicked on…
I also included an identical flip box for any books I had read that I felt could be included in a particular learning module.
The next tab was for the explanation for why the concentration is a part of my MTA Portfolio
Next up was the diplomas tab that was for displaying all the diplomas I earned for the courses present in the concentration.
There are no diplomas included in the first version of the concentration pages because I never got round to including them.
Once I realised I would have to take each diploma pdf file and convert it into an mpeg file, I reasoned I could get back to the diplomas when I had time to do so.
Had I included the diplomas in the first version of the concentration page, they would have been small jpeg images arranged in a neat series grid that would enlarge when clicked on.
Finally there was the final project tab…
This tab just included an over-glorified button for taking the user to the final project page.
I had always intended for the final projects to have their own separate pages.
Forging the final project page template
I constructed the final project page template alongside the concentration page template.
This dual-development process was very intentional as I saw the concentration page and the final project page as representing two sides of the same coin (ten coins of which made up my MTA).
This is also why concentration page version 1 and final project page version 1 both share a similar design aesthetic.
As with the concentration page, I wanted the final project page to be a one page presentation.
SCREEN CAPTURE VIDEO
The first final project page I built was for Biohacking My Personal Fitness because I was very actively working on this project at the time.
This is also why the first concentration page I built was for Public Health and Personal Fitness because that is the parent concentration of Biohacking My Personal Fitness.
As with concentration page v1, final project page v1 has a full-width banner image and title to identify which final project this is and what concentration it belongs to…
Also, as with concentration page v1, final project page v1 uses the tab element to include different panels of information on the page.
I also included a big and significant quote to further contextualise and legitimise the focus of the final project.
I also used tab panels to present the different project components.
I went a bit crazy with the tab elements because I had tab panels inside of tab panels…
I also utilised drop-down chevron triggers to reveal more text when the highlighted triggered was clicked on…
The final project page v1 also introduced a new feature that I would eventually use across most of the site’s pages, the footer navigation buttons…
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.
and I wanted to achieve something closer to that.
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 green – Global Citizenship
- Red – Leadership and Management
- Yellow – Education Innovation
- Turquoise – Public Health and Personal Fitness
- Light green – Environmental Sustainability
- Brown – Multimedia Studies and Creative Technologies
- Pink – Information Management and Career Development
- Blue – Business Administration and Finance
- Purple – Marketing and Brand Management
- Orange – Creative 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…
- 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.
- 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.
SCREEN CAPTURE VIDEO
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.
2023
Progressing the site into a presentable form
Overcoming your bad habits means doing your washing up
I always do my washing up.
Creating the v2 about page
I knew I needed to create a single about page that covered the topics of all the previous about pages but did it in a concise and visually engaging way.
I didn’t yet have a conception of what this new about page would look like, so I went back to the about pages I had created in 2020.
I selected the elements that had worked on the v1 about pages and would serve as good starting points for the v2 about page.
These good elements were the…
- Header banner with tagline from the about my MTA Portfolio page
- Colour panels concept from the about my MTA Portfolio page
- Full-page images from the about my MTA Portfolio page
- Black and white graduate hat photos from the about my MTA Portfolio page
- Majors definition colour panel from the about my majors page
I wanted to re-use the header banner with letter cutouts with tagline from the v1 About my MTA Portfolio page.
SCREEN CAPTURE VIDEO
But I ended up discarding it because while the original banner looks great with its letter cutouts on large screen orientations, the letter cut out effect is lost on smaller screen orientations.
SCREEN CAPTURE VIDEO
The slides don’t look nearly as impressive on smaller screen orientations.
Also, the fact that the tagline was displayed across three different slides meant that it took a bit of time for the full tagline to become apparent.
Ultimately, I wanted the about page header to be something much more instant that would look good on all screen orientations.
I took inspiration from the concentration and final project pages and created a simple full-width banner image that was big enough to contain the full tagline heading but small enough not to take up the full page.
I also knew that the information immediately following the page header need to clearly and concisely define what is my MTA Portfolio and why the website that houses it has a different name to it.
I discarded the original text I had written for the v1 About page and instead used my MTA mission statement as a starting point for creating the new overview statement.
Then I just created an additional statement that explained the purpose of ibuiltmyown.education.
For the structure of the rest of the page I took my original conception of having multiple about pages and turned those additional about pages into sections of the singular about page…
- Section 1 – About my MTA Portfolio
- Section 2 – About my Majors
- Section 3 – About my Mission
- Section 4 – About my Accreditation
- Section 5 – About my Final Projects
- Section 6 – About Me
Then I took the full page image concept I had introduced on the v1 about page…
… And used IT in the v2 about page to separate each section.
I added a parallax effect to make each image more dynamic.
I also used images that were relevant to the following section.
I had always liked the colour panel I had created on the v1 about my majors page that displayed the definitions of my majors.
I added a parallax effect to make each image more dynamic.
I also used images that were relevant to the following section.
I had always liked the colour panel I had created on the v1 about my majors page that displayed the definitions of my majors.
I pretty much copy and pasted IT straight over to the v2 about page.
But because I had a colour panel in the about my majors section, I decided that I would had a colour panel to each of the sections.
I use each colour panel to highlight key information for its relevant section.
I also used a colour panel to highlight the definition of Master of Transdisciplinary Application that I copy and pasted over from the v1 About my MTA Portfolio page.
Regarding the content that resides outside the colour panels, I was incredibly strict with myself to ensure that it is was entirely concise.
I completely discarded all the content I had written on the v1 about page and started from scratch with the v2 page.
This was the best course of action because I have developed greatly as a content writer and I’ve become much more effective at writing shorter content (which has historically been a challenge for me).
I also recreated the black and white graduate hat photos from the v1 about page.
Overall, I am very pleased with the resulting v2 about page because it embodies the modular and colour coded aesthetic of the rest of ibuiltmyown.education; as well as conveying a simplified contextual overview of my MTA Portfolio.
Creating the homepage
Since 2019 the MTA Overview page had served as the homepage for ibuiltmyown.education.
While I had originally intended for the MTA Overview page to be homepage for the site, I later re-thought that Idea after I had created the MTA Overview page.
The MTA Overview page is great for presenting a structure overview of how my MTA Portfolio fits together.
But the MTA Overview page is too much too soon for a website homepage.
A website homepage needs to give you a brief overview of what the website is about in a highly engaging way.
The plan was then to create a homepage that would more closely follow the notes and sketches I had made for ibuiltmyown.education since 2013.
Essentially, my original thinking for the homepage was to create a banner slider with offshoot links.
I had already partly utilised this idea on the v1 MTA Overview page.
I added this to the MTA Overview page when I used it to serve as the temporary homepage.
When a user loaded onto my website, I wanted the welcome to be have a brief introduction and overview.
Later, I discovered the brilliant WordPress plugin called Slider Revolution which has a wonderful animated whiteboard feature which allows you to write and animate whatever you like on the whiteboard.
When I started to develop the homepage at the beginning of 2023, I fully intended to use the whiteboard feature.
In the same way I had used the banner slider as the intro on the MTA Overview stand-in page, I wanted to use an animated whiteboard as the intro for the actual homepage.
Eventually, I decided against this as the whiteboard was incredibly tedious to animate and because it wasn’t as personal as having a header slider with my image.
So I reverted back to my original idea of having a banner slider.
Also, instead of just copy and pasted the banner slider from the v1 MTA Overview page, I opted to recreate it using Slider Revolution.
Unlike the banner slider feature that comes with the Olvi theme, Slider Revolution allows you to have much more control over all the elements present within the slider.
Studied
obtained
Projects
Portfolio
Eventually, I decided against this as the whiteboard was incredibly tedious to animate and because it wasn’t as personal as having a header slider with my image.
So I reverted back to my original idea of having a banner slider.
Also, instead of just copy and pasted the banner slider from the v1 MTA Overview page, I opted to recreate it using Slider Revolution.
Unlike the banner slider feature that comes with the Olvi theme, Slider Revolution allows you to have much more control over all the elements present within the slider.
I also took this opportunity to create some new images for the new slider.
With the banner slider on the v1 MTA Overview page, I had just used images that I already had lying around or created without ever intending to use them on the site.
However, now that I was creating the actual proper homepage, I wanted images that were specifically designed for illustrating the headings that accompanied them.
This is also why I re-created the graduate hat images for the v2 about page because I needed to create more variations than what I had originally created with the v1 photos.
They also all needed to be consistent with my longer hair.
Besides, I definitely look better in a graduate hat with longer hair.
With the rest of the homepage, I already knew that I was going to expand beyond my original sketches of just a banner slider and have additional sections to highlight different aspects of my MTA Portfolio.
One key aspect was my final projects.
I knew I needed to have my final projects supremely highlighted on the homepage because it’s in the final projects that the true magic of my MTA Portfolio happens.
At one point I had thought about using my final projects to replace the banner slider, but decided against this when I realised I needed a bit of a narrative to set the stage for all that follows.
But I knew I wanted my final projects immediately following the into banner slider.
I also knew I wanted the final projects to be showcased in their own slider.
So I used Slider Revolution to create a slider unique to them.
The homepage would also need to showcase all the diplomas I had earned in some shape or form.
Because that was the point of ibuiltmyown.education, it was always envisioned as being one big explorable degree certificate.
So it made sense that the actual diplomas present within my MTA Portfolio should be featured prominently on it.
I also knew the homepage would need to highlight the concentrations of my MTA Portfolio to provide some idea of just how broad its focus really is.
So I figured that the diplomas and the concentrations should also get their own sliders.
But now I had to find a way of separating all these sliders into their own sections so as to not make the homepage feel overcluttered and over-confusing.
This is where I took inspiration from the v2 about page, which I was developing at the same time as the homepage.
I took the colour blocks and just expanded them into full sections.
Now each slider was house within its own colour section.
I also knew I wanted to have my MTA’s mission statement present on the homepage, so this too also got its own colour block section.
I wanted the MTA Overview page to have its own dedicated link at the bottom of the homepage, so this was also embedded in its own colour block section.
But there were a lot of colour block sections with sliders, all one after the other, and the page felt very cluttered.
This over-crowded feeling was made worse once I decided to add a blog to ibuiltmyown.education with its own dedicated colour block section with slider on the homepage.
I only had the MTA mission statement being the only section without a slider that was breaking the patter of the other sections.
Basically, I needed to break up the sliders some more and for this I took inspiration from the full-page images with headers I had used on the v1 about page.
I created two new ones form the homepage.
The first one I placed in-between the final project section with slider and the concentration section with slider.
This first image header served an integral purpose that took the pressure of the intro header banner because it gave me a devoted space to introduce myself as the creator of this website and of my masters degree.
It also allowed me a space to establish the majors of my master’s degree.
The second image header I placed in-between the diploma section with slider and the blog section with slider.
The second image header was something I had never intended to place on the homepage but made perfect sense now that I had made it.
I needed somewhere to state what was my ideal intended outcome for my MTA Portfolio
That’s the homepage.
Simple, colourful and to the point.