On a technical note, Marcin’s technique for coding the PAC-MAN game is clever and intelligent “next level shit” (as Ryan likes to say). The lightweight code (all HTML, CSS, and Javascript) allows the game to be rendered entirely in-browser. This comes as no surprise because Google is designing the future of the web to include in-browser applications and programs (here’s a the New York Times report on Google’s web-centric future). Imagine using Photoshop (or an equivalent) within your browser by simply visiting a domain. Marcin’s PAC-MAN code is lightweight and sleek. To save browser load time, the game utilizes one single image (which includes the game boards and the variation images of PAC-MAN and the different ghosts within it). Then, the game uses CSS sprites that use tiny DIVs to call for select areas of that image. The images are then distributed for Javascript use throughout the game. Next level shit indeed.

Ryan is a great friend, former classmate, and interview subject of mine. Many congrats to both of these talented guys on their successes! It’s exciting to see friends knock a project out of the park like that.

Related links:

Marcin’s PAC-MAN blog post at the Google blog

Geek Gestalt: Google Gets PAC-MAN Fever

Original CBS News Article

The Social Security Works logo emphasizes the message inherent in the organization’s name. Through typography and punctuation, the words become not just a name, but an emphatic statement. In previous designs that were considered, other iconography was used: pillars (which you’ll see on your Social Security card), an eagle, elements of the American flag. We eventually decided that all of these things were superfluous; the name says it all. The final logo utilizes bold typography and color to amplify what’s already there.

The animation above features a series of graphic statements developed as assisting materials in the graphic identity. You can see another version of this concept in the background of the Social Security Works Twitter page.

This idea was inspired by a series of blog posts that the Social Security Works team had written. These posts are titled Social Security Works for People of Color and so forth. The articles are informative and persuasive. These phrases and statements proved to be quite persuasive as well. They expound on the meaning present in the logo.

Above is a screenshot of the website I built at socialsecurity-works.org. This site is a branded, customized WordPress content management system. The header features a Javascript photo slideshow portraying a range of societal demographics that benefit from Social Security. The ‘Social Security Works…’ articles have been given their own prominent area of the left sidebar. The right sidebar is devoted to social networking.

Many thanks to the fine folks at Social Security Works.

]]> http://www.magneticstate.com/blogdept/2010/brand-identity-web-design-social-security-works/feed/ 0 http://www.magneticstate.com/blogdept/2010/the-age-of-miniature-design/ http://www.magneticstate.com/blogdept/2010/the-age-of-miniature-design/#comments Thu, 29 Apr 2010 15:19:12 +0000 Dan Redding http://www.magneticstate.com/blogdept/?p=595 “Basically the future of web design is gonna be on a little tiny screen.” -Google designer Ryan Germick

It’s no secret that images need to reproduce at very small sizes in order to be effective online. And when I say ‘very small,’ I mean ‘the size of a pencil eraser.’ That’s freaking small. It’s always said that logos should be scalable (i.e. they need to function at large and small sizes), but we have moved into an era where scale itself has a different calibration. Twenty years ago, the smallest canvas you’d be likely to design for was a business card. Never before have artists or designers had to consistently focus on scales so miniature. I recently designed an album cover which I frequently shrunk to iPod/iTunes sizes to check its readability and visual impact (it’s looks rad and it’s coming in mid-May).

From left to right, the favicons above belong to WordPress, Google, and this blog. You might say that favicon design – which is typically 16 pixels by 16 pixels – is an art of its own (I squished a Warhol into a favicon here. I think he’d approve and/or laugh). It has been said that designing with the favicon in mind is the contemporary equivalent to the fax: designers used to stress that a logo or brand identity had to reproduce well in a low-quality black and white reproduction.

Favicons aside, the age of miniature design appears to be around for awhile. Handheld web devices continue to be a dominant form of web browsing. Digital information is commonly consumed in condensed and aggregated forms like RSS feeds. Most brands are frequently represented by images smaller than a postage stamp: the app button on your iPhone, the icons in your Twitter feed, etc.

Owners' marks on pottery, circa sixth century BCE.

In this type of design, simplification reigns. ‘Less is more’ is truer now than ever before. In brand identity, one great place to look for inspiration are be the simple runes and symbols of early forms of writing. Great power can be derived from very simple symbols and letterforms.

It’s also important to take every opportunity to spaz out and make drawings and designs that subscribe to the ‘more is more’ philosophy. An entirely minimalist world would be a boring place. Working at both ends of the spectrum will increase your skill with both ‘less’ and ‘more.’

Two vintage title screens from Columbia Pictures

My first goal was a new logo that represented the ‘Blog Dept.’ as an entity that functions both as a component of Magnetic State as well as a standalone publication. In both the name of this blog and the design of the logo, I was inspired by film noir movies (you know, the black and white ones where Humphrey Bogart carries a flask and a revolver in his trenchcoat and says ‘dame’ a lot). I always admired the title screens and studio i.d.’s from these films from the thirties and forties, and I specifically emulated the three-dimensional block letter effects of Columbia Pictures (above). I used a somewhat wild color combination to give my design a modern flair.

Bogart pursues the facts and just the facts. Notice the bold 'Spade and Archer' label on the window.

In films like The Maltese Falcon (pictured), there’s always a business name on the detective’s window or an officer’s name and title on the frosted door window of a cop’s office. I liked the idea that this blog is a ‘department’ at Magnetic State and that the logo can serve as the title on the door, if you will.

As for the web design, I intended to prioritize the content. My previous layout placed blog posts under a distracting header, but now the blog content has plenty of room to breathe, is prioritized vertically, and is more readable. I am thankful for Small Potato’s tutorial on writing WordPress themes, which I have referred to many times over the last year or two. I consider myself an expert on custom WordPress themes now; I have one bare-bones theme that I wrote by hand (from SP’s instructions) which I’ve customized for each of my last four or five WP sites.

Thanks for stopping by and I hope you’ll subscribe via RSS! I have some big things planned for this blog as well as a bunch of new design work to unveil in the next few weeks.

Creative Titles Vs. Search Engine Bait

I’ve always been a fan of great titles – whether we’re talking about film, music, or literature. Some bloggers title their posts with pure search engine bait: descriptive search terms that are often informative about content but rarely expressive or thought-provoking. It’s a good way to make a blog post relevant and an even better way to dumb down your content.

Ernest Hemingway titled one of his masterpieces For Whom the Bell Tolls. The novel benefits from a gorgeous title that strikes a chord in the context of its themes. The title and the novel are one. But if the book had been titled by SEO specialists, it would’ve been named Spanish Civil War Drama with Romance. Doesn’t have quite the same ring to it.

I’m not saying all bloggers should aspire to be Hemingway (though I won’t stop you if you do), nor am I suggesting that a poetic or clever title is appropriate for all online writing (especially in design fields, where tutorials and technical writing often require simple, descriptive titles). What I am saying is that if your writing has integrity, your titles should arise from your content, and not from SEO motives that are irrelevant to what you have to say.

I wrote a blog post about my love for 80’s punk legends The Misfits. I titled it I Fell in Love With a Ghoul because I was inspired by style of the band’s horror-themed music and lyrics. My title was meant to sound like it could’ve been the title of a Misfits song. If I wanted to SEO the piece to death, I would’ve titled it ‘I Love the Misfits’ or ‘Misfits Band’ (to differentiate my use of the term ‘Misfits’ from a film and a cartoon that both use the same word). These titles are clear and succinct and they contain the word ‘Misfits.’ But they are bland as fuck (How’s that for a title?).

The Evolution of Punctuation and Grammar

It’s also common to render popular search terms in bold. SEO wisdom tells us that some search engines place greater importance on bold words. In traditional literature, italics are the proper way to emphasize a phrase (hence the html italics code <em>). This is one way that web language is influencing the evolution of written language.

Evolution is a natural and beautiful thing. But bolded text can sometimes seem tacky and amateur. Also – and I admit this is a personal aside – if you are over the age of fifteen, you should never use an emoticon. I call bullshit on *this* way of emphasizing a word, too. Call me old-fashioned, but it just seems trendy.

In Conclusion

Many of us strive to excel at search engine optimization, myself included. Personally, I’m a beginner, and I’ve been implementing techniques I learned from knowledgeable sources like David Airey (read Web Promotion Tips from Brand Identity Designer David Airey) and the ‘SEO for Everybody’ series at Pearsonified. Perhaps the biggest change I’ve made so far is changing my blog’s header structure and placing the post title in an h1 tag on single pages (recommended in The Definitive Guide to Semantic Web Markup for Blogs). Hell, look at my little search engine optimized link fest here! All with descriptive <title> tags (roll your cursor over a link to see)!

It’s been exciting to learn more about SEO and its potential to elevate my blog to the next level. I’ve also learned a lot about blogging this year from my experience writing for Smashing Magazine (where I code and design the layout of all my posts). Smashing has the most powerful web presence I know of and there’s a lot to be learned from their content, their use of WordPress, and their cordial use of transparency in their social networking techniques.

Those are all examples of talented bloggers who have used SEO effectively while simultaneously elevating the quality of content. I suggest we all follow suit. Make sure to use SEO in a way that fosters your creative voice instead of killing it.

I built a satirical website to promote the ‘Party Werewolf’ t-shirt (all profits benefit the World Wildlife Fund; read more about why in this blog post). The site is SaveTheWerewolves.com and it is an intentional violation of all that is sacred and holy in web and graphic design. My goal was to have fun, to create something ludicrous, to raise money for charity, to try my hand at ‘guerilla marketing,’ and to lovingly satirize both web design and environmentalism. I was inspired by an intentionally awful and hilarious website called ‘The Official Website of America.’ That site epitomizes all that is considered wrong, bad, and outdated in web design: animated GIFs (as a tiling background image, no less!), a shitty embedded music file, eye-searing graphics, logic-defying layout choices, et cetera. So bad, it’s good.

It’s good to be serious about the standards and practices of good design, but I find that the design community takes itself awfully seriously sometimes. Getting upset about bad fonts seems silly to me (there are websites devoted to complaining about Comic Sans and Copperplate). Why agonize when you can satirize? I think most designers got into this field to have fun while being creative, but it might serve us well if we practiced the ‘fun’ part more often. Granted, that can be easier said than done while you’re trying to make a living during difficult economic times, and that might be why we should remind one another from time to time.

Another source of inspiration for me was William Friedkin’s use of ‘subliminal’ imagery in his films The Exorcist and Cruising. One of the scariest elements in The Exorcist is an image of a demon face that appears for a fraction of a second during several scenes – it’s visible if you are viewing closely, but it will scare the fuck out of you even if you are not entirely sure of what you’ve seen. Brilliant. I have embedded brief flashes of various imagery (including Mr.Friedkin’s demons) in the animated GIFs on SaveTheWerewolves.com and there are many (rotten) ‘Easter eggs’ hidden around the site. You can start finding them by hovering your cursor over almost any text or image on the homepage.

I hope the site makes you laugh and I hope you’ll consider supporting the World Wildlife Fund and Magnetic State! People who own the shirt tell me that it makes a great conversation piece. Thanks!

www.seanhutcheon.com

Over the weekend I launched a portfolio site for my great friend Sean ‘The Hutch’ Hutcheon. When you think of Sean, the first things that come to mind are his killer Don Draper impression and his berserker style on the drum kit, but you mustn’t forget that he is also a very talented photographer and filmmaker.

Visit www.seanhutcheon.com.

Five Chapters Logo by Magnetic State

I am pleased to announce my redesign of literary website Five Chapters! I was asked to design the logo (shown above) and redesign the site, and the results went live at www.fivechapters.com over the weekend. Five Chapters is an online magazine that publishes a new short story in five parts each week. As a fledgling fiction writer myself as well as a fan of many of the authors featured on Five Chapters (including John Cheever and Jay McInerney), I found this project to be an exciting challenge. I am quite happy with the results, and in the spirit of President Obama’s fondness for transparency, I thought I’d discuss some of the work and share a few of the logo designs that didn’t make the cut.

I began the project with the logo design; below are two of my favorites from the rejected concepts (I especially like the ‘bookmark’ concept). Five Chapters editor David Daley gave me his initial brief on the nature of the site’s identity: it combines a 19th century reading format (serialized fiction) with a modern one (online publishing). This was an inspiring starting point that led to lots of research and some interesting results (like the old-style printer’s ornament adorning the second logo below), but eventually, we began to feel hampered by it, and chose our final logo, whose primary functions are aesthetic and visual rather than conceptual.

Two unused logos.

The previous version of the website (see below), was abrasively colored, contained the site’s name in the header but had no logo, and contained only one way to access the site’s archives.

Screenshot of the old site.

To power the new site, I chose the extraordinarily powerful content management system WordPress and designed a custom theme to control the appearance of the site. I modernized the site by equipping it with access to the Five Chapters RSS feed, and added alphabetized menus for the archives, which are now categorized by story and author. Finally, I extended the Five Chapters brand by revising the ‘about’ blurb, prioritizing its display in the sidebar, and then embedding the new logo in the header and background. The ‘bookmark’ concept from our rejected logos can now be seen in the favicon.

Screenshot of the new site.

So visit Five Chapters and read today’s chapter or a full story. There’s enough free fiction on this site to entertain us all until the next century. There’s even a story about my ‘hood Greenpoint!