CFS-ACELIFT

CFS-ACELIFT: THE END RESULT

Post image for CFS-ACELIFT: THE END RESULT

by Amber on August 1, 2009 in Design

A couple of months, scores of emails, instant messages, calls and coffees; Emma and I have a design result!

New little elements you might spot: a favicon, divider element, the not-so-little header (hand painted by Em), the main CFS word-mark, logos for the regular features.

Phraseology

Of course, there are still a few surprises to come yet! We love the idea of seasonal colour changes, if only for our own pleasure – right now you’ll see lots of deep purples and fuchsias. Over time it will morph into a refreshing citrus palette…

CFS Wordmark

Thoughts on the design process:

  • If you get engage with creatives on a project, work with someone you trust (to challenge and inspire you) and secondly, someone you can be frank with. Honesty is the best policy all round.
  • Be prepared for big surprises and changes! We thought we had the logo in the bag but discovered a very similar exsisting mark. Of course, Emma is a true professional and refined the mark so it’s even better.
  • Ideas are free and everywhere! Open your eyes, look at things upside down. It’s fun.
  • Don’t hoard your work (whether it be design, art, writing or music) forever, trying to hit perfection – let it go and define it’s own success! The other day I wrote in my diary: “Design is not static. It should launch, screw-up, then you can refine it and grow”.  The site’s not 100% perfect – there’s a few tweaks on the coding side yet to make, but it was important to get it up. Y’know, Nike’s right, just do it.

Other posts on CFS’s glamorous Gok-like makeover (it was very charming to see the original CFS design again): CFS-ACELIFT, the First Steps, the Wordmark and the Design Progress.

If you have any questions on design, working with a designer or bitch slapping CSS into submisson, don’t hesitate to ask!

{ 7 comments }

CFS-ACELIFT: DESIGN PROGRESS

by Amber on June 24, 2009 in Design

Yay! Progress feels awesome. Emma and and I have finally gotten around to making some decisions on a colour palette. The new CFS colours are: purple, orange, fuschia, green, limoncello and blue!

cfs-colours

These are the pastels we talked about earlier – fresh summery colours. We’re retaining the orange I’ve used in every CFS ‘design’ so far.

This is where the word mark and the signature triangle pattern is at now:

CFS new wordmark

header cfs

The pattern started off as very clean, but over time has become quite distressed – reminding me of screen-printed canvas.

As you can see, we’re developing a series of icons to go on the regular content – so far we have a ‘Photographic Evidence’, a ‘CFS Loves’ and one for all the travels I will be making (hah!), – that’s the icon with the wee sailboat. I’m still trying to come up with a few other symbols – for the occasional Dress Codes and guest contributors – any ideas?

SITE LAYOUT

This is the structure we’re currently playing around with. There are so many questions to answer! What are the essential elements of a blog, how do you navigate, width of sidebars… wait, how many sidebars?

laying-up-the-new-site
Which brings us to the first (very messy) draft:

CFS

Everything is still being tweaked – from the typography to headers and footers; but thanks to Em’s hard work, something wonderful is starting to take shape….

{ 6 comments }

CFS-ACELIFT: WORDMARK

by Amber on June 4, 2009 in Design

While I’ve been in Melbourne stalking the streets for vintage and eating like spoiled child (mm, mini cupcakes for dinner); darling Emma has been curled up in front of her laptop, slaving over a hot design. This is where we get into the creative part!

I’ve always joked that an alternative name for CFS could be “coolshitamberlikes.com”. So as core part of the Code For Something identity, Emma is developing a wordmark – we feel that creating a logo with a more pictorial element could tie the site to one particular direction in in the future (and y’know we like all sorts of rad stuff).

A wordmark is a type of logo, a ‘text only/typographic treatment of the brand name used for simple and memorable identification.

PLAYING

After our initial boards and discussion, Emma came back to me with a design exploration:

CFS Button Draf

I liked the way the letters linked up, and the softness of the big curves. There were a few things that weren’t gelling with me straight away, but I had to remember these were just rough drafts! “Normally, it’s unusual to show work half done” says Emma, “But we are collaborators, so I feel it best to work together.”

DEVELOPING

Developing the bits I loved further, Emma wanted to make the letterforms a) more aesthetically pleasing and b) ownable!

Untitled-2

“With this one I’m working on the geometric edge, to work with the to-be-designed patterning. It is quite rigid but the pastel colours will soften it!”

REFINING

After a little more work, this is a sneaky peek of where the wordmark is right now (draft only, insists the perfectionist designer!):

code for something wordmarks

I loooooove it, don’t you? The first time I saw it I squealed.

NEXT STEPS

From here, Emma will tighten up the typography until she’s 110% happy; then develop a few extensions of this mark. For example, how will CFS Loves be executed? She’ll also get her hands dirty with a colour palette (she has a good idea of what she wants to use, but will define further) and a signature pattern. While there is a lot of work to do, it’s starting to feel real, and I’m really energised about the site.

If you have any burning questions about this project or design in general, please fire away! We’ve both been immersed in design for more than 5 years and love to nerdily natter away about it.

{ 9 comments }

CFS-ACELIFT: FIRST STEPS

by Amber on May 28, 2009 in Design

To be honest, while I’ve been writing  Code For Something for a over a year now, my focus has been purely on content. It’s a very uninspiring design history, and I’ve put little effort into it.

That’s where the lovely Emma comes in! We are working via email, having face to face discussions and participating in the occasional bout of shoe shopping.

My brief: to develop an identity for Code For Something (both for the web and is flexible enough to fit with other projects in the future) that is distinctive, feels cool and works with the content. Layout options will also be explored.

THE BACKGROUND

We kicked the project off by having a look at Code For Something’s previous and current incarnations:

CFS design evolution

Left. CFS v1.5 – veryplaintxt theme with a little bit of flair injected through the repetition of the button device.

Right. CFS v2.0 – Thesis theme. The header features hand written type, while the rest of the site is mostly text, set in Georgia.

Emma reviewed the current look and feel of my site, commenting: “Somehow the type doesn’t quite fit the content you are attracted to and therefore have images of on your page.” She said it felt disconnected, but on the bright side, it was an opportunity to vamp it up once more -  “One can never have enough makeovers!”

DEVELOPING A DIRECTION

To start with, Emma sent me a wee task:

“Compile a moodboard: of your key images online + what you like + anything random you are attracted to. Then I’ll have a crystal clear idea of your aesthetic and I can whip up something tasty!”

A moodboard is a collection of imagery that designers use as inspiration before starting design work. A moodboard can include: images of designs we like, photographs of similar products, packaging examples, illustrations, colours, textures and descriptive words.

I got to work and eventually sent Emma a page jammed with shiny pretty things I’d picked up trawling around the internet:

cfs-inspiration-board

Little did I know there was some sense to be made of my madness! From my board Emma deduced that I liked:

  • Grids and type: Germanic, sanserif, strong and concise.
  • Colours: Wide range, fresh, aqua-turquoise-pink-blue-purple-oranges. Never primary colours, and never full strength. Think pastels who’ve seen a little sun.
  • Overall: Functional, with little moments of fun. A look that lets the content shine.

(As a little bit of entertainment, and because I really want this identity to be a reflection of my personal style, we cross-referenced these conclusions with the outfit I was wearing. My favourite Crystal Castles t-shirt, violet Uniqlo skinny jeans, safari ankle boots; accessorised with white Ray Ban specs and a grey scarf printed with an over sized hounds tooth pattern. It’s reality – I really do like hard geometric edges with soft colours.)

REVERSE BRIEF

Based on the information at hand and moodboard, Emma sent me back 3 pages with comments as a reverse brief.

A reverse brief comes from your design partner, and can take the form of a written statement, a moodboard or rough sketches, to confirm the design direction and offer initial thoughts on the design problem.

cfs-reverse-brief_page_1

cfs-reverse-brief_page_2

cfs-reverse-brief_page_3

Page 1. Samples of cool geometric patterns. Could become little sign-off motifs, house headings, create a header etc.

Page 2. “I think to contrast the sanserif type that would be predominant, something really considered would work for the logo. I love the ‘g’. We could create a CFS emblem using those 3 letters,  as well as an extended Code For Something.”

Page 3. Colour examples, as mentioned above. Plus cool gradients.

These boards were spot on, and I completely agreed with Emma’s emblem suggestion. I also really liked the flexible idea of geometric shapes – they could extend to web elements such as favicons, dividers and sign offs. What a champ!

NEXT STEPS

Phew. After all that important up front stuff, Emma is heading off into her bat cave for a bit to make some magic happen – and develop a colour palette. She will then show me the results of her alchemy for feedback – I can’t wait to see it! Another thing I’m looking forward to in the near future: Emma will be sharing some design tips. Hurrah!

{ 7 comments }

CFS-ACELIFT

by Amber on May 27, 2009 in Design

Currently I’m working with a designer to remodel this blog from top to toe – which is thrilling step to take in a little blog’s life.

Why work with a designer? To put it simply, they make things not only look better (whether that’s more professional, fresher or friendlier) – but they make things work better. Logically, if things both look and work better, you’ll be able to deliver your message even more clearly… and that’s the aim of the game!

Pantone

Of course, it can be a scary prospect to work with a designer if you don’t know the various stages or aren’t too sure of the lingo. While I work with designers every day (they’re a beautiful breed) – I realise many people haven’t had the same joy.

That’s why over the next few weeks I’ll be taking this opportunity to take you step by step through the design process and give you an insight as to what it’s like to work with a graphic designer – from a client’s point of view.

MEET THE DESIGNER

Emma K I’ll be working with my friend, and frequent collaborator, Emma Kaniuk. She has a particularly genius approach to typography, publication design and small identities.

Aside from being an awesome designer, Emma is an accomplished foodie and frequent globetrotter!

Stay tuned as we take this beast on and give it a fresh new look.

dot

{ 2 comments }