In the course of my day job I don’t design a lot of websites from whole cloth, but one exception is the microsite I build for our faculty’s reading recommendations each year. I enjoy these projects, as they give me a chance to experiment with new techniques (this year’s was an experiment in responsive design), but this was the fourth year I’ve built one, and it’s become a challenge to think up new ways to display what is basically just a long list. So unlike past years, where I organized the list by faculty member, this year I chose to organize it by the books themselves. This wound up being trickier than I anticipated, since several faculty members had actually chosen the same book to recommend, but I think the final product came out pretty well.
Earlier this year I launched a redesigned website for Niehaus LLP. The brief from the client, a boutique law firm in Manhattan, was to create a more elegant site that exuded both the legal sophistication expected from a larger firm as well as the personal touch that clients can expect from a small firm. To that end, I designed a logo, reworked the site’s information architecture, and hand-built a new, standards-compliant site.
Last month, I was approached by the ACLU of Illinois to design a save-the-date postcard for their annual gala. The only requirement was that it be tied into their boxing-themed 2010 Annual Report, designed by Elaine Fong and Thomas Richie. The final product is below. I am especially proud of the fact that, despite the copy provided, I managed to NOT hide a Charlie Sheen face somewhere in the design.
After last month’s one-day course taught by Edward Tufte, I was inspired to try creating my own complex infographic. I decided to tackle a subject that comes up rather frequently in discussions with one particular family member: the relationship between gun control laws and violent crime.
The graphic above charts 4 variables: the violent crime rate in a given state in 2008 (x axis), the strictness of a state’s gun control laws as ranked by gun control advocacy group the Brady Campaign (y axis), a state’s poverty rate in 2008 (on a spectrum from green [low] to black [high]) and a state’s “diversity index” (the likelihood that two randomly selected people will be of a different ethnic group, as determined by the 2000 census; the larger the type, the more diverse the state). I had also thought about indicating both geographical proximity (by means of connecting lines, but these made the graphic nearly illegible) and population density (though I could think of no concise means of indicating that New Jersey’s population density is 1000 times that of Alaska).
Now, I am no statistician or criminologist and I’ll leave the conclusions to them, but it seems to me that this graphic does pretty well at one of the jobs of a complex infographic by, well, complicating the problem. The chart shows pretty clearly that strict gun control laws do not necessarily lead to a lower rate of violent crimes, but it also shows that fewer restrictions on gun ownership also do not lead to a lower violent crime rate — an armed society is not, as some gun rights advocates would argue, necessarily a polite society (as to the wisdom of basing social policy on the musings of a science fiction writer, well, that’s probably a subject for another infographic). Nor do the other variables represented indicate a singular cause of violent crime: some of the most diverse states are among the least violent, as are some of the least wealthy states. What the graph makes clear, I think, is that there is no simple answer to reducing violent crime.
So what do you think? How could this graphic be improved? How could I add more variables while keeping the image legible? I’d love to see some of my designer friends take a hack at this same problem and come up with a different way of looking at the data (which is available here, by the way).
One of the fun parts about being a designer in a band (and probably the reason that so many designers are also musicians) is getting the chance to design all the schwag that goes along with the music: album covers, websites, t-shirts, and of course, gig posters. Designers love doing music-related projects, as other creatives tend to give designers more creative freedom than the average client. Often, particularly with gig posters, we’re freed from the usual constraints of having to clearly communicate a set of information (I’m fairly confident that no one in this day and age actually finds out about a gig by way of a poster) in favor of producing a work with an emotional impact, one that tells the story of a band’s sound in a single image (check out this great collection for some examples, and this post and its comments for some criticism of this paradigm).
Next week, the Lost Cartographers and I will be playing at Chicago’s legendary Empty Bottle for the second time; we’ll be opening for the incredible Samanatha Crain & The Midnight Shivers (check out this preview of the show). The Bottle’s promo folks asked us to provide some posters, and while we don’t normally make posters (the return on investment is just too low in terms of getting people to come to the show), I decided it might be fun to do one for what promises to be such a great show.
I’d be interested to hear in the comments what you think about the poster — does it capture our sound, and tell the story of our music (which you can hear here if you haven’t already)?
I just realized that the last few months have been so busy that I completely forgot to post about a project I completed at the beginning of the summer. In preparation for the release of the Lost Cartographers’ debut album, I decided to to redesign our website. While the old one was still workable, I wanted to design something that a) was consistent with our cd packaging and b) did a better job of integrating our social media presence. I also had an itch to create something in a photorealistic style, as opposed to the relatively clean graphic style I often gravitate toward.
Here is the before:
And the after:
Last week, the University of Chicago Law School (where I am the Manager of Electronic Communications) launched its redesigned website. I have been working on this project in one form or another since I was hired in late 2007, and, like most projects of such size, the launch is by no means the end of the work needed. As a result, it has been hard to wrap my head around the fact that this stage of the project is complete. However, I thought this was a good time to ste back and reflect a little on the process.
In many ways, this project has been very unlike the other projects I’ve detailed on this block. This is by the far the biggest project that I have worked on, both in terms of amount of content and the number of people involved. While most of my previous projects have involved, at most, the client plus one other designer, this one involved a team of two designers (from the small Chicago design firm Rogue Element) and a development team of half a dozen members of the Chicago web development firm Palantir.net, not to mention the many stakeholders at the Law School itself.
Also unlike other projects I’ve worked on, in which I’ve often done design and development, my role here was generally limited to information architecture and project management. Aside from gaining some valuable experience in keeping so many moving parts going in the right direction, this also meant that I had the chance to observe the processes by which Rogue Element and Palantir worked. Getting to observe some more-experienced colleagues as they worked was a great learning experience.
The biggest difference between this project and the others I’ve worked on, however, was that I was, for the first time, playing the role of the client while working with other designers and web professionals. This is something that I think most web designers don’t get the chance to do often, and I found that it provided me with some valuable insight into the assumptions at play on both sides of the working relationship. I hope that I can use this insight to make my own interactions with clients even more productive.
My stepfather, Gary Allen, is a professional food writer/editor/eater (ok, he doesn’t technically get paid to eat, but he takes it at least as seriously as any paying gig). Last year, as a birthday gift, I offered to redesign his website. His original site (which he had built himself using Dreamweaver) had served him well enough over the years, but I felt that I could improve upon it and help him generate more leads, more jobs — and, of course, a bigger inheritance for myself.
I had three goals for the redesign of the site:
1) Give the site a more professional look without losing the personality and sense of humor of the original. While Gary had been a professional illustrator and print designer earlier in his career, he didn’t quite know how to make those skills translate onto the web. I felt that, if the web site was going to be his professional face, it needed a cosmetic overhaul. But I wanted to be sure that the look retained the quirkiness (and faint whiff of curmudgeon) that seemed to be part of what set him apart from his peers. As it turned out, this was actually the easiest part of the project. One of the advantages of having a close family member as a client is that you don’t necessarily need to spend a lot of time getting to know them, their likes and dislikes, and so on. I initially pitched a “tongue-in-cheek antiquarian” approach, and Gary, while suggesting a few tweaks (the curve on his name, which really helped smooth out the header, was his idea), loved my first draft.
2) Refine the site’s information architecture to highlight Gary’s wide variety of skills. The original site contained a lot of information. Because it had grown up rather organically, it was not always clear how certain pages were related to others, and there was no consistent navigation. Since the the site’s primary purpose was to land Gary more jobs, I decided to focus the information architecture around the different skills he can brings to, ahem, the table. This way, the visitor is quickly made aware of what Gary can do for them and their food-related projects.
3) Make it as easy as possible for visitors to sign up for his newsletter. For years, Gary has sent out a weekly email featuring culinary quotes, links to food-related sites and other such miscellanea. With nearly 600 subscribers, this newsletter has been Gary’s primary promotional tool for many years; however, it was nearly impossible to find out how to sign up for it on his old site. So I wanted to make sure that there was a sign-up for the mailing list on every page. I also wanted to ensure that visitors could use subscribe an RSS feed of his updates, so I convinced him to turn the mailing list into a blog (“Just Served”) that is integrated seamlessly into the site. This gives him the advantage of consistently adding new content to the site (a plus for search engine optimization) as well as the ability to archive his weekly updates on the site.
Below are images of the original site (left) and post-redesign (right).
I recently wrapped up a site design for Forward Alliance, a life coaching and psychotherapy practice run by Ioanna Chaney. It was an interesting process, as it allowed my Design:Intelligent colleague Katie Petrak and me to experience building a small business brand from the ground up.
When Ioanna came to us, she had an existing website that was generally serving her needs; however, she felt that it could use some reorganization and a visual overhaul. She also wanted a postcard-sized mailer that could be used to market her services to other professionals in her building, etc.
In our initial discussions, we touched upon the need for a visual identity that would link the website, the mailer, and her business card and decided that the first step was the creation of a Forward Alliance logo (something she had not previously considered). Building on Ioanna’s core mission of promoting personal growth, Katie and I collaboratively came up with the mark below.
From there, we moved on to creating the business card and mailer, with Katie doing the majority of the work on these. Ioanna chose to focus these pieces on the message of growth conveyed by the grass portion of the mark, rather than the entire mark, since she felt that they were intended more to market her personal services rather than the business as a whole.
Finally, I set to work on the website. The goals of this portion of the project were to create a standards-compliant (and therefore more search-engine friendly) site, with a cleaner, more polished look that was still friendly, warm, and welcoming. Since frequently updated content is also more attractive to search engines, we also decided to convert the “Tips” section of the previous site — in which Ioanna had posted some of her favorite quotes and sayings — into a blog-like section of the site called “New Growth.” The tips section has always been a favorite of her clients, and now they have the capability to have new tips delivered directly to the their inboxes or feed readers. If you have a chance, take a look at the site and let me know what you think!
Last week, the University of Chicago Law School unveiled two new websites, designed and built by yours truly. One is an online version of our alumni magazine, The Record. The Record Online will contain many of the same stories as the print version of the magazine, but will enhance them with extras like audio and video, as well as the ability for our readers to comment on the stories.
The second site is one devoted to a little experiment that we’re running here at the Law School, which we’re calling “Ideas Are Everywhere.” The plan is to send copies of our faculty’s more accessible works (beginning with Richard Posner’s How Judges Think and Martha Nussbaum’s Liberty of Conscience) out into the world, with labels asking people to visit the “Ideas Are Everywhere” website. We’ll ask them to tell us where they found the book (which we’ll track on a Google map), and what they think of the ideas contained therein; we’ll also request that they pass the book on by leaving it in a coffeeshop, on an airplane, or anywhere else an interested party might find it.
Certainly, neither of these sites is earth-shaking in regards to its design or functionality. But they each gave me a chance to try something new. The Record Online was my first stab at creating a site using the open-source content management system Drupal, which we’ll be adopting when the Law School launches its new primary website in the fall. It gave me the chance to poke around under the hood and try to wrap my mind around the way Drupal works (though I have much, much more to learn!).
The “Ideas Are Everywhere” site, on the other hand, is built on Typepad (which we also use for our Faculty Blog); the challenge here was to make a site built on a blogging platform feel as little like a blog as possible. Given that I had about a week to get the site up before the first books were to be distributed — projects at universities seem to either drag on interminably or have to be done immediately — I needed to be able to quickly and easily give readers the ability to comment and to subscribe to comment feeds. Using Typepad but removing many of the traditional markers of a blog seemed to be the most time- and cost-efficient way of doing so.
So what do you think? See any room for improvement on these sites?
(portions of this post are cross-posted at the University of Chicago Law School Electronic Projects Blog)