fbpx

Best Colors and Images for an Attorney Web Design – CHAPTER 4 Web Design Attributes

CHAPTER 4

Web Design Attributes

Chapter four will be examining how image-heavy these sites are along with color and typography data.

How Many Big Images?

How image-heavy are the lawyer web designs?

How image-heavy are the lawyer web designs?

I defined a “big image” as an image that takes up at least one third the width of the main content area. This means that icons and other smaller images were ignored in the count.

The average number of large images across all law firm sites came in around four per landing page. There was a single instance of just one image and one firm that had 16 big images!

The relationship between how image-heavy your website is and its effect on the speed of your site needs to be continually observed. As is true in any industry, finding a balance between form and function is necessary. The imagery on a website can really shift a users perspective, and a slow-loading website can be devastating for bounce rates.


Color Scheme

Are the web designs light, neutral or dark in lightness?

Are the web designs light, neutral or dark in lightness?

This was a relatively subjective question. I would quickly skim the page from top to bottom and cast my vote on it feeling light, dark or neutral. My impression of about half of them was that they were neutral.

I would attribute most sites being light or neutral to designers wanting the websites to be as readable as possible. A lighter background paired with dark typography creates the perfect contrast to keep content digestible.

Some darker websites, like this one, did a great job of setting a serious tone and professionalism through its darker color scheme.


How Many Main Colors?

How many colors are in the law firm web designs?

How many colors are in the law firm web designs?

To answer this question, I counted the number of significant colors that the landing page had. I excluded black, white and grey from the count.

TThe average came in at 1.68 colors used per design. The majority had a base color and then a second color as a highlight used for callouts and eye draw. There were some outstanding one-color examples sitting proudly next to the two color majority.

I believe that the takeaway is keeping color schemes simple will add more impact, be easier to understand and result in a more cohesive web design.


Dominant Color

What was the most dominant color used in top attorney web design?

dominant color used in top attorney web design?

Based on looking at the above, it is pretty clear to see that lawyers like blue. The base (or dominant) color of 68% of these law sites used a shade of blue.

According to Smashing Magazine “Dark blues, like navy, are excellent for corporate sites or designs where strength and reliability are important.”

Color Wheel Pro explains that dark blue is associated with stability, expertise, and depth and that it is the color of corporate USA.

The second most used color at 13% was red. Red tends to be related to danger which has its obvious association with accident lawyers. It is also representative of power and passion.


Accent Color

What was the most popular accent color used on these legal websites?

accent color used on legal websites

Analyzing just the accent color without taking into consideration the primary color is pretty pointless. Given that the vast majority of these websites used blue as their base color it's easy to see why yellow, orange and red tended to be the secondary colors, as they are very contrasty and complementary with blues.

Finding an accent color that can stand out gives the web designer the power to control a visitors attention. If we want users to look at the “free case evaluation” call-to-action on a blue website then making that callout orange, yellow or red would be a great way to make it pop.


Top 4 Color Schemes

What were the most common color schemes used on the lawyer designs?

most common color schemes used on lawyer designs?

I compiled the primary and accent color data into color combinations and looked for combos that happened more than once. Above I am showing the top 4 color combinations used on these websites.

Blue and orange followed by blue and yellow are the two most used color combinations for lawyer sites in this study. The next most popular was just 14 instances of blue by itself and finally, the combination of blue and red had 12 occurrences.

A few really well done examples:


Serif or Sans Serif Headings?

Were the headlines on the web designs using Serif or Sans Serif Typefaces?

do law firms use Serif or Sans Serif typefaces

73% of all personal injury attorney sites employed a Sans Serif font for its headings.

Serif typefaces have "serifs". These are the small lines or strokes regularly attached to the end of larger strokes in a letter or symbol. Serif fonts have a connotation of being traditional or classical.

The most common examples of serif fonts are Times New Roman, Georgia, and Baskerville. Here is a list of 10 more “modern” serif fonts being used in web design today.

Sans Serif fonts are typefaces that do not have...Serifs! They came into fashion because older computer monitors could not adequately render serif fonts at their lower resolutions. You would then see Sans Serif fonts being used to help with readability.

Here are 10 Sans Serif font examples being used in modern web design.

I was really drawn to some of the websites that used Serif fonts for headings and paired it with Sans Serif body text. Here is a good example of that combination: https://www.chicagolawyer.com/

Staver Law Heading Typography


Serif or Sans Serif Body Text?

Was the body text in the websites Serif or Sans Serif Typefaces?

do law firms use Serif or Sans Serif typefaces for body text

Sans serif fonts exude a more casual, informal and friendly tone than their serif counterparts. As stated above, typography that is meant for a screen tends to favor sans serif typography for readability reasons. Popular sans serif fonts include Arial, Helvetica, and Tahoma.

Being that 88% of all these attorney websites used a sans serif font, they clearly agree with the sentiment.

Although only 12 websites out of 100 had serif body fonts, I personally think we will start to see a shift towards serif body text in the coming years.

Here's a law firm design that expertly uses a serif body type: https://www.coloradolaw.net/


Largest Heading Font Size

How big are the headings on the legal sites?

SMALLEST - 10px
Headline


AVERAGE - 53px
Headline


LARGEST - 120px
Headline

Taking a look at the largest font on the landing page, which was usually the H1 tag, I saw an average size of around 53 pixels.

This text is a super important part of law firm landing page design as it is usually the first content that a website visitor will read. The text typically reads like a newspaper headline summing up the law firm and is very clearly visible on the page.

Check out this example: https://www.florida-justice.com/

The heading text is large and its messaging does a great job at instantly conveying law firm’s messaging.

“Fighting for Justice.
FIGHTING FOR YOU.”

Simple and to the point.


Font Size of Paragraph Text

What text size is used for attorney web design?

SMALLEST - 12px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


AVERAGE - 17px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


LARGEST - 25px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This question was particularly compelling to me as it has been a topic debated quite a bit over the years. It is interesting to see that the average font size of the body text on law firm sites was around 16 or 17px.

There were not any websites that had a body type size smaller than 12 pixels, and the website with the largest font came in at 25px.

Of course, much more goes into the readability of websites such as letter spacing, line height and how far the eye needs to track from left and right. Selecting your font size based on who your target audience is is one of the easiest things you can do to make sure that visitors can read your content without frustration.

Analysis of 100 Google Page One
Personal Injury Attorney Website Designs
across the Top 18 Most Populated Cities in America



Would you like a PDF copy of this research?

Analysis of 100 Google Page One
Personal Injury Attorney Website Designs

Provide your email address and you can immediately download a PDF version. We won't share your info nor will you be spammed. You will, from time to time, receive helpful tips relating to internet marketing and growing your business online.