(You’ll get the most from this post, if you are viewing it on a laptop, rather than a phone)
Congratulations on finding this hidden post. It’s not related to Cerbera ownership hence why it doesn’t show up with the others- but I figured anyone who was curious enough to find it, probably also has at least a passing interest on this topic.
Other than my Cerbera, I also have an interest in web design. I don’t do it for a living, it’s merely a hobby. And one that I enjoy when I’m not playing with the Cerb.
This website is a great example of my hobby. It was a fairly standard WordPress powered website, but it has a lot of custom CSS (the code that styles what you see on screen)
UX (User eXperience) as they call it in the trade is a big deal, and many folks have made careers out of providing this service. In it’s simplest form, it’s the art of subtly ensuring that all of the elements on a website gel together, and are intuitive to use & navigate for the visitor, and finally are pleasing to the eye.
You can’t underestimate the emphasis on Subtle. Some of the UX elements on this site you probably wouldn’t be able to name if they were missing, but you would be left feeling a sense of “it looked better before”. That’s the subtly coming into play.
In the many years I’ve been tweaking this website, it’s probably the UX side of things that have got the most attention from me.. some examples:
Photos
All of the photos on the site, have a shadow. It gives the illusion that they are standing out from the page.
Some photos are better viewed large, but so as not to take up too much space on the page, I have made clickable.
But how do you know they are clickable? They have rounded corners, and when you move your mouse over them, they hint at zooming.
When an image is loading, either because it is quite large or because the internet connection of the visitor is not great, then an animated icon is displayed. We’ve all seen these before, usually a circle or collection of dots spinning.
On this site, I have replaced that with a photo of a Spider Wheel that I animated.
Elsewhere on the site, if there are quite a few images to display on screen in a gallery, it may take some time to load the thumbnails. In this case, a small Spider Wheel will temporarily display while the thumbnails are loading.
Text
If you’ve read the post here about my colour-changing car when the sun comes out, you’ll know that it is Dark Green until the sun comes out, then a teal colour. Hyperlinks follow the same logic. All text is Green. But if you hover over a link, it will turn Teal to hint that something will happen if you click it.
The many navigation buttons (read more, next post, post comment etc) follow the same style, Green until hovered over, then Teal.
The menu follows the same design cues. If you hover over the 3 lines icon in the top right corner, it will change colour hinting something will happen when clicked. When you do click, a menu comes into view. It is Green of course, and when hovering over to select a menu item, the selection changes to Teal.
Icons
On the right hand side on the home page (or at the bottom of the page if you are on a phone), I have various icons to indicating navigation to other pages. e.g to the videos or photos page etc – when you hover over these, they enlarge, like the photos do, to hint that something will happen. The same with the large Cerbera site logo, hover over it and it enlarges, click it and it will take you home.
Use of the Union Jack
TVR is a British brand, and we’re proud of that. As a tip of the hat to that, there are a couple of union jacks featured on the site:
The site background
and the favicon (the little icon that appears in the tab of your internet browser)
Use of animation
As you are scrolling and paging through the homepage, some of the posts contain videos. To highlight this, I use an animated image as the image next to the excerpt of text.
This post, like the site itself is evolving. I’m sure there’s more to add another day- but for now, hope you enjoyed geeking out with me.