Back to portfolio
Legal

Almeida & Costa Advocacia

Corporate website with UI/UX and a PHP WordPress theme built from scratch

My role
UX/UI Designer · Full Stack Developer
Almeida & Costa AdvocaciaAlmeida & Costa Advocacia
01

Context

Almeida & Costa is a corporate and advisory law firm in Belo Horizonte, with in-person and online service nationwide. I led the project end to end: from the interface concept and user experience to building the website, with a custom PHP WordPress theme integrated with the firm's admin panel.

Client
Almeida & Costa Advocacia
Category
Legal
Roles
UX/UI Designer, Full Stack Developer
Technology
WordPress, PHP
02

Problem

In law, clients choose a firm before the first contact, and the website is where that choice begins. A site that looks like any other firm doesn't present practice areas clearly, doesn't prove experience and doesn't make the next step obvious. The result is a visitor who leaves without understanding why they should trust that firm.

03

Goal

Create a website that conveyed authority without feeling distant, organized the practice areas in an easy-to-understand way and guided visitors to get in touch. All in a WordPress site the firm could update on its own without relying on a developer.

04

Process

Page architecture: the sequence follows the questions clients ask. Who are you (hero and numbers), why trust you ("Law with a business mindset"), what you do (practice areas), how you work ("Before the lawsuit, there's the strategy"), what you've done (experience and testimonials) and what the next step is (contact).

A hero with immediate proof: the headline "Legal strategy for decisions that matter.", a single button ("Schedule a conversation") and, right below, a bar with the firm's numbers: years in practice, cases handled, returning clients and nationwide service.

Practice areas in cards: Corporate & Contracts, Civil & Litigation, Employment Law for Businesses and Family & Estates, each with a photo, a plain-language summary and a link to the area's page. Instead of legalese, visitors find their own problem.

What sets them apart and their experience: the three-step method (Analysis, Prevention, Action) explains how the firm works, and the cases (contract restructuring, shareholder dispute, internal policy compliance, succession planning) show results in practice, followed by client testimonials.

Full stack development: I built a PHP WordPress theme from scratch, faithful to the layout and responsive. Practice areas, cases, testimonials and content are managed from the admin panel, so the firm updates the site on its own, and contact buttons appear in every section.

05

The website, section by section

Each section of the home page answers a client question and leads to the next.

  1. 01 / 07

    The top

    The firm's promise in a single headline, "Legal strategy for decisions that matter", with a single button: "Schedule a conversation". Right below, the numbers bar (years in practice, cases handled, returning clients, nationwide service) proves what the headline promises.

  2. 02 / 07

    Why trust them

    "Law with a business mindset": in a few lines, how the firm works, with a real photo of a client meeting instead of generic courtroom images.

  3. 03 / 07

    What they do

    The four practice areas in cards with a photo and a plain-language summary. Visitors find their own problem without having to understand legalese.

  4. 04 / 07

    How they work

    "Before the lawsuit, there's the strategy": the three-step method (Analysis, Prevention, Action) explains what sets them apart before any case.

  5. 05 / 07

    What they've done

    Real cases by area (contract restructuring, shareholder dispute, internal policies, succession planning), each with its year, to show results in practice.

  6. 06 / 07

    In the client's words

    A testimonial from a business client, with her title and type of company, closing the proof before the invitation.

  7. 07 / 07

    The next step

    "Your next step starts with a good conversation": the final invitation on a dark background, with the same button as the top, and the footer with the city and in-person and online service.

Visual System

Navy and gold for authority with elegance: navy brings the seriousness expected of a law firm, gold marks highlights and buttons, and light backgrounds keep reading easy between the dark sections.

Palette

Navy Blue

#0B1A25

Hero, dark sections and footer

Light Gold

#E7CC8F

Primary buttons, such as "Schedule a conversation"

Gold

#E9C181

Highlighted words in headlines

Bronze

#A5844F

Buttons on light backgrounds and differentiator icons

Off-white

#F5F5F3

Light section backgrounds

06

Takeaways

In law, trust is built in the right order: first the proposition, then the proof, then the invitation. And being the same person in design and code made the WordPress theme faithful to the layout and easy to edit, which is what keeps an institutional site alive after launch.