Due to adding a new Project Blog Post section to the final project page template, it’s created a gap of white space that feels a bit off and unbalances the whole web page.

I had to separate the new Project Blog Post section from the Project Components section to differentiate their different roles in the final project, but also because having them wedged together looked too confusing.

The solid yellow colour of the Components section and the yellow tinted image of the Blog Post section faded together too much, and it was not immediately visually apparent that they were in fact two separate elements.

So then I resorted to separating them with a bit of white space.

But when this white space is viewed in comparison to the rest of the final project page, it just looks like I have forgotten to put something in.

It just felt like something else should sit between the Components section and the Blog Post section.

To solve this problem, I have moved the Project Timeline from its original position between the Project Overview section and Project Components section and placed it in the white space between the Components and Blog Posts sections.

I’m actually happy with this outcome because it means the Timeline is now fully on show.

Unlike before when it was hidden in a separate tab behind the Project Goals section.

The first version of the final project page template I built for the site used lots of different tab elements (and not additional web pages like I am now using) to achieve a one-page presentation for the overall final project.

Version 1 of the final porject page template with lots of tabs
Version 1 of the final porject page template with lots of tabs
Version 1 of the final porject page template with lots of tabs

But I opted to remove most of these when I re-built the final project page template into its second version.

As I commented on my thinking behind the design and building of ibuiltmyown.education…

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!

Education Website: 2020 – 2021: Colour coding the site into coherency

I’ve since had much the same feeling about hiding the Timeline behind the Goals tab.

At first, I didn’t care all that much as I felt the goals for the project were much more pertinent information to present front and centre.

But now that I have been tweaking the design of second version of the final project page template and reflecting on the breadth of its development, over many, many years, the timescale seems to be just as pertinent as the goals.

Also putting the timeline front and centre in its own section demonstrates the amount of time I have invested into working on all my final projects, which only further establishes my resolve to thoroughly achieve the goals of my final projects.

This, after all, is what my MTA Portfolio is all about, the repeated deliberate practice of mastering a range of different competencies.