Monday, 18 October 2010

Day 291, on which John gets graphics happy [18.10.10]

Dag to hundrede énoghalvfems. Yeesh, bad day today. Let's skip over that topic, though. It's life, I guess. But listening to Jonathan Coulton's songs always makes up for it - Code Monkey and Re: Your Brains are particularly enjoyable, but I'm sampling some of the others as well, cause I might as well listen to them all. First of May is odd, but hilarious.

So I've been doing a bunch of website graphics since I just finished off the Brickspace redesign visuals at the weekend, and now I'm designing a website for my school's art department. I've been meaning to do it for ages, it's really my fault for delaying it so long. Ah well. The Brickspace visuals now just need to be cleaned up and plonked into a Pages document, then to a PDF, annotated and all, then I'll send it off to the Brickspace staff to sample and give me feedback. Several feedback loops later, it'll be finalised and I'll have to start on the coding, but that's a worry for another day. Also, I'll be finished with this 365 project by then so I'll have a lot more time. Woot.

However, I have a sneaky preview, yeah I know you're excited, of the new Brickspace design. Unlike the page design, the colour and font palette is pretty much finalised because that's one thing I get total control of. Here it is, at long last:


Stylish, eh? Well, I think so. In terms of colours, we have six main options:

  • A bold, full-yellow (in CMYK) to really bring details out. Used on certain page elements, such as the button, but isn't particularly recurrent in the design. Just a highlight colour, really. Never used right next to the pale yellow colour, since the two are so similar.
  • Pale yellow which is the colour accent across the entire website. It's in the background, used as text on white in some occasions, and is the border colour for all images and all text input boxes. It's essential that it's a bold yellow, but not a bright yellow. Something which isn't faded and wimpy, but still not full yellow. Yellow is a bloody difficult to work with.
  • White. Used in a load of places as background for the page body, or any text really.
  • Light grey, around 30% if I remember correctly. This isn't used much, I'll admit, but it's very useful if I just want to chuck in some light text which won't stick out like a sore thumb. May have to be a bit darker in the final version, since it doesn't show up sometimes on account of its lightness.
  • Black. Used for text throughout, and logograms in places. Never used for background because that'd looky too dark and grimy.
In terms of fonts, there's only two:
  • Helvetica. Because, as you all know, it's awesome. Here I'm using the 70s updated version of it, called Helvetica Neue (Helvetica New) which I have a whole bunch of weights for. I've gone off Helvetica Neue plain recently, so I've used the bold weight everywhere that I've used Helvetica. I feel it's needed, Helvetica Neue regular looks a bit too thin. I don't know how to work with it yet. Helvetica text sizes (which aren't accurate to screen size, just to the visuals I was working on) are 30pt, 20pt, and 10pt.
  • Chaparral Pro, which is a rather elegant yet functional modern-looking serif font. I usually wouldn't use a serif font at all, but I wanted to have something regal-looking for the body text on the site, where I knew Helvetica regular would looks a bit blobby. Add a bit of intricacy and detail into the site, especially since the actual page design is very bold and simplistic. This is in 10pt and 8pt sizes, so it's not for titles.
Ignore the font and colour applications below the fonts, because they're for the page layout and design consistency which is a story for another day. The three logograms are as follows:
  • The thumbs-up logogram, which is courtesy of Wingdings might I add, is the rating system for creations on the new Brickspace. Click the thumbs-up and you've 'Liked' the creation, so it gets +1 points. Yippee.
  • The next is the Pilcrow, which is a symbol in editing and layout, but here it's used as the ratings system for Opinions articles, which will be integrated into the main site. As to how it works and what it means, that's top secret, heh.
  • Then there's the star (Helvetica Neue asterisk), which is only a slight rip-off of the Wallpaper* star logo. That's the ratings system for Brickfilms, should be easy enough to work out.
And that's all for today, folks. Until tomorrow - which is my birthday, as it happens - adieu!

~John

No comments: