The finished ARMY360 logo

Recently we pulled out some of the doodles we had made as we was brainstorming the visual identity of the ARMY360 software application for InVisM and figured we’d share some of them on our website.

As stated in the project description, the design spec simply listed the product name and called for an ellipsoid, “360°” shape.  Given that this application was built specifically for the US Army, we turned to imagery of military crests, medallions and patches — such as these — for most of our brainstorming.  We also added in part of the application interface — the 360° directional marker — and added it to the center of the image.  The bottom center sketch below became the basis for the final logo.

Various sketches made while brainstorming

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

Peter Strom's official website

We recently launched the official website for Peter Strom, a Denver-area singer and guitarist.  The site’s main purpose is promotional, with a short introduction, Pete’s repertoire, client testimonials, and song samples, with a call to action to a contact form.  As it is a small site, we were able to spend some time making a more complex and visually interesting layout than would be possible for a large, content-heavy website.  In particular, we focused on pushing the CSS code to create higher-end typography usually only seen in print media.  The visual design is based off of the logo and color scheme we designed for Pete a few years back.  We were also able to take the time to build some nice illustrative effects on the navbar buttons as well.  It was a fun project and a good change of pace from some of the larger website projects that we’re currently working on.

Wow, things have been busy around here recently.  Lots of work flying around these days it seems like.  One of our most recent projects was designing the identity, branding and website for ClearPivot, LLC, a Denver-based startup company that specializes in marketing metrics and analysis applications.

CLEAR = transparency in numbers, encouraging other parties to view and interpret the data, not hiding anything; open
PIVOT = swiveling from the data to the business (& back); the data provides information on the programs which in turn should align with the business goals; flexible; versatile
CLEAR + PIVOT= CLEARPIVOT

First part of the project was designing the corporate logo.  Working with ClearPivot’s CEO, Greg Davoll, we worked up many different possible logo drafts and discussed them with him.  During the creative process, we started out with rather complex logo design drafts but gradually began migrating towards more minimal, understated designs that concisely expressed the meaning of ClearPivot.  Finally we arrived at the current logo:

The final ClearPivot logo design

The clean simplicity of the logo illustrates the clear, open and transparent nature of ClearPivot’s product and business philosophy. The stylized “P,” of course, represents swiveling and pivoting, illustrating ClearPivot’s marketing metrics philosophy of aligning marketing data with business goals, which in turn pivots back to more marketing data.

After the logo was finalized, the next step was designing and building the website.  (As the web is increasingly becoming the foundation of companies’ marketing strategies, corporate websites are more and more the first priority when building a marketing campaign, second only to the brand identity itself.)

As with the logo, we increasingly focused on producing a clean, understated, yet still eye-catching site.  We decided on a color combination of predominantly white, gray and blue, (with a few other highlight colors for good measure) and a very organic feel in the visual forms.

The homepage for www.ClearPivot.com

The website is both visually and structurally flexible enough to grow with the company—as ClearPivot expands its range of products and services, so too can the website expand with additional content.  In addition, we paid special attention to the top banner on the homepage: focusing on bold marketing points, an attention-grabbing visual design, and strong calls to action (See It, Try It, Contact Us).

So come check out ClearPivot at www.ClearPivot.com.  As always, we’d love to hear some feedback: you can write to us on our contact form, or just leave a comment below.

Free e-Book: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

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!

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

Well, after a lot of work, my portfolio site’s redesign is finally complete.  Some history: my graphic design portfolio has been running on www.cstrom.com since early 2005.  From 2005 through the first half of 2008, it was running as a pure Flash site.

This had several drawbacks: the first, of course, being SEO.  Being a series of old-school Flash files, my site was literally invisible to the search engines.  (I keep hearing about Flash being more accessible to search engines nowadays, but I still feel like I never see many Flash sites show up prominently in organic search results.)  Another drawback, for me, was that it was cumbersome to update compared to XHTML.  And finally, with increasing monitor sizes nowadays, it was becoming increasingly necessary to change my layout to a 1024x768-optimized layout, rather than the 800x600-optimized layout I was currently using.

My 2005–2008 portfolio site — showing its age

With these things in mind, I decided a few months back to overhaul my site, giving it a redesign and moving it over to an XHTML format.  My plan was to first run the site in a “transition mode:” build a few XHTML pages with my résumé and a few of my most recent work pieces, but still link to my old Flash site to display the majority of my work.

The transitional portfolio site

Finally, when some time opened up between contracts, I started building out the “finished product” — the fully redesigned site.  I kept the same basic layout as the transitional site, but gutted it all under the hood: the transitional site ran completely on absolutely positioned <div> elements, so I rebuilt it using a more flexible and standardized flow-based layout. I built out a full footer section, using the wonderful footer technique from A List Apart.  I filled out the content to display a much larger selection of my portfolio, divided up by category.  I added this blog that you’re reading now.  And finally, I gave a bit of a facelift to the design, cleaning up the typography and some of the visual elements.

A comparison of the transitional site and the final site

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now