My Notebook

posts, notes and random stuff.

Identity marks can also be Fluid and Responsive

Yes you heard right a brand can be "Fluid" and "Responsive". By definition, it is the development of a logo system that is defined in a series of forms, each version aiming to communicate an aspect of the brand.

Depending on its context, the form of a mark might change with each viewing, or the mark might house OR be placed with an array of images, textures, colours and patterns (or video).

Animating a static logo for screen is nothing new, but a 'fluid identity' to my mind, is deeper routed with forming a branding system that delivers a responsive and dynamic solution even in the context of print.

Here are a few examples:

Jggbifca

MTV's (2010)


Bhjiehjh

ITI (2010) by Heydays


Hhgfifab

AOL. (2009) by Wolff Olins


Ihjfcbgb

City of Melbourne (2009) by Landor


Hbijhfah

Museum of Arts and Design NY (2008) by Pentagram


Jhcigahi

NYC & Company (2007) by Wolff Olins


Iahaedfc

Casa da Música (2007) by Sagmeister


Bajidaie

Nickelodeon (1984 - 2009) by Tom Corey, Scott Nash, Alan Goodman


Hebdgdac

Priba ( 1973) by John Lloyd ( Allied International Designers)

Fluid Images that scale with the Baseline Grid

Study

Currently working on a new design that is allowing me to fully embrace the ideals of mobile first, stay fluid, be responsive, and generally the scop of building a better website. I'm this opportunity to put in to practice many of the excellent techniques I've learned and played with after reading great books and a wealth of interesting articles but have yet to combine in their entirety in a real world project.

Despite being a 'real world project' I do like to experiment and test along the way, I'd liken it to sketching my front-end dev ideas.

My recent study is to find a solid technique for placing fluid images on a layout with a strict vertical rhythm. The image "max-width: 100%;" technique is mind blowingly flexible, but at times when implemented can knock surrounding content out of the baseline grid.

Here's the current progress of my study to find a solution:

[ Please note that this is just a work in progress study and has not been tested over multiple browsers or platform ]

Even Steve Jobs worked from home!

Bjcgdcje

I choose to run my small business from a home office, and have done so for almost 6 years. Some days I love it, there is nothing better. Other days I wish I was bouncing ideas with a room full of other creatives and engineers (face to face, rather than Skype).

I love this photo of Steve Jobs, taken by Diana Walkers at his home office in 2004. Steve Jobs proves that you can change the world from your small (and chaotic) home office! :D

How to identify web fonts on the iPad

Sometimes you'll visit a web page and spot a font in use that you think is gorgeous, with legibility that's just perfect for that project you're working on.

The smartest way I've found of identifying a web font, and even detecting the service used to serve it, is a lovely little js bookmarklet by  Chengyin Liu named WhatFont

Aeefacgj

Fount is a bookmarklet that offers similar functionality, but for me WhatFont is quicker and as it detects the font host it can also removes the step of searching for availability.

Ffjibebg


Adding the Bookmarklet

It's really dead easy once you have the javascript that make up the bookmarklet. With your iPad, 'copy' the WhatFont or Found script below. Save any page as a bookmark and then open the Bookmark menu and tap 'Edit' before selecting the bookmark you just saved.

The final step is to change the name of the bookmark (e.g. WhatFont) and then completely delete the URL and 'paste' in its place the bookmarklet script. And save.

Now you can browse the web and when you need to ID a font hit that bookmark and tap on the area of text you wish to check out! Job done.


WhatFont (copy below):

javascript:(function(){var%20d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','http://chengyinliu.com/wf.js?o='+encodeURIComponent(l.href)+'&t='+(new%20Date().getTime()));b.appendChild(s)})();


Fount (copy below):

javascript:(function(){if(!document.getElementById('fountscripton')&&!document.getElementById('fountscript')){var%20founts=document.createElement('script');founts.src='http://fount.artequalswork.com/fount.js';founts.id='fountscript';document.body.appendChild(founts);}else%20fountReset(false);})();