It has come to my attention that I haven't yet addressed the fonts and colours I have chosen to use across my site.
Colour
Well, let's start with the colour choices I made. I started out wanting to go with a dark theme as I made clear in a previous post with the original images I created. It was a dark grey background with a golden yellow logo over the top. I liked this but I thought over the whole site it have the potential to look to bland, corporate and cliché. It looked good as a logo/poster but when it was all there was to look at and engage with across the whole site then it would get a little drab I felt.
So by chance whilst playing with the logo I had I created a variant with a blue background whilst keeping the yellow original logo. As I mentioned that logo later changed to the new one but I still really liked the blue background. It was a really striking, engaging overall colour that could lead to a wealth of design opportunities. So I then decided to refine it to be a hexadecimal colour that would work with web.
Hexadecimal colours are numerically defined colours designed to work with HTML and CSS back in the earlier days of coding. Now HTML5 and CSS3 support wider colour formats like RGB and even just names (like "red" or "green"). Hexadecimal colours, as the name suggests, are colours defined by six digits comprised of both letters and numbers. It allows for a wide array of colours to be used on the web quite simply however, it is naturally limited. You cannot access the millions of colour variations possible when using something like an RGB colour space but it is still open and varied nonetheless.
Anyway. I decided to play around with all the colours in particular the blue value, as that was just a random value I picked out. I decided to refine it and choose one that worked hexadecimally as that would make my life a lot easier as I could define it within Wordpress rather than having to import custom backgrounds exported out as JPEG's and taking up unnecessary space. I had to fiddle with the grey value too to get something the right lightness as to separate it from black but also work hexadecimally. These are the values I settled on:
I think they all work together really well. They create bands and they also stand out. A lot of times you'll see this kind of a scheme. Black and white paired together with another bright, vibrant colour thrown in to add definition and life. The colour is used sparingly to highlight things or inject vibrance to a page. It looks really nice and is a classic style. I wanted to try and throw a twist into that by doing the opposite. Black and blue are the two main colours with white thrown in to accentuate and inject vibrance. I am really happy with how it turned out too. As I showed in my previous post with the graphics I created the white does really well to inject interest. The blue is a nice was over the whole page too.
The blue was actually tricky to pick out because I initially thought a pastel blue would look nice but I quickly realised it wasn't terribly suited to a sharp, vector landscape. A more vibrant, deeper, richer blue was required which for me was counterintuitive but I think it works really well and was a welcomed surprise.
Type
The fonts were a little easier. I had a strong idea of what I wanted to do from the beginning. Recently I have had a strong fondness for serif fonts. They look delicate and regal. I have been pairing them with unconventional things and colours and enjoying it immensely. However, that was not what was required for this project. I went with something tried and true. A consistent sans-serif font scheme.
For titles I wanted to use Knockout. Knockout is a beautifully designed font by Hoefler & Frere-Jones:
The font is a really nicely shaped one. It is primarily designed to be displayed in the style present at the top of the above image. A thin, tall style of font that looks classic and yet modern. I used it at a heavier weight within the font called Welterweight. It thickens up the font completely and also spreads it out a little. It just packs more of a punch for a logo and page title I think.
Now onto the body/subheading font. This one was one suggested by Shore. It is called Roboto Condensed and it is a Google font:
This font is also lovely. Knockout looks great as a title font but there are drawbacks for it's use elsewhere. Some of the letters look a little weird when not capitalised, the number 1 looks really odd and it isn't a web friendly font unless you pay Hoefler and Frere-Jones for the privilege.
Roboto looks great un-capitalised and small as a body font. It also works well as a subtitle font due to it being condensed. It pairs fantastically with Knockout. It has a slight hint of the tall, thin style that Knockout has been known for but it is a lot more subdued and as a result naturally attracts less attention initially. This is perfect as the eye gets naturally drawn to the logo/title on the page written in knockout, then to the body text written in Roboto. This creates a great subconscious flow to each page and there is no jarring break to consistency due to the various similarities between the two fonts. There is enough separating them to look like two different fonts however, enough similarities to allow for a strong sense of uniformity and consistency.
I also used a little bit Open Sans here and there (mainly in the shop). This font just performs well when really small and tightly packed and is ever so slightly more instantly readable.
So there we go. Those are the fonts and colours I used. I think that they all pair with each other really nicely and allow for a strong brand identity. It also allows for good separation of elements along with a strong sense of hierarchy and flow to each page. I am extremely happy with how it all works together as one and it makes for a great set of tools upon which to build a site.
No comments:
Post a Comment