Create a Law Firm Web Design


How to Create a Homepage for a Lawyer.

Designing a website for a law firm is a pretty difficult job. But today I decided to make it easy and make a design using the basic layout we use for any business website.

The secret of creating a satisfying web design lies in realizing the needs of your clients.
I realized that the clients need a website which is easy to navigate, and interacts with their clients in a simple way. So I made a design where a visitor should never find himself lost.


A blank document, size of your choice, resolution 72. We do this every time :)



Lets come towards the Background, fill the background with Black color and add some noise.
Go to Filter>Noise>Add Noise.



Choose the Smooth brush with white color and create a stroke on the background using 66% opacity.



Choose the Rectangle Tool, draw the shape and fill it with plain white color.



Now fill this Gradient in the shape.



Now we should have this result.



Add the Logo. I just typed in “Law Firm”



Now I’m creating Navigation Bar. Choose the Rounded Rectangle Tool, draw the shape and fill it using solid black color.



I placed some routine words and menu buttons.


Step 10

And our header is ready.

Creative-Design-of Template

Step 11

Time now for the Featured area. Choose the Rounded Rectangle Tool, Draw this shape and fill it with white color.
Apply the 2px stroke of color #646464


Step 12

Apply the Drop Shadow on featured area. You can add the stroke and shadow by right clicking on the layer and clicking Layer Styles.


Step 13

Featured area needs a picture picture. You can use Clipping Mask technique to cut off the unnecessary parts.
To create a clipping, mask right click on the shape layer and click Create Clipping Mask.


Step 14

This is what we have made so far.


Step 15

Now let’s create a content/links area. We are designing this template on the base of routine a business template.
Choose Rounded Rectangle Tool. Draw the shape and fill it with white color. Apply the 2px stroke of color #646464.


Step 16

Add some text, heading and picture. You can use Clipping Mask technique to cut off the unnecessary parts of picture. You should get the following result.


Step 17

Choose the Rounded Rectangle Tool, Draw the shape and fill with Gradient in Link Button. This button usually holds the text “Read More” or “Continue”.


Step 18

After adding Image1, Image2, Image3 in the three boxes, we got this.


Step 19

What we have made so far.


Step 20

Choose the Single Row Marquee Tool, draw the shape and fill with white color. This is only to create a separator line.


Step 21

Now we are creating a welcome area. I create this in all my templates. This is a place where the website owner can say a hello to its visitors, or it can also be used to give a link to an important article.
Choose the Rectangle Tool fill with whit color and apply the stroke 1px of color #646464.


Step 22

Add a picture and some text in this area.


Step 23

How about some links to Latest News area. You can even make this a Testimonials kind of area but lawyer sites don’t have testimonials. Lawyer sites might have Success Stories, you might use this area for that, its your choice of course.
Choose the Ellipse Tool, draw the shape and fill with Solid black color, this will be our bullet.


Step 24

This is our Content Area.


Step 25

Time for Footer Area. First we complete the Legal Topics area. This will hold links to all (or at least most prominent) of our pages. This is a kind of mini sitemap.
Choose the shape and draw this shape as bullets.


Step 26

Add links… checked!


Step 27

A contact form right in the footer, so user won’t have to navigate to the contact page.
Choose the Rounded Rectangle Tool draw these shapes.


Step 28

After this, we draw the submit button in the email area. Choose the Rounded Rectangle tool and draw this shape


Step 29

Apply gradient in the submit button.


Step 30

This is our Footer.


Final Result

Yahoo!…. We’ve done it again 🙂


create free website wix below post

Further Related Readings

  1. Irfan June 2, 2012 at 12:41 pm

    very well explained… really appreciate.. Thanks.

    1. Jawad June 5, 2012 at 2:44 am

      appreciate your comment. You’re welcome 🙂

  2. sutopo June 3, 2012 at 9:27 pm

    help to make web design…!
    I like forever Web design…

    1. Jawad June 5, 2012 at 2:44 am

      what kind of help dear?

  3. Muhammad Irfan Sumra June 5, 2012 at 12:35 am

    very good, well explained. what about converting it into HTML5 and CSS3??

    1. Jawad June 5, 2012 at 2:43 am

      Yes, you’ll have it published this Friday 🙂
      I’m working on it and its almost complete.

      1. Muhammad Irfan Sumra June 6, 2012 at 12:26 am

        thanks alot, its very helpful. why don’t you write an ebook for designing websites in photoshop/fireworks and converting them into HTML5 and CSS3???

        1. Jawad June 13, 2012 at 6:08 am

          This is an excellent suggestion, and you shouldn’t be surprised that we’ve been working on such an ebook for over a month, but the problem is that we just launched our three subdomains, and and we are so buried with their work that its just impossible to find time for the ebook, otherwise it would have been published by now.
          Thank you for the suggestion and being such a kind reader.

  4. jimmy June 27, 2012 at 3:18 am

    Such a useful tutorial you explain it very well.I appreciate your great effort to make this tut and share here with us..Its been very helpful for the newbies..Thanks..

    1. Jawad June 28, 2012 at 6:12 am

      Thanks for the comment Jimmy!
      I’m really glad that it was helpful for you.

  5. hiren lad August 30, 2012 at 12:17 am

    good tutorial for beginner…Thank you …

    1. Jawad August 30, 2012 at 12:35 am

      you’re most welcome dear 🙂

  6. Labib February 19, 2013 at 9:15 am

    Hi there,

    really cool attractive design and easy to follow. Just wondering what font did you use for the logo.

    Many thanks.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved