QLegal Website Design

Live Website
HTML/CSS/JS · Responsive layouts · Cross-browser testing (BrowserStack)
QLegal — law firm, Poznań & Szczecin
2019

Design and frontend for a Polish law firm — thirteen practice areas and two offices on a single page, still live seven years on.

The brief

A regional law firm with two offices needed a website that would do the work a first meeting does: establish that this is a serious practice, show what it handles, and make it obvious who to call. The firm covers an unusually wide range — thirteen practice areas, from commercial and IP law to veterinary and foreign-currency mortgage claims — and operates from two cities, neither of which is a branch of the other.

The audience is a person with a problem they may not know how to name. They don't arrive looking for "restructuring proceedings"; they arrive worried about their business. The site had to let them recognise their own situation and find the person who handles it, without reading through a firm's worth of legal language first.

What I did

  • Designed the full visual identity of the site — colour, typography, layout system, card and modal patterns
  • Designed a custom icon for each of the thirteen practice areas
  • Built the frontend in HTML, CSS and JavaScript — no framework
  • Built the modal system: nineteen overlays in total, thirteen practice areas and six lawyer profiles, with arrow navigation between them
  • Structured the whole site as a single page with anchor navigation
  • Implemented the click-to-reveal mechanism for phone numbers and email addresses
  • Integrated Google Maps for both office locations
  • Built responsive layouts and tested rendering across browsers and devices in BrowserStack

What the site had to do

Establish credibility before anything is read. Navy and gold, generous whitespace, restrained type — the visual vocabulary of legal and financial practice. The homepage opens with almost nothing on it: logo, name, credentials, a three-word promise. For a firm, restraint reads as confidence.

Make thirteen practice areas navigable. Presented as a card grid with a custom icon for each — commercial law, IP, sport, public procurement, veterinary, CHF/EUR/USD mortgage claims, compensation, restructuring, new technologies, employment, family and inheritance, criminal. As a text list this would be a wall; as an icon grid a visitor finds their own situation at a glance.

Answer the two questions a prospective client actually has. Each card opens in place, and every one follows the same three-part structure: who we help, who will handle your case, and what we do. Same order every time, so the visitor reads it once and knows where to look after that. Arrows move between areas without closing and reopening.

Introduce the lawyers as people. Six portraits, shot consistently, split by office — Poznań and Szczecin. In a profession where the relationship is the service, a face and a name do more than a credentials list.

Serve two cities equally. Both offices get identical treatment: team, address, embedded map, contact details. Neither reads as the branch.

Keep contact details out of scrapers' reach. Phone numbers and email addresses aren't in the markup on load — the visitor reveals them with a click. A small thing that keeps a public law firm's inboxes usable.

Design decisions

  • Gold used exactly twice — the active navigation state and the rules beneath headings. Nothing else on the site is gold, so the eye always knows where it is.
  • Photography desaturated and tinted navy behind the practice grid, so white cards stay legible over it without a scrim or heavy shadow.
  • One modal structure, thirteen times. The same headings in the same order in every practice area — the pattern that lets a visitor compare two areas without re-learning the layout.
  • Anchor navigation, no page loads. Five sections on one URL. Nothing to wait for, and no way to get lost.

RESULT

Built in 2019 and still live and unchanged seven years later, serving as the firm's primary point of contact. The single-page structure absorbed everything a twenty-page site would have carried — thirteen practice areas, six lawyer profiles, two offices — on one URL, and the firm has extended it since with additional language versions without the underlying build being touched.

Live URL https://qlegal.pl/

Get in touch

Let's work together. Submit your details in this form and I will get back to you ASAP.

Thank you!

I’ll contact you soon. 

Oops! Something went wrong while submitting the form :(