10 creative logo sketch

Announcing our new website and updated brand (finally..!)

We have had a rather large brand refresh here at 10 Creative all aimed at fixing our messaging, deciding on how we talk about ourselves, maturing into an agency from a one-man band and re-doing our old website.

Brand strategy

After running a brand strategy workshop on 10 Creative we realised there were a few glaring issues with the old way we were talking about ourselves. The main issue was that we came across like a one-man band agency (which we were 3 years ago!), this was completely wrong and it needed to change.

Running a strategy workshop allowed us to see our flaws from a distance and fix any issues we spotted. Our messaging is now aligned to what we actually think, not what we think people will want to read. We are being ourselves, focusing more on the quality of our work and trying to make a difference.


Our blogs are having an update

A knock on effect of the messaging re-alignment is that our blog formatting is changing for the better. No longer will our blog be full of spammy top 10s trying to ride those SEO waves. We will instead be going in depth about our work, what we get up to at 10, sharing and commenting on the design we like and looking at the bigger picture of sustainability, innovation and more...

Slight brand design refresh

Our branding refresh consists of an updated logo, introducing two new brand colours (and removing two old ones) and we now have a graphic style using basic shapes that are used as the building blocks behind our story.

10 Creative logo refresh

We made the 10 slimmer and more refined, making it more professional, clean and less childish.
We then introduced the word 'Creative' to our primary logo so when the logo is seen out of context people will still know who we are. The icon is now a secondary logo.

New brand colours

We have introduced two new brand colours and removed the two old colours. The brand colours are now used a lot less than before as well, so our brand is mainly black and white, allowing our work to speak for us.


Using basic shapes as our graphic style

We are using the basic elementary shapes of a square, circle and triangle to represent the building blocks behind the brands we create. Each shape has its own meaning and purpose:

  • Square - The square is used to represent brand strategy
  • Circle - The circle is used to represent design
  • Triangle - The triangle is used to represent technology


Setting some house rules on imagery

We have changed the way we use imagery on the website. You may have noticed all blog headers are now sketches rather than stock imagery (hooray!), this is because we wanted to separate our thought pieces (blogs) from our actual professional work (portfolio), it was also so we can stop using tacky stock imagery...

10 creative logo sketch 10 creative logo sketch 10 creative logo sketch

We had some team photos taken by Malgo in Espresso Library, a place we often meet our clients.

Website re-build

Our website was re-designed and re-built from the ground up and took its lead from our new brand strategy. We took a lot of time focusing on getting the design perfect, implementing interesting hidden interactivity and making the website insanely performant. Let's go into some of the specifics.


Hidden interactivity

Our website has a few instances of 'hidden interactivity', this is so an end user can still navigate the website freely and fast without ever interacting with any of these interesting additions - nothing impedes on the user's experience, the user chooses if they want to have fun or get straight into the nitty-gritty.

The home page header features some physics-based falling shapes (the shapes we talked about earlier) which fall to build up our wall of projects. You might not have known, but you can actually interact with these shapes and throw them around, or try to force them off the screen.

Later in the home page, we have our 'How can we help?' callout section. Upon initial inspection, there is nothing going on here, not until you hover one of the buttons that is. Depending on which button you hover the corresponding shape will start falling down the page and land on the blogs.

There are more instances of this hidden interactivity throughout the site, see if you can find it all!

The need for speed

All of our websites are built to be super lightweight and extremely fast as this is important for accessibility and SEO reasons. We spent a lot of time optimising this new site and every page should load in around or under 500ms, yes, 0.5s. And most of that time is spent connecting to the server, not actually downloading content! Here are some of the ways we did it:

Optimise all of the images - Every image on this site is rendered in 4 or 5 different sizes and your browser is deciding which size is best for your device. So if you are on a phone 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 an image in desktop size, and you are most likely using a mobile network with slower speeds than broadband.

Defer loading things until later (lazyloading) - Most images on this website are lazyloaded. Meaning your browser will not request and load the image until you scroll down to it, this saves bandwidth and makes the website a lot 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 a link your browser will start loading the next page before even clicking the link. Some stats on how this helps - on average a user hovers a button for about 200-300ms before clicking, if our next page loads in 500ms then that's a perceived speed increase of 40-60% which is huge!



Welcome to the new 10 Creative. Stick around and see what awesome things we create.

Jordan Mann 10 Creative profile

Author

Jordan Mann

UI Designer & Developer

Genius UI developer with a design bug. He excels at front-end website development, UI design & SEO.