I love studying the languages and cultures of the peoples of the world, and integrating them into my work—one look at my graphic design portfolio will demonstrate that.  While up to this point most of my non-English design work has involved Chinese language and cultural elements—no surprise given that I lived in China for 3 years—I’ve always been keen to observe the shapes and forms, and the creative possibilities inherent within, in the written languages and traditional folk patterns of other people groups.  I especially love seeing examples of Arabic calligraphy. The letterforms in Arabic calligraphy run the gamut from traditional, highly readable letterforms, as can be seen here, to highly stylized, abstracted letterforms, as can be seen here.

The communication design blog Graphicology recently posted galleries of Arabic typography, focusing on how famous English-language Western brand identities translate visually into the Arabic script.  It’s pretty interesting to see how the companies translate their identities into an entirely different script, while still trying to retain a consistent visual branding across both languages.  Graphicology has a gallery of brand identities here, and a gallery of packaging design here.  Check it out, and let me know what you think.

Like most of us, I see and use a lot of websites every day.  Lots of websites are lousy, most are just so-so, but as a designer myself, I love it when I find a really nicely designed site out there.  Case in point: www.commoncraft.com.  It’s a husband and wife that run a business producing videos explaining technical terms like RSS and Wikis in language that non-technical people can easily understand, using paper cutouts and hand gestures to demonstrate.  You can see examples of their work here.

Anyways, about the site design itself: Despite having a moderate/large amount of content — lots of videos, a full store, lots of blog postings — the design and navigation is still kept very simple: just five buttons on the top navigation bar, with additional links on the bottom or side of the page when needed.

Of course, simple does not necessarily mean visually boring: the use of subtle textures and gradients, along with a bold (though not overly bright) color scheme still make the pages highly visually engaging. I also really enjoy the button rollovers on the top navigation bar: a nice change from the typical “change of background color” rollover effect on most website buttons (my own website included).  I don’t know about you, but buttons like this just make me want to click them.

The navigation bar button rollover effects: on the left is the button's inactive state, and on the right is it's hover state.

And to top it off, the site is built on a solid technical foundation: clean XHTML code with pure CSS styling —no deeply nested tables or tag soup here, folks.

As I build websites for my own clients, it’s always great to get inspiration from other places and people on the web that are doing it well.  So if you’re into web design as well, check out their site for yourself.  Oh, and their videos are great too.

A few months back I was commissioned by Prince of Peace Lutheran Church in Virginia to do some graphics work for them. The majority of this work consisted of cleaning up the logos and branding of their various youth ministries. Most of the ministries’ logo files were low-resolution JPG‘s or GIF‘s, and they simply needed to be remade as resolution-independent vector-based images.

However, we decided that the logo for the ministry entitled “Waves” — a middle school youth group ministry — was just not up to par to begin with and needed to be completely redesigned.

The original "Waves" ministry logo

So I set about redrawing the logo from scratch. We wanted the concept to remain the same — that is, the design would still be dominated by a single crashing wave. After collecting some reference photos of various crashing waves, I started sketching out the new logo in my sketchbook.

Some of my sketches for the new logo

Most of the initial sketching was done with a non-photo blue colored pencil.  I used non-photo blue quite extensively several years ago when I did a lot of hand-drawn animation; basically it’s a specific shade of blue that the old optical cameras wouldn’t detect — this allows you to roughly sketch out whatever you’re drawing, then when you’re happy with it, you trace it in cleanly out in pen.  Then when shot on the camera, only the cleanly traced ink lines would show up.  As you can see in the picture above, modern digital scanners and cameras obviously have no problem picking up the blue pencil, but the blue is still easily knocked out in Photoshop —much easier than cleaning up extensive graphite sketching would be.

After the image was scanned and the blue sketching knocked out, I then traced the image in Adobe Illustrator, and added colors shadows, shading and text.

The finished image

The shading and rendering of the final graphic ended up requiring several layers in Illustrator, with both the water portion and the foam portion each taking up about four layers apiece. Layer one is the original scanned drawing.

The Illustrator layers palette

In addition to the nice full-color graphic, Prince of Peace Lutheran Church also needed a black-and-white version of the logo.  This presented a bit of a challenge, as a lot of the visual detail present in the full-color graphic was lost when I converted it to black-and-white. For instance, the part of the text that overlaps the water completely disappeared, and the top of the foam started to disappear against the sky.  I ended up applying a thick white stroke around the text to outline it against the water, and added a thick black stroke outlining the water and the foam against the sky.  I also applied a thick white stroke to the outside of the logo border to keep it visually separated as well.  This regained the visual legibility that had been lost when first converted to black and white.

The finished black-and-white version of the logo

And that’s it.  I hope you enjoyed seeing a little bit of the process that goes into designing a graphic like this!