I’ve recently been juggling quite a few projects, for both work and freelancing. I feel my own portfolio website has slipped a little by the wayside in delivering these other projects, but then surely that’s the point of a portfolio anyway, no?
Harwich RDF Tower
The Harwich RDF Tower project has been very enjoyable and diverse, stretching from creating a logo and business stationary to all the A3 and A2 interpretation panels around the site and finally a website to bring it all together.
Logo design
The logo design alone encompasses so much of the history of the what the tower is, both in terms of its hexagonal form and as the one of the origins of RADAR. From the start I felt the hexagon was key, but on top of this I began to add layers of signal strength, directionality and signify both the literal and historical weight of the tower through bold line strokes. Through some kind guidance offered by a graphic design pro, instead of using both gradient opacity and gradient line weight I settled on just the one that I felt would work best all round, through print and web mediums.
Within the final design, a half-hexagon representation of the tower itself emanates concentric bands of signal strength in a single 60° segment – the array itself would cover between 120° and 160° in 5° sections, so a 20° bit of poetic licence was applied arguably. The bold horizontal line that joins tower to projection is to denote the classic “sweep” of a radar; although this isn’t technically correct to how the Type 287 functioned, it is widely perceived as this by many through movies depiction of later radar systems, born of this one. Finally, the weight of the Ebrima font matches the tower and sweep thickness, giving an overall feeling of cohesion.
Interpretation panels
The previous method of displaying information in this museum was large white panels, say 10ft x 4ft or so, with a couple of sentences in huge size 100+ font. But in recent years, a great deal of effort and research has been carried out so there’s a lot more to say.
Fortunately, I spent much of my childhood in and around all sorts of museums and historical landmarks so I already have a good idea of what works and what doesn’t. With a great deal of the content being text heavy, I settled for a “newspaper” type two column layout of left-aligned text; accessibility with justified text is sketchy and I can’t imagine personally being able to read a line of text that is A2-wide!
By limiting the width of the columns to half the page width, I gave myself a really consistent image width to follow too – by making all images maximum-column-width the height was predetermined by its proportionality. I did do some cropping on a few images where necessary and also where multiple images appeared on a page I tried to match their heights as best as possible – I say “best as possible” but I actually mean like, pixel perfect.
As part of the wider branding, and with the website already in the back of my mind, neither me or the curator particularly wanted any garish colour splashes or contrasts. So we settled with a cool grey contained header and a matching colour footer that bled to the edges. To bookend each selection of panels, whether they be individual or in sets, the top left corner of the panel group displayed the panel number within a hexagon and the bottom right corner of the panel group I formed into a 60° hexagon corner, embedding the logo within the space.
I can’t wait to see these in situ in the museum!
Website
This blog portion of my portfolio website is a subdomain where I installed WordPress via FTP. Not only because I wanted to broaden my knowledge, but also because I wanted to apply the same techniques to the Harwich RDF Tower project. In doing so, I’ve created a MySQL database and added myself and the museum curator as users, got to grips with themes and delved into the customisation options.
In order to stay on brand with the print materials I created, I found a simple Bootstrap template in the library and heavily modified the PHP template files. I added page header images feeding from the featured image area, a light grey background and re-arranged page header structure and made a significant style change to the footer whereby adding the 60° hexagon inflection that was a key part of the interpretation panels.
Within the CSS customisation area, I added a few quite clever over-rides to replace the clipping on images marked as “rounded” within the WordPress image settings to be a hexagon clip-path instead. In doing this, the curator can set images as hexagon on a single click whilst I ensure that circle images that are not within their branding aren’t used accidentally after handover and rectangle images remain both available and default behaviour.
Mistakes were made
On another note, another couple of learning opportunities were found today. The first really is to not trust all plugins. I think it’s fantastic that there are thousands of free WordPress plugins that do all sorts of things, such as “Insert Header and Footers” allowing you to insert Google Analytics verifications and meta data without worry.
But, in trying to find a way to search through the Template Editor quicker I installed a plugin that did this but didn’t have the same code-checker that the actual editor has. Meaning, basically, I missed a semi-colon and the whole website went down. From this, I learned several things: even once a day backups aren’t always enough if you’re doing big things, child themes are great and phpMyAdmin exists.
So, I did lose a day of working on this blog where I was trying to edit a theme to look like the rest of my website and got reasonably close. But, in resetting through the cPanel database option fields to the twentytwentyone theme I actually realised a clear line between the two could be fine. Just the shame is that I reached 4 x 100 on Lighthouse, but I can reach that again.
I regularly incrementally save versions of my work anyway, so backing up is not really an issue for me. I just think I underestimated the damage that could be done through messing up the core myfunctions.php file!
Won’t be making that mistake again at least!