It’s been at least a year since I even touched the design of my site, and with how fast the web moves forward in terms of both design and development – I thought the start of the year would be a good time to address the situation (go check it out at https://jamesdowen.com/).

My site currently ranks well for specific keywords, so the main challenge was maintaining those crucial rankings. One of the most important SEO ranking factors today is pagespeed, and with my old site scoring 99/100, this was pretty hard to match, let alone beat. This alone involved taking great care during the programming stage, and ensuring every asset was appropriately compressed and served, but not to the point where the assets lose too much quality and begin to look blurry.

The other is content. My site has always being a one page site since its inception, so I’ve kept that same structure and same content throughout (apart from changing a few words). This means the design refresh uses pretty much the exact same content as before.

Old version of jamesdowen.com

Another key concept was to include animated elements, fitting in with a modern web trend of creating engaging content. On desktop, we feature an animated particle blob effect that the user can control with their mouse. This is a quirky feature to help boost interaction. This isn’t present on tablet or mobile devices though due to performance issues.

Animated particle blob

As well as that, we have certain user controlled elements that are binded to scrolling events. The example below shows the / (forward slash) rotating with the speed that the user scrolls.

Rotating element on scroll

Further down, we have the services bubble, which essentially lays out my skillset surrounding a picture of desk/office space. Rather than it be displayed as a static image, I wanted to bring some life to this section. The background features a forever looping bubbling effect, creates with pure CSS, and each skill floating gently with a slight overlay.

Services bubble

Last, but not least, we have the menu and the start project/contact section. The particle explosion that takes place when opening and closing the start project area is something cool that I’m happy we adopted and managed to fit in.

Menu and contact sections

If you’re looking for a new website, then head to my very own new website at jamesdowen.com and I’ll be happy to help you. I’m a freelance web designer and developer, and I’m available to work on websites, web-apps and online systems.