Highlights: Bold Typography | Well Done Content
This is a good law firm website to study if you want to see how a ton of really well-done content can elevate the classiness of a site. Check out their contact form as an example. Not many legal websites put that much attention to detail into a form. As it’s pretty much the most important design element of the page, I’m surprised more designers don’t give it the love that iLawyer has done here.
The huge serif headings really do it for me too. Simple messaging. Easy to skim. Unique. Inspiring web design for sure.
Highlights: Nice Typography | Button Designs | Photography
This site features dramatic photography set upon incredibly done content. I love the use of the leather background textures in spots as it gives the law firm a high-end and luxurious feel.
All the attention to detail is crazy too. Hover over the buttons. Take note of the dotted outline theme repeated in their content. Check out the subtle animations when you play with their testimonial slider. All of these features didn’t need to happen to have a great design, but doing them set this design apart.
Highlights: Amazing portrait photography | Detailed oriented content
The web designers at Scorpion are no joke. Scroll through this home page and notice all the small details. The rollover effects on the buttons. The beautiful oversized headlines with tasteful letter spacing. All the attention to detail really adds up to one really well-done law firm web design. There isn’t one part of this page that wasn’t cared for.
This home page design is also a perfect example of how professional photography can elevate a web design. It takes a great design to a whole new level. This site has a very Hollywood feel because of the photography and the way the designer integrated them into the design. The different sections almost have a poster design feel, yet didn’t go too far into being cheesy.
Highlights: Great Heading | Nice Accent Colors | Cool Contact Form
I love the header on this website. The serif font, the killer logo, the lines around the phone number and the tasteful orange accents make for a classy heading for this PI attorney.
The section that features ZH in the media is also the best-designed media section I’ve seen yet. Media displays on lawyer sites are essential, but more often than not, their designs usually lack taste. I like how these display in a way that keeps to the overall color scheme.
Scroll to the bottom of the home page and look over the free consultation form. So well done. The area packs a ton of info that one area yet keeps the design simple and easy for potential customers to understand.
Highlights: Nice Practice Area Interface | Top Notch Awards Design
This site really inspired me while studying its content. It oozes SEO content and provides the user’s with digestible interfaces to consume it all. Check out the practice area section and notice just how much info that one area of design real estate can provide to users (and search engines).
Another impressive aspect of this design is all the line art surrounding their content boxes. Subtle and effective. It’s a nice repeatable design feature that ties it all together in an exciting way. Check out the lines surrounding the buttons and the CTA’s and then look at the logo to see a perfect example of how a designer can carry branding throughout a web design.
Highlights: Nice colors | Sleek content features | Modern Typography
Farar & Lewis has probably the most fashionable website that I reviewed. Very L.A.
The site features a clean layout, elegant typography, and exceptional photography all while providing a ton of SEO friendly content. I particularly like the subtle background patterns and their overlapping design elements that you see throughout create a nice theme.
The site has a fantastic full-width layout that looks just as great on a phone and oozes with detail. Check out their practice area callouts and the case results section on the home page. The design does an excellent job of showing experience while not being gaudy like many other PI sites I look at.
Designer: Dot Com Lawyer Marketing
Highlights: Awesome Practice Area CTA’s | Unique Content
This site has some of the best-designed content I’ve ever seen on personal injury law firm website. Check out the cutout images of the practice areas. That has to be one of the nicest ways to display attorney practice areas I’ve ever seen. Same with the section dealing with truck and car accidents.
They have checked every box too as far as what types of content should be on a PI attorney’s home page. Testimonials, results, video content, awards and accolades, bio information, and more are all included here. So much content yet the design keeps it all in check in an easy-to-digest way.
Highlights: Nice Use of Color | Cool Iconography
I love the blue colors of this web design. Sometimes attorneys go all blue with their color scheme, and it comes off as boring. This site uses subtle shading differences to keep the “attorney blue” theme interesting.
I like the typography choices the web designer made with the use of both serif and sans serif fonts. They also do an excellent job of featuring the attorneys in portrait photography while managing to tie in their Denver location visually. You can tell at a glance who they are, what they do, and where they are — a good example of making visuals do work.
Highlights: Strong color | Persistant Contact Form | Full Screen Layout
Bostwick and Peterson’s site makes it as easy as possible for their potential cases to get in touch with a nicely designed persistent contact form. As you scroll through their amazing content, the form stays put. Normally I wouldn’t dig this kind of thing, but they did such a nice job nesting the form into each section of the home page clearly showing that the form wasn’t an afterthought.
I also love the full-width layout of the design. The designer manages to maintain a high level of design precision no matter the width of your monitor. Check out the cool hover effects on the practice area CTA’s. I am also really drawn to the overlapping triangular background images that repeat throughout the design.
Highlights: Cool Color Scheme | To-The-Point Layout
At first, I wasn’t sure how I felt about this design. The more I looked at it through, the more I appreciated its straight-forwardness. It’s a clean layout that keeps the site’s message clear and front and center. It checks all the items needed to have a pro personal injury landing page.
I like the even weight given to the Blue and the other Orange / Red color. It creates an interesting effect that lets it stand out a bit from the typical Primary / Secondary color relationship you would typically see. The circular hover effects over CTA’s and buttons are also a nice touch.
Highlights: Nice Highlight Colors | Cool Logo | Clean Layout
Salinas is another great example of an effective law firm web design. The designer did a fantastic job of controlling your eye through the layout’s orange highlights.
I particularly like their header. The logo is clean and modern feeling and the line art that is repeated in both the header and footer nails the purpose of the site at a glance.
This is also a site that made pointed effort to make their live chat feel integrated into the design rather than the after-thought look of most other PI web designs I checked out.
This is a supplementary article to our study on 100 Google page one ranked personal injury attorney web designs. During the analysis of the 100 web designs, I took note of the designs that impressed me. It’s not to say there weren’t other nice websites; it’s just that these 11 really stood out to me personally.
As that article is more of a deep study, I felt that detailing my opinions about the designs would be better off in its own blog rather than in the data-driven piece. So here we are!
I also want to note that technically I’m featuring “competition” as these are all design we did not do. I think we do fantastic work and we do study the hell out of law firm web design, but I also think others do amazing work too. There is no reason not to give credit when credit is due!
In the slider above I go into what I liked about each of what I thought were the 11 best attorney website designs in the study. Below I get a bit more granular and detail several elements that I liked and noticed under more of a microscope.
Hope you enjoy!
The vast majority of the PI sites I looked at didn’t stray far from Blue primary colors with either yellow, orange, or red highlights. I loved how the designer of habbaslaw.com took the traditional Blue / Yellow color scheme and introduced the brown leather color. it really gave the website an old money feel.
Another site that I liked the colors of was florida-justice.com with their more ocean version of the Blue / Orange theme. It feels a little more laid back than others without being casual.
Color choices on a website design can set the tone and feel for the overall vibe. It’s fun to see how a subtle shift in a hue can completely change your perception of feel in a website design.
The typography in a web design can really set the tone of the whole page. Think of the different feelings you may have about a web design after seeing a font like Comic sans vs. seeing Times New Roman, as an example.
In all of the websites that I reviewed, there were some several fantastic examples of designers giving typography some love. There are many tools designers can use to get creative with type including playing with color, letter spacing, line height, serifs vs. sans serifs choices and of course size.
I liked the designs that got bold about the type choices with large fonts front and center. Being creative with your headlines feels like an often overlooked aspect of design, and I think designers can learn to be less safe with their choices.
The body text choice, on the other hand, I think, is a type that you should be less creative with. There are few things more frustrating than having a hard time reading paragraph text because designers wanted to break a mold.
In my experience, the one thing that can make or break a good attorney site and the one single defining asset that all of the best attorney website designs have is incredible photography. You can take an otherwise excellent design and place subpar photography and instantly ruin a website design.
On the other hand having an experienced photographer on board that understands all the ins and outs of GOOD portrait photography can single-handedly carry a web design.
If you look through the majority of my examples you can see that a common thread is great photography. Way too many times have we designed a site with placeholder images and then received photographs from a client to use that take the wind out of our sails. We instantly turn from excited about a project to let down as we know how much a web design is carried by the photography
If you are an attorney please give photography the same about of care that you do your SEO or web design. If you are a web designer, please push for photography as hard as you can. It will only make you look better!
The free consultation form or contact form on an attorney website is essentially the most crucial element on the page. It’s the thing standing between a potential lead and the law firm. The form should be an eye draw, it should make a user feel comfortable to interact with it and of course, gather the minimum info a law firm needs to be able to help someone out.
Although some lawyers were asking for more info in their contact forms, the majority of the ones that I felt looked great just asked for the minimum of info: Name, email, phone, and comments.
Almost all of the contact forms that I liked had the form labels inside the form fields. This keeps the contact forms tidy and easier to keep looking nice.
Styling form fields, for me, has always been an aggravating task. Seeing these inquiry forms that look as good as any of the other design elements on the page makes me appreciate the skills of the designers and developers that much more.
Trust badges are one design element I have a love/hate relationship with. Although I understand the need for them as a device to show competency they often degrade the quality of web design because of the ransom note effect it can have.
Far too many times I see an excellent law firm design, scroll to the bottom and get let down by the haphazard way that trust badges are nested into the website. Many times designers may be held back because of vendor requirements for using badges such as not being able to adjust colors. I do think it’s essential to make every possible effort not to let the badges destroy an otherwise excellent design.
There were, however, quite a few sites that did a nice job displaying these badges without detracting front the main design. Making sure you give each badge a similar amount of design space, properly cutting them out and even turning all of them into grey scale are all ways to make sure they can nest nicely in an otherwise nice design.
Practice area CTA’s are an important part of an attorney design. They provide visual cues to guide people to specific detail pages where a visitor can get more info and also help solidify the topical relevance of the landing page to Google.
There were some really cool examples ranging in approach from simple iconography to more complicated interfaces allowing users ways to get various facts and info about the practice areas offered.
As so much of a law firm’s website visibility rely on being found in search engines, it was great to see designers figure out ways to provide search engines (and users) with plenty of written content on each subject yet keeping the design appealing and useful from a glance.
Showing social proof on a law firm web design by way of client testimonials is pretty standard practice. Making them look good, be tasteful, and feel authentic can be tricky.
It’s usually a bit of a struggle to make multiple testimonials visually appealing on the landing page as they tend to be different lengths and very text heavy. For the sites that display many testimonials, you would usually see them in a slider or in columns side by side. The side by side testimonials, I suspect, get edited to have similar lengths.
There were a couple of law firm sites that chose to have just a single featured testimonial linger around the contact form (very smart). These would usually provide a link to view all testimonials. Having only a single testimonial to display allowed them to be more “designed” and as such, I liked them more.
This concludes my article on design inspiration for attorney websites. I hope you found some inspiration as I did. These designers are excellent and this exercise made me really want to step up our own game. Although I do think we do really nice attorney web design and you are free to check out what we can do by clicking here.
Any attorney sites you think are awesome that are not in this list? Share below in the comments 🙂