The good people at InfoZerk, ye of the business card production process from hell (my fault, not their fault), recently commissioned me to redesign the homepages for The Lounge and Ruby Row, two advertising networks that draw together influential bloggers in the development space and apply the “strength in numbers” philosophy to them.

Both are sister sites, with the same basic information architecture and the same structure. I completed the Lounge design first based on a Press Kit design that I had executed for InfoZerk over the winter. Most of the colors and the 50’s inspired formica-looking pattern in the header and footer were driven by this previous design.

Once The Lounge finished and approved, the challenge became to use the existing Lounge structure to construct a clearly unique design for Ruby Row that was still had an obvious connection to The Lounge site design. I changed the color scheme to one that was inspired by the Ruby Row logo and built a new pattern reminiscent of gem facets for the header and footer.

Both designs were built in Photoshop. HTML slicing and CSS was provided by the client.

The Lounge

Ruby Row

It feels like I did this ages ago, I just forgot that it was live. This is a homepage for a unique investment experience class run through the Mendoza College of Business.

I tried to suggest the idea of a big stock board with a lot of information flying around on a bunch of different screens, hence the repeated square elements in the header and footer. The blurry blue numbers image in the top right is an iStock image. I drew the blue line in the header, representing ideal portfolio performance over time in Illustrator and then placed it Photoshop to add in the little sliver of drop shadow where the line meets the large blue main branding area on the far left.

I’m pleased with the way the buttons turned out in this design. I think they have a nice tactile quality and I like how they echo the basic shape of the repeated square elements in the header. I did the AIM “logo” off the cuff because I needed something to fill that header area that was more graphical then a simple type treatment of “Applied Investment Mechanics,” which is our typical modus operandi in such situations.

This was constructed in Photoshop. The main header font is Clarendon. As always, if you’re interested in seeing my other site designs, check out this set on Flickr. Or you can hit the “Gallery” link above (now that the aftershocks from my abortive foray into styling my own CSS have been finally ironed out of the Gallery styling, that is).

Students can be counted on to produce unlimited quantities of high-quality content to fill the holes in your Information Architecture. For some reason, the will be more interested in things like free pizza then monetary remuneration for doing this.

I try to never, ever, under any circumstances resort to hyperbole, so I’ll just say that I’ve heard this plan “a lot” in the short time I’ve worked on Notre Dame’s web projects. It mostly comes from clients, but occasionally the idea that students represent a vast, untapped resource of fresh, engaging content bubbles up from our own team. I’m guilty of falling back on it myself at times.

It’s easy to see where this myth derives. Our students are millenials. They produce copious amounts of content in the form of online picture galleries and facebook profiles and quizzes that inform them which Crayola Color they are. This content appears impressive because of the sheer volume of it. What we sometimes fail to notice is that 99% of it is useless or of interest to an exceedingly small group of close contacts. Any plan that relies on students to produce an endless stream of high-quality content cheaply is almost by definition doomed to failure. Hell…you may as well replace the word “students” with “anyone” in that last sentence. It’s just as accurate.

University web content staff should do their best not to fall into this trap. Too often, “We’ll buy the students free Papa John’s and get them to produce videos that we’ll show like YouTube. Everyone loves YouTube,” represents a flimsy bridge that we use to get over the task of actually sitting down and putting together the content that the site requires. This could because it’s too daunting, because we’re just not capable of producing it, because we don’t have any new or fresh ideas, or because we’re just lazy, but I would suggest that the actual problem is Content Overthink.

Content Overthink is a symptom of the larger problem “Overestimating Your Audience,” which develops when a site’s content is designed with the idea that everyone who visits the site will move through the content linearly, like a book, hitting all of the high points and missing nothing. Once they finish all of the important information, we need to entertain them and give them a reason to come back daily, right? It’s reasonable to assume that a giant bolt-on section of the site containing constantly updated viral student-produced content will attract return visitors and longer page views. There are two problems here: 1) No one uses an informational site for entertainment. 2) Students really aren’t all that reliable. Generally.

Content teams should concentrate on figuring out what is the most important information to their users, organize that information to make it easy to find, and then figure out an engaging, easy to read voice for the content. Whenever you find yourself at the edge of a huge gaping chasm in your content and someone suggests a vague plan to lure students into producing it for you cheaply and on an ongoing basis, consider cutting that section of the site entirely and concentrating your efforts on areas that can return more on the investment in time required to produce them.

The good people at Camp Tannadoonah who always accept everything I say from a design consulting perspective with absolutely no hair pulling, wailing or gnashing of teeth recently directed me to “draw a Polar Bear for a T-shirt design.” Projects like this remind me of why I enjoy being a designer. Whether or not it’s the best single-color vector Polar Bear you’ve ever seen is, in this case, subordinate to the fact that it was really really fun. I can’t wait for these shirts to come out so I can proudly wear one around until I wear holes in it.

The design was done in Illustrator. I built from this pencil sketch:

I generally sketch on a section of a long roll of cheap tracing paper. It takes the pressure off to come up with a perfect sketch because you can always rip of another sheet and trace over it if you mess up. Also the paper kind of carries with it the idea that, under no circumstances are we producing a show piece here. It’s crappy paper, it’s not going to last. That reduces some of the pressure to be an anal perfectionist as well.

I don’t have a scanner so I literally took a snap with my Nikon D40, used Photoshop to convert to grayscale and then used adjustment layers to lighten the image up and bump the contrast a bit. I save files like this out as .tiff when I’m going to be using them in Illustrator. I’m pretty sure I do this because .tiffs end up full resolution when placed in Illustrator. (The truth I do it because that’s how I’ve always done it, but I think that resolution is why i started doing it).

Clearly, the sketch is too detailed (even as loose as it is) to make a good t-shirt. I’m going to be relying on a screen printer to reproduce this, and I’d prefer not to give the poor guy a migraine, so my illustration has to be designed with screen printing in mind. That means no little tiny hair lines, no gradients, etcetera. One ink, big thick lines.

I drew the basic outline shapes with the pen tool and bumped the stroke weight up to thicken them, then drew in the white area of the bear behind the stroke outlines. I expanded the strokes. This is the result in outline preview:

The thick, double outline is the expanded stroke. The rough, jagged line that runs all the way around the bear shape is the white fill area in the background. I can further refine this shape, so that I’m providing one, easy to print vector to my printer though. Ideally, I want to send him one solid white shape with no extra vectors to add complexity. The first step is to use the Pathfinder to merge the ice cube shape and the white background of the bear into one shape. Then I select this newly created white shape and the blue expanded outlines (making sure that the outlines are on top). Use pathfinder one more time to take the expanded outlines and use them to clip the white shape underneath. Below is the result:

Much simpler. Much easier for anyone with a basic knowledge of Illustrator to open and immediately understand. A designer’s life is made so much easier when he isn’t putting unnecessary hurdles in the path of his production vendors. At this point, if you’re really anal (as I am) the one thing that’s left is to use pathfinder to take the eyes and nose and clip them out of our white shape.

The Agency just launched our most recent site and my newest design: commencement.nd.edu.

This is intended to be live all year and serve as a resource for all information related to Commencement, including (but not limited to) parking, schedules, cap and gown distribution and how to avoid paying attention to low-flying aircraft.

I’ve noticed that we’re (I’m) starting to steer away from the classic ND site model (global nav/feature image/elevator pitch/news/events). Questioning a lot of our long standing habits as encouraged us to think about why we do specific things with designs. The introduction of more rigorous user testing under the new leadership of Social Media Advocate Chas Grundy has made it possible to test these questions.

I’ve learned to be a web designer over the last few years largely by ripping off Jim’s designs wholesale. (I’m kidding).

When you wake up after a long period of time and you can’t remember why we always have “News” and “Events” on all of our sites when there isn’t much need for “News” or “Events,” it’s time to question if there isn’t a better way.

The Commencement site has been designed to dispense with the “Welcome to the University of Notre Dame…” inertial sales pitch (that, at any rate, is available all over nd.edu for those who need it), and get people to where they need to go as quickly as possible.

In that regard, you could probably argue that the feature image is a bit superfluous and only serves to push the launching buttons further down the page. It was added in, to give the whole composition a bit more kick, but also because on the day of the event, and after the Commencement weekend draws to a close, that particular area of the site will be used to push users to the recorded video content of the event.

Check out this Flickr set to see some of my other site design work.

Creative Director: Tim Legge; Client Relations: Joe Lyphout; Web director: Chas Grundy; Designed by: me; Coded by: Erik Runyon and Ryan Dunwiddie.