1 logo design (light and dark variants)1 business card design (2 samples, 1 per partner in the firm)Case study detailing design decisions (you’re reading it right now!)
Jefferson Law Offices is a local law firm specializing in commercial intellectual property law.
They want to reposition themselves to attract larger business clients, while remaining attractive to individuals and small businesses. They want to rebrand so as to visually stand out from competitors.
We agreed to work together on the beginnings of a new brand: a new logo and new business cards!
Pictured: that new project feeling.
Jefferson Law Offices had a few requirements for the logo and business cards so that their brand would still come across the way they wanted.
Designs should build trust & respectDesigns should be somewhat conservative (no brutalism here)Designs should avoid the tried-and-true legal office motif (scales and a serif typeface) if possible
Ok! With the project understood and requirements defined, it’s research time!
First, I looked up other law firms. If Jefferson wants to stand out in a crowd, I need to know what that crowd looks like.
Patterns emerged before too terribly long. I’ll talk about them in two parts: Logo & branding and website design.
The first thing that struck me was how frequently the logos featured a set of scales (see below). Also, most of the logos I found were highly typographic (they were made of stylized text).
For an example of a non-typographic logo that’s done well, let’s look at Reuters’ “five rings” logo (below). The round icon on the left represents an abstract globe to highlight the international nature of the news organization. No letters involved (in the icon at least), and no literal interpretation of an image as their icon.
A symbolic design like Reuters’ could be an effective way to uniquely brand Jefferson Law Offices, especially when their competition are all sporting letter-based logos.
Looking at the competition’s typography, a few patterns emerged there as well. Small capital casing (small caps) is a recurring theme in legal office logos, the vast majority used it. The few logos that didn’t invariably used title casing.
Logos and type use one or two solid colors, often darkOften the icon and text aren’t well balanced, leading to a “floating” feelingEven logos with an icon are dominated by the typePlenty aren’t well kernedSpacing between elements doesn’t always look purposeful or consistentFrequent use of typefaces that don’t pair well together
Suuuuuper text heavy, to the point that I don’t want to read most of the contentPoor typography & information architecture are prevalent. A comfortable reading experience is a rarity hereLike logos, lots of mismatched typefaces and inconsistent use of spaceSome sites are broken outright; text overflows it’s container or is weirdly aligned on the pageSomehow, not 100% of legal sites are mobile-optimized in 2017
Now armed with context, I set off on my law firm design adventure!
I like to start my design process with a type study; during this phase I examine different typefaces, sizes, weights, and spacing in order to create a comfortable reading experience. An equally important goal of the type study is to match the style of the content, be it a funny newsletter, a staid business app, or a forward-thinking law firm.
First up, I needed to choose a typeface that reflects the characteristics of the law firm: trustworthy, respectful, and modern.
I mostly avoided traditional serif typefaces in order to push the design towards a modern look. I focused on typefaces with rounded letterforms, similar-width lines, and consistent character widths. These characteristics should add up to a typeface that differentiates Jefferson from the classically-styled competition.
I started whittling down the typeface samples. The first to go were samples using small caps; this approach looked too similar to competing law firms’ logo text. Also, individual letters' weights were inconsistent between large and small caps, making the text look not quite cohesive.
Additionally, the smaller letters inherent to small caps were difficult to read at smaller font sizes. Since this logo would exist on a flexible canvas (the web), it had to hold up in some rather extreme usability situations. On top of that, it had to look great in print at a fixed size.
Next I removed Quattrocento, the only serif typeface in the group. I thought I’d give serifs a fair chance just in case I found a workable variation of one. In the end, my initial impression (and the client’s suggestion) was correct: serif fonts really do look stuffy in this context.
After two rounds of reduction, the samples started to even out in terms of quality. It became harder to pick the great from the good. To crown the winning typeface, I focused on legibility above all else. By zooming way in to the canvas and way out, I gauged which typeface was easier to read across various distances.
The winning typeface: Amiko!
With a solid typeface picked, I moved on to crafting a logo that represented Jefferson Law Offices. My goals for this part were:
Create a visual concept that is refreshing and decidedly modernAvoid alienating the law firm’s clients; keep it approachable
My first thought was to reinterpret scales as “a balancing of two sides”. Here’s the result of that line of thinking:
I found that this was too abstract and might be off-putting to some clients of the firm. Then I ran into a mental block.
I’d hit a snag. I couldn’t come up with other visual representations that successfully communicated “this is a law firm”. I tried general representations of Themis and Lady Justice, but as a figure I didn’t think she was recognizable enough. I also felt this approach relied on the judgement aspect of the law, and not on the justice aspect. Presumably a law firm would wish to be known for the latter, not the former.
I tried variations on a sword-and-scales icon, but that also came across as very fire-and-brimstone. Jefferson Law wants to attract clients, not strike fear of divine punishment into them! I needed a different angle.
I took off my high-art glasses for a second and wondered: maybe the imagery of a set of scales is popular for a reason. I’d initially wanted to avoid the scales iconography, but trying other solutions taught me that scales make the brand instantly recognizable as a legal practice more than other iconography does.
Bingo. This approach checked all the boxes: 1. modern, 2. unlike other logos in the industry, and 3. representative of a law firm.
I anticipated further revision later, but for now I moved on to choosing an appropriate color palette.
With the type and icon in good shape, it was time to craft a color palette to tie them together. I used the same approach as before: I picked out a few promising color palettes, tried them on the designs I’d made thus far, and kept the one that worked the best.
Coolors is my go-to color palette generator if I don’t already have colors in mind. I picked a few sets of colors that fit the project requirements (bold, a bit unexpected, but professional).
I’d already defined the general shapes and styles of the logo, all that remained was to find colors that do them justice. (ha get it)
Here are some color samples I tried out:
I found that mostly black or white text worked best (contrast!), regardless of the color filling the background of the card. I tried out some lightly saturated text colors, in addition to punchier background colors:
While this latest round was my personal favorite of the bunch, I wasn’t sure if the colors were too candy-like and saturated for the professional goals of the firm. I worried the boldness was outweighing the respectable nature they wanted to portray.
To remedy that, I picked one of the more middle-ground color palettesand increased the contrast between text, logo, and background.
The result is a more balanced design:
At this stage, I called the color study done for now. This too I knew I’d revisit and refine, but having a strong direction allows me to flesh out the full design before nitpicking too much.
My next step was to apply the colors and text styling to the front of the business card as well.
Here’s how that went down: I started by adding every bit of content the client asked for. I realized pretty soon that presenting all the relevant information at the same time posed a hierarchy problem.
Here’s my first attempt:
I wanted to focus on removing the inessential for a bit. For example, I knew the firm’s website URL would also be on the card back, so perhaps it could be removed from the front. The card front became this:
Seeking further simplification, I realized it could make sense to separate the halves of the card by subject matter. The card back could be all about the firm, and the front all about the individual.
And so it went; the URL moved to the card back along with the firm’s name. The front was simplified to only the partner’s name and contact information.
The card front at this point:
I brought the design up to a colleague and asked for feedback. He pointed out that the scale icon on the back was difficult to see in print.
He also mentioned that the card front’s hierarchy could be pushed further. After all, the front is meant to convey information in order of importance. In this case, that order was name > title > phone & email.
After some experimentation, I realized that a white front communicated professionalism more than the single-color approach I’d been attempting.
After taking all this into account, here’s the final card on both sides:
And that’s the project complete! During this case study, I went over my process for creating:
Law firms (at least those I found) have pretty similar brands, visually speakingThere is an opportunity for firms willing to stand out through marketing or brandingThere are many usability problems in this corner of the web. Especially when it comes to type: unnecessarily verbose content, uncomfortable line lengths, and small line heights.
This article was first published on Medium.