A minimal project led website that lets the work speak for itself while adding a subtle hint of creativity and fun.
⇱One of the things I had to nail with this project was implementing some subtle animation and interactivity throughout the site. It needs to stay out of the users’ way and let them explore the projects without being distracted. Adding this interactivity allows 10 Creative to pull through some of their branding without overshadowing any of their work.
When the above animation comes to an end, it turns into a fully interactive 3D eye that follows the users' cursor, something that most people will skip past, but a memorable experience for those that happen upon it.
Above, you can see the primary logo tucking away into its iconified format when scrolling down the site and viewing content - small things like this and the navigation label hiding, help clean up the page and get the user to focus on the content. The header content also cleverly inverts its colours depending on what's beneath it, so even if it covers any content, everything is still visible.
Most of 10 Creative’s clients run startups and scaleups, meaning they have limited time in their days. Anything that consumes more time than necessary is vexatious, which is why this website is built from the ground up to be extremely fast - not only does it provide a good user experience, it's also key for SEO. Here are some of the ways I managed to drive the speed up:
Optimise every image - All images on the site are output to 4 or 5 different sizes by the server; your browser then decides which size is best for your device. If you are on a mobile device you will be delivered a far smaller image than if you were looking at the site on a desktop - this is because you don't need a desktop-sized image, and you are most likely using a mobile network with slower speeds than broadband.
Defer loading things until later (lazy loading) - Most images on the site are lazily loaded, meaning your browser will not request and load the image until you scroll down to it. Lazy loading saves bandwidth and makes the website faster because it only loads what it needs.
Use a pre-loading trick to make the site seem blazing fast - All links on this site use a pre-loading trick, so when you hover over a link, your browser will start loading the next page before even clicking the link. On average, a user hovers over a button for about 200-300ms before clicking - if the upcoming page loads in 500ms, there is a perceived speed increase of 40-60%, which is immense!
