New work up: JohnCorvino.com

http://www.johncorvino.com/

I met John Corvino in person several months ago, and after learning his partner worked in the same company as I did (albeit in the Detroit branch), we stayed in touch, and he asked me to take a look at working on his website. John is a prominent speaker/writer/lecturer on moral issues surrounding gay rights (hence the moniker "The Gay Moralist"). In fact, he debated Maggie Gallagher, president of the National Organization for Marriage, just last week.

For his site, he wanted to not only give it a clean, vibrant visual makeover, but also make it easy to update and provide an automated way to sign up for an email newsletter. I've found that virtually all clients at this point want the ability to update their sites themselves, and it can be tricky to build a site with a content management system that does not require any coding knowledge on the part of the person doing the updates.

For this execution, I did a slight restructure of the information architecture, and then used WordPress (which I also used for my 2k50 site) for the implementation. I wrote a visual theme for it from scratch and used the "Pages" and "Categories" features to organize the content. I also figured out a few other cool things -- I managed to sync up an RSS feed of the columns John writes for 365gay.com so they appear on his site automatically (and in the proper category). I also used a combination of WordPress plugins and Feedburner to build a free, automated email newsletter for him -- all within the same admin interface as updating site content.

I am finding that WordPress has a lot of benefits (although there are some unfortunate issues that require workarounds), and will probably continue using the service for similar clients in the future.

Check out John's site at http://www.johncorvino.com/.

2k50: An Experimental Project

I've been working on a personal side project called "2k50: The 50 Best Songs of the Decade," which just went up a few days ago. I spent weeks compiling my 50 favorite songs of 2000-2009, and am now posting 5 more every day until December 30 (50-26 are up as of this writing). This project also served as an opportunity to further explore Wordpress as a site management solution. It worked wonderfully, and has given me a lot of insight into how to build sites that clients can update themselves even if they don't know how to code. Furthermore, I even learned a new thing or two about CSS layouts. This may not mean much to those who don't know coding, but I was able to design the site using solely text and CSS-scripted boxes of color -- this is a great technique in general as it not only makes pages load faster, but improves searchability.

Check it out: 2k50: The 50 Best Songs of the Decade

New work up: Duracell.com

A few months ago I was on the team redesigning Duracell's website, with my focus on the user experience side of things. The wireframes I worked on (which were partially based on designs another interaction designer had created - I certainly can't take 100% credit!) were used by the creative and tech teams to implement the site. I'm pretty happy with the end result!

Visit Duracell.com

michaelhisten.com 3.0

It wasn't that long ago that I did a redesign of my portfolio website, www.michaelhisten.com. It was not a very dramatic change, it mostly focused on enhancing the content and involved adding my beloved color switcher. But as I started writing more in this blog, I realized I wasn't listening to a lot of my own advice when it came to my own site.

I was concerned about a few things -- one, the level of simplicity of the old site was so extreme that I was worried people would assume that's all I could do. To make up for that, I've ditched the "no graphics" concept and used some imagery and gradients, including using the font FD Helwoodica, an all-lowercase distressed take on my favorite font, Helvetica.

But perhaps my biggest issue with my site was that I was falling victim to that perennial trap -- thinking my content was more interesting than it was. Some site statistics bore this out, but basically, people didn't bother reading much of any of the content pages and just went straight for the portfolio section. To top it off, my portfolio examples did not have thumbnail imagery to give you a preview until you clicked on the name of a project. This, combined with some research into how other designers out there are presenting their profiles, led me to embrace the idea of a one-page website.

Yup, just one page, there's nothing more than what you see when you land there. Of course, clicking thumbnails gives you larger views (much larger than before -- more than twice as large, in fact) of each project, but now all those projects are front and center. I think the end result is that people will get a quick glimpse of what I can do, and they can then read a little bit in the area at the bottom of the page, and then I encourage them to contact me for more. If they want to read more about me and my design philosophy, the blog is right here. All in all, I'm very happy with the update.

Oh, and that color switcher is still there -- I still love the idea of giving visitors a little interactivity!

Launched: Trinity Boston Foundation concert page

My association with Trinity Church and the Trinity Boston Foundation goes back over four years, and I'm very grateful that in the time since I left working for them full-time, I have still been asked to help with a variety of design projects. These have included invitations, postcards, brochures, email newsletters, and now a one-off set of two pages to promote their 2008-2009 concert season, which was launched about a week and a half ago.

This project was a fairly quick and simple one, as they were on a tight timeline, but sometimes "quick and simple" yields exactly the kind of bold, clear designs that get the job done.

You can see the pages here: http://www.trinityinspires.org/building/music/

New Portfolio Site

I've just relaunched my portfolio site. The re-design isn't hugely dramatic, and I will probably continue to do some behind-the-scenes tinkering to clean up the code and maybe do a little text editing here and there, but I'm proud of the relaunch!

The main differences:

• The primary navigation is now along the top
• There is more use of color throughout the site
• The "About" section has been expanded
• The thrust of the site is now more about making client connections rather than just showing what I've done in the past
• The new color switcher!

I've also tried something new where the entire site is designed without any images (with the exception of the portfolio imagery). Most websites use combinations of background graphics, graphics-as-text, and other graphical embellishments, but I gave myself the challenge of doing it all solely using HTML and style sheets. There may be a slight benefit in loading speed, but for the most part, this was purely as a personal challenge to see what I can achieve, and I'm pretty happy with the result.

One of the key additions to the portfolio section is the recent relaunch of the SpeakEasy Stage Company site, one of Boston's premier theater institutions. Check it out.

I also finally linked to my blog, which has been running for about 3 months now, as I wanted to make sure there was a decent back log of content available before promoting the blog. So feel free to peruse past entries and let me know what you think - leave a comment on a post if you find it interesting! (Please note that for now I am using a blogger template for the blog, but I plan to create my own blog layout soon - one step at a time.)

Thanks for visiting, and if you're looking for a new designer, hopefully I might be working with you soon!

Introducing the color switcher

I've just relaunched my portfolio website, and one of the main new features is the color switcher (pictured above). I realized a few things about my site as I was considering a redesign:

• My site has a very simple color pallette - black, white, and green - but the green was chosen somewhat arbitrarily. Why not a different color?
• My site should be more than just a place to show images of my work, it should show some of my coding ability as well.
• Some of the best design firm/portfolio sites I've seen add a level of interactivity that engages the visitor.

Those three concepts tied together quite well in the concept of the color switcher. I used the code from this helpful tutorial at A List Apart and removed all color declarations from my primary CSS style sheet (sorry if this is a bit codey for the non-coders), and then created seven style sheets that dealt only with colors. It also creates a cookie which remembers what color you last chose when you return to the site.

All in all, it is a fairly simple concept that can be executed in larger ways for other sites, such as changing font sizes or allowing re-skinning for users, and can extend well beyond colors into entirely reformatting the visual structure. CSS Zen Garden is a good example of this taken to the extreme, although unlike CSS Zen Garden, my color switcher requires no page refresh.

Pretty neat, huh?