The complete guide to planning and designing a law firm website homepage

How to design a law firm website homepage

The most important page on a law firm website is your home page. This is the page that visitors will see first, and it is important that it clearly communicates what your firm is about and why people might want to hire you for their legal issues. There are several components that your homepage should contain and information that each component should include. Here are the various parts of a strong law firm website that can help you to turn visitors into clients.

The layout

The homepage can be one of the more daunting pages to plan, this is becuase the homepage is kind of like the cliff notes version of a website, you have to include all the important parts without putting too much information on it. Once you break it down into its pieces it becomes easier to build. The graphic on the right breaks down the rows of information that should be included on the homepage.

Width of layout

Every website should be responsive, which means the width and page elements respond to the width of device they are being shown on. So an exact width of how wide a website should be is hard to say. But for for design and development purposes the design file should be 1200 pixels wide and designed for desktop.

Tablet and mobile

Even though mobile and tablet traffic now outnumber desktop traffic, for design and development purposes you should always start with desktop in mind, then once you have all those elements designed you work backwards from there. We will discuss tablet and mobile considerations in later chapters. In the early stages of planning its not necessary to consider mobile and tablet just yet.

1. Header Section

Law firm website homepage header

The header is a section at the top of your homepage and is the first thing that visitors will see when they click on a link to your website.

While you do not have to have all of these items in your header, it is important for you to include your contact information so that it is easy to find. Using contrasting colors to make your information stand out can help your header to have a greater impact.

  1. Logo
  2. address with link to google
  3. map
  4. email address
  5. phone number or call to action that links to contact page
  6. main navigation
  7. Social media links

It’s also beneficial to make your header a sticky header, this is a header that stays at the top of the browser at all times. This serves a couple of purposes in that it keeps all your contact information on the screen at all times and the user also has access to the main navigation no matter where they are on the website. Mobile should also have a sticky navigation, while mobile may have less information it can display in the header it will have the menu accessible at all times so the user can easily navigate to another page.

2. Main Banner Section

Law firm website homepage main banner

  1. Strong and impactful image
  2. Tagline
  3. Supporting text
  4. Call to action

Immediately beneath your header is the main banner. This will be the first thing your visitors notice and will set the tone for the rest of the website. Because of this, one of the most important elements of the main banner is having an impactful image as its background . Your main banner should include a clear and identifiable tagline together with supporting text. A good tagline should be specific and should help to differentiate your firm, something like, “Criminal attorneys who believe that everyone deserves a strong defense”.

Including supporting text underneath your headline can help to further draw in your site visitors. For example, an example might be something like “Our attorneys are passionate about the rights of everyone to defend against criminal allegations and work hard to secure the most favorable outcomes for our clients.”

Your banner should also include a link to your contact form. For example, if you offer a free consultation, the link button should state “free consultation” and allow people to click through to that page.

If you want to have an attorney spotlight, a blog post, or a practice area included with your banner, you can add more slides. You can also simply stick with a single banner slide and your chosen message.

3. Intro Section

Law firm website homepage intro

  1. Title
  2. Brief description of firm
  3. Related image

The next component of your homepage is an introduction to your firm and its focus. It should include a title along with a description of your firm. For example, if you have a personal injury practice and have secured several six- and seven-figure settlements or verdicts for your clients, your introduction might read something like this:

About the Firm

Skilled Personal Injury Attorneys With a Winning Record

Our firm has amassed a track record of success for our clients, recovering hundreds of millions of dollars for our clients. Our attorneys represent injured plaintiffs who have been injured because of the negligence or wrongful acts of others. We are members of the Million Dollar and Multi-Million Dollar Advocates Forums because we have recovered numerous settlements and verdicts in excess of $1 million for our clients. Our attorneys fight for our clients to recover the maximum compensation to which they should be entitled.”

In addition to the headline and introduction to your firm and its practice, you should include a supporting image. This can be a professional photograph of you if you are a solo practitioner, a photograph of everyone in your law firm, or a stock photo that is related to your practice areas.

4. Practice Areas Section

Law firm website homepage practice areas section

  1. Intro Text
  2. Related stock image
  3. Name of practice area

The next part of a good law firm home page is a practice areas section. This should begin with a tagline that encompasses your practice areas. For example, an estate planning law firm might use a tagline such as:

“Trusted advice for planning your future.”

The practice areas should then be listed. This can be a stylized listing in which each practice area links to a detail page that contains more information or by using an icon or image. For example, the estate planning attorney might list the following:

  • Trusts
  • Wills
  • Advance directives
  • Health care powers of attorney
  • Durable financial powers of attorney

If you do not have content written for each one of your practice areas and instead just want a general page that talks about them all, you can place a link to the practice areas page that includes additional information.

5. Testimonials Section

  1. Testimonial text
  2. Client name
  3. Slider controls

Including a client results or testimonials section is optional, but it is good to have if your state’s bar allows it. The information that you can include in a client testimonials section can be in a slider. You can omit client pictures. We will discuss how to write a case results page in another chapter. If you do include client testimonials, you should only include actual statements from your former or current clients after getting their permission to include them on your website.

6. Our Team Section

Law firm website homepage our team section

  1. section title text
  2. attorney image
  3. Attorney name
  4. Attorney title
  5. Social media links (optional – not shown)

You should include an our team section on your homepage. This should include photographs of every attorney in your firm and their positions. If the lawyers have social media profiles, you should include links to them. Each photograph should be clickable and linked to the individual attorneys’ full bio pages. It is a good idea to list all of the attorneys on your homepage whether you have one lawyer or 20. People tend to identify better when they have photographs of real people to view.

7. Latest News Section

Law firm website homepage latest news section

 

You should include an our team section on your homepage. This should include photographs of every attorney in your firm and their positions. If the lawyers have social media profiles, you should include links to them. Each photograph should be clickable and linked to the individual attorneys’ full bio pages. It is a good idea to list all of the attorneys on your homepage whether you have one lawyer or 20. People tend to identify better when they have photographs of real people to view.

Having a blog that you update regularly can help to keep clients and potential clients engaged. While the information that you write about will not be legal advice, you can give general information that is pertinent to your practice areas. Having a blog can make people feel that you are knowledgeable and a go-to sources if they have legal issues in your practice areas.

8. Form Section – On every page of the website

Law firm website homepage form section

  1. contact us title
  2. contact us text
  3. first name
  4. last name
  5. email address
  6. phone
  7. message text
  8. submit button

You should include an our team section on your homepage. This should include photographs of every attorney in your firm and their positions. If the lawyers have social media profiles, you should include links to them. Each photograph should be clickable and linked to the individual attorneys’ full bio pages. It is a good idea to list all of the attorneys on your homepage whether you have one lawyer or 20. People tend to identify better when they have photographs of real people to view.

Having a blog that you update regularly can help to keep clients and potential clients engaged. While the information that you write about will not be legal advice, you can give general information that is pertinent to your practice areas. Having a blog can make people feel that you are knowledgeable and a go-to sources if they have legal issues in your practice areas.

9. Branding and Tagline Section – Above the footer on every page of the website

Law firm website homepage branding and tagline section

  1. logo
  2. firm tagline

It is a good idea to place your tagline before your footer so that the goal and mission of your law firm are reinforced in the minds of your readers. You should also include your tagline as a global element that is visible on every page of your website. Your tagline is what people will come to know your firm by, making it an important element to emphasize.

10. Website Footer – Above the bottom of every page of the website

Law firm website homepage footer

  1. firm name
  2. address
  3. phone numbers
  4. email address
  5. site links
  6. social media links
  7. copyright
  8. privacy policy links

Your footer will include all of your contact information again. This helps to ensure that your firm will be easy to contact and should include the following:

  • Name of your firm
  • Your address with a link to a map
  • All of the phone numbers of your firm, including your facsimile line and 1-800 number
  • Your email address

If you have social media pages, you should also include links to them so that your readers can connect to them or follow them.

The final component of your homepage should include your copyright information. There should also be a link to your privacy policy and your sitemap. Privacy laws require anyone who collects data about visitors to include a privacy policy. Your privacy policy should include statements about how information is collected and how it is used.

The homepage of your website can help to build your brand and your reputation. Including these components can help you to differentiate yourself and can help to turn visitors to your site into clients. Getting help from professionals who are experienced in designing websites for law firms is crucial to make certain that your website is an accurate reflection of your firm and its goals.


The Ultimate Law Firm Website Blueprint: A step-by-step guide to creating the perfect law firm website

In case you missed previous posts, here they are:

Part One: Intro
Part Two: How to create a sitemap for a law firm website
Part Three: The complete guide to planning and designing a law firm website homepage
Part Four: The Ultimate Law Firm Website Blueprint: The Sub pages
Part Five: How to write the about page for a law firm website
Part Six: How to design a practice areas landing page for a law firm website

Please sign up for our newsletter below to get updates on this series.