Website launch: Training Insight

Who doesn’t love a good referral? In this case, Dianna Sanchez was so happy with her new site design, she referred one of her neighbors to me for some website work.

Training InsightChristine McKay runs her own consulting practice, Training Insight, doing custom training and computer setup for financial software (specifically QuickBooks and Sage Timeslips) in Cambridge, MA. She’s been in business for many years, which is great for her clients. On the downside, her website www.trnginsight.com hadn’t been updated since 2004, and it was time for an overhaul. (Skip to the end of this post for the before-and-after slideshow… because, also, who doesn’t love a good before-and-after?)

Christine already has an established visual identity that is serving her well, and she wasn’t looking for rebranding or significant changes to the look of her site. What she mostly wanted help with was search engine optimization, in order to enhance her site’s reach and visibility to potential new clients. However, I told her that SEO would be best served by some structural adjustments to her site: Continue reading

Designs for the Blue Hill Troupe’s 2014 Ruddigore

As many of you know, for the last two years I have been a Backstage member of the Blue Hill Troupe, Ltd., the only musical theater group in New York City to donate its net proceeds to charity.

Last year, I was privileged to serve as the Troupe’s Marketing Graphics coordinator, as well as the lead Program Designer. Since I’m still catching the blog up on all my projects from Spring 2014, here’s a look at the materials I produced for their April 2014 show, Gilbert & Sullivan’s Ruddigore.

[portraits]

The original Act II sketch.

Historically, the Troupe has often based show graphics on the concept sketches of the set design. For this Ruddigore, I was totally enamored of the richly toned watercolor artwork that the set designer (noted NYC architect Byron Bell) produced for the iconic Act II “ancestor portraits” set, so I was keen to figure out a way to work with that.

As a background for text, however, this selection presented some challenges: it’s not only very busy, it’s also highly discontinuous, the dark background being heavily cut by the white grid of the portrait frames. My techniques for adapting to this background included:

  • deepening the color values as much as I could without losing contrast or detail;
  • using white (or “reversed out”) text against the primarily dark background;
  • setting most of the text in the very simple and legible Myriad Pro (except for the ornate title, set in Blackadder) to help counteract the heavy texture of the background;
  • adding a subtle gray outline stroke to the letterforms to create a boundary against the lighter areas of the art;
  • strategically adjusting the composition (via cropping, sizing, and positioning) to create as much neutral space for the text as possible while preserving concrete elements of the stage set (table, candelabra, freestanding portrait) as a visible frame.

The first piece we produced was a 4×9″ postcard. Over the course of the year, I adapted this layout into several more single-sided pieces such as display ads, our Facebook cover page, other web graphics, and an 11×17″ window poster for our Brooklyn workspace. Later, there was a quad-fold 8.5×14″ brochure that included a ticket order form.

This slideshow requires JavaScript.

Finally, I also got to serve as lead designer on the program booklet, which is a glossy 136-page perfect-bound extravaganza with a full-color cover. For the cover here, we turned to another of Byron’s sketches: the wrought-iron gates of the tiny Cornish fishing village of Rederring. (This elaborate set piece was incorporated into the overture, then dramatically flown out at the top of Act I.)

The program cover.

The program cover.

Since this was a simple line-art sketch, I placed it on a parchment background, then used a striking red shade to highlight the “ruddy gore” of the title text. This treatment produced a thoroughly different look that still worked thematically for our melodramatic period piece. For consistency, I kept the same title logotype as on the promotional materials, but I wanted the rest of the program to evoke the old-fashioned typography of a vintage newspaper, so I used Bodoni for both body and display text throughout.

Note that, having moved away from NYC to Indiana immediately after the show closed in April, I’ll be an Associate member of the Troupe for the coming year… though I’m still on call for the occasional design project! Their 2014-15 season includes Lucky Stiff this November (for which rehearsals are now in progress) and Gilbert & Sullivan’s Patience next April. Break legs, all!

New website project launch: Growing Minds

A good friend and colleague in the Boston area, Dr. Anya Dashevsky, is launching a private psychology practice, and I had the privilege of assisting her with her marketing materials.

She had already decided on a name for her new practice: Growing Minds. She made sure that the domain name growingmindspsych.com was currently available, so we moved forward with that. She specializes in assessment of children (starting as young as 18 months) through adolescents, so she had come up with a name that conveys both the objective (minds that are growing) and the process of assisting those minds to grow and develop.

My first task was to come up with a logo. I wanted to capture that same duality, so I used two contrasting typefaces:

  • a script face known as Banshee with a dynamic, organic feel, and
  • Book Antiqua (Microsoft’s knockoff of Palatino), which will also be suitable for general text use in her website and business materials.

For her branding colors, I chose green to represent optimal growth, and blue to connote a calming, supportive, and trustworthy presence for the presumably-anxious parents seeking her services. (Note that blue is a common choice among medical practices as well as financial institutions.) I provided a wide range of alternative concepts, but this jewel-toned scheme was the one my client was drawn to, so I knew we were on to something!

[Growing Minds]

The two-sided business card featuring the final logotype.

Next, we worked together to create a website for her practice that would provide substantive information as well as basic logistical details to inquiring new clients. We settled on a clean white background and a simple page template that would perform just as well for iPad visitors as for desktop browsers. All the text is in Book Antiqua to match her brand identity.

[GrowingMindsPsych.com]

The finished website frontpage. Look at that smile! Click to browse the full site.

This site build uses pure CSS, no JavaScript, to achieve both the dropdown main menu tabs and the click-to-expand bullet points on the front page. The menu code was adapted from this simple but effective version on CSSMenuMaker.com. The bullet point code was substantially adapted from this vertical accordion on sitepoint.net — they made use of CSS3’s built-in :target selector, and I had to change around the code to make it function under CSS2, but the basic structure remained the same.

The site is hosted on 1and1.com (Mr. Y’s recommended vendor for basic, economical web hosting). I had my client set up her own customer account, then went in myself to set up the domain name (growingmindspsych.com), post a placeholder page, and eventually transfer the files for the full site once the design and content were complete.

My client’s new practice officially opened this week in her Lexington, MA, office. Congratulations and best wishes for much success! (We’re still working on the coordinating brochure. I’ll post that as a follow-up when it’s completed.)