The first screen — hero, or straight to the services?
The client has said they do not want a hero and would rather show the practice areas immediately,
and pointed at a competitor whose homepage opens on a checkerboard of service tiles. Six options below:
three that take the request literally (S1–S3) and three that keep a recognisable opening while
still putting all five services on the first screen (H1–H3).
The one thing that is not negotiable. “No hero” is a decision about layout. It is not a
decision about the page heading — a homepage still needs an h1 that says who the firm is
and what it does, and the competitor page in the example does not appear to have one. That is already
logged against this rebuild as defect #1: the current League and Williams homepage has an empty
h1. Every option below carries a real heading, including the ones with no hero; in S1 it is
one quiet line, in S2 it is a tile of the grid. In these specimens the element is drawn as a paragraph so
that this sheet does not carry seven h1s — in the built page it is the h1.
Where the words come from. The heading and the sentence use only facts already verified for this
rebuild: six offices in British Columbia (confirmed in the database — the live site’s band names
five), 160+ years of combined experience and the free consultations for injury and estate litigation
(both the firm’s own LaW Facts). The sub-line under each service is the Armstrong-style detail line.
- Injuries, Estates, Real Estate — taken from the real child pages in the database.
- Business and Marine have no sub-pages at all, so those two lines are new copy I derived from
their existing descriptions. They need the firm’s sign-off before they are published.
Two things every option here is standing on that do not exist yet.
The five practice photographs are 411–600px wide and are not assigned to a practice area anywhere —
the pairing is inferred from their filenames. Any option that puts a photograph in a tall or wide tile is
showing you a layout, not a picture; S3 in particular asks a 500px image to fill a 520px column.
And the five icons are 93×107 raster PNGs with the brand colour baked in, so H3’s icon row cannot be
recoloured or put on a dark ground until they are redrawn as SVG.
S1Checkerboard — the client’s example, in brandno heroThe shape Armstrong Legal uses, rebuilt in League and Williams’ type and colour. Five text cells and five photographs alternate across a 5×2 grid, and the grid starts 92px down the page — the services are the first thing on the screen. The page heading is a single quiet line above it.
Victoria lawyers for injury, estates, business, marine and real estate.
Free consultation · 250-888-0002The client’s request, taken literally. It answers “no hero” exactly, and it is the option to show them if the point is to prove you listened. What it gives up: there is nowhere to say what the firm does, for whom, or why — a visitor who does not already know one of the five words gets nothing.
S2Checkerboard with the opening inside the gridno hero · has h1The same checkerboard, with the first two cells given over to the page heading, one sentence and the call to action. No separate hero block exists — the opening IS one tile of the service grid.
Victoria lawyers for injury, estates,
business, marine and real estate.
Six offices across British Columbia. More than 160 years of combined experience. Free consultations for personal injury and estate litigation.
Book a free consultationor call 250-888-0002Injuries
Car, Motorcycle, Cyclist & Pedestrian Claims, Slip and Fall, Dog Attack
Estates
Estate Planning, Administration & Disputes
Marine
Boating Accidents, Seizures, Anchoring & Mooring
Business
Starting, Buying, Selling & Restructuring a Business
Real Estate
Buying & Selling a Home in BC
My recommendation. It satisfies both halves of the brief in one structure instead of stacking a hero on top of a grid: the services still start at the top of the screen, and the page still says what it is. Everything above is real: six offices is in the database, 160 years and the free consultations are the firm’s own LaW Facts. The cost is countable: the opening eats two cells, so only three of the five services keep a photograph — business and real estate appear as text only. That is a real decision, not a drawing artefact, and it is the one thing to look at before picking this.
S3Five gateways, heading underneathno heroFive full-height photographic columns fill the first screen, one per practice area, each with its name and its sub-line. The heading and the sentence sit in a paper band directly beneath — still on the first screen at 900px, but after the services, not before them.
Victoria lawyers for injury, estates, business, marine and real estate.
Six offices across British Columbia. More than 160 years of combined experience. Free consultations for personal injury and estate litigation.
The most confident version of “straight to the services”. Its weakness is the photographs: five 500px images have to hold a 520px-tall column each, so they will be soft. These columns need new photography or licensed stock before this option is real.
H1Split — opening left, service mosaic righthero · services above the foldThe first screen is halved: a proper opening on the left (heading, sentence, button), the five services as a photo mosaic on the right. Both are complete, neither is a strip.
Victoria lawyers for injury, estates,
business, marine and real estate.
Six offices across British Columbia. More than 160 years of combined experience. Free consultations for personal injury and estate litigation.
Book a free consultationSix offices in British Columbia · free consultations for injury and estate litigation
The conventional answer, and the one that gives the heading the most room. It is also the one the client is most likely to recognise as “a hero” and object to — the left half is exactly the thing they said they did not want.
H2Heading band, then a full-width service rowhero · services above the foldA 150px paper band carries the heading and one line of copy; the five services run full-bleed underneath as a single row of photographs, 300px tall.
Victoria lawyers for injury, estates, business, marine and real estate.
Six offices in British Columbia · 160+ years of combined experience · free consultations for injury and estate litigation.
A compromise with a clear logic: the heading gets one band, the services get everything else. The row of five is where the design risk sits — at 256px wide each, a photograph is a texture, not a picture, so these want to be simple images.
H3Short hero (320px) + icon rowhero · services above the foldA real photographic hero, but only 320px tall, with the five practice areas as an icon row immediately beneath. Header 93 + hero 320 + row ~202 = ~615px, so all five services sit above the fold on any laptop.
Victoria lawyers for injury, estates,
business, marine and real estate.
Six offices in British Columbia · 160+ years of combined experience · free consultations for injury and estate litigation.
Book a free consultationThe conservative option: it keeps a hero, and answers the client’s real complaint, which is almost certainly “I had to scroll past a giant photo to find out what you do” rather than “heroes are wrong”. Uses the existing raster icons — they are 93×107 PNGs and will need to be SVG before this ships.
Round 2 — different shapes
Round 1 answered the brief with two ideas: a checkerboard and a hero. These six change the structure itself. B1 abandons the grid, B2 stops treating the five practice areas as equals, B3 drops photography altogether, B4 builds the layout out of the firm’s own hexagon, B5 makes the cards cross the heading band’s edge, and B6 turns the services into the ground the heading floats on. The provenance and photography warnings at the top of this sheet apply to all six — except B3, which is the one option that needs no photograph.
B1Alternating bands — one service at a timeno heroNot a grid at all. Each practice area gets a full-width 210px band, photograph on one side and name, sub-line and a link on the other, the side flipping each time. The heading is one line above the first band.
Victoria lawyers for injury, estates, business, marine and real estate.
Free consultation · 250-888-0002The only layout here that gives each service room to say something. Five bands are 1,050px, so the first screen shows the heading and about three and a half of them — the reader learns what the firm does by scrolling, not by scanning. Pick this if the sub-lines are going to grow into real sentences; reject it if the client’s complaint was about scrolling in the first place.
B2One tall lead beside a 2×2no heroA 426×530 lead tile for the main practice, the other four in a 2×2 beside it. Heading, one line of copy and the button sit in a band above.
Victoria lawyers for injury, estates, business, marine and real estate.
Six offices in British Columbia · 160+ years of combined experience · free consultations for injury and estate litigation.
The practice areas are not equals — injuries is the firm’s largest practice and the only one with sixteen sub-pages in the database. Every other option on this sheet gives all five the same weight, which is a claim about the business that nobody has actually made. This one takes a position. It needs the firm to confirm the ranking before it is honest.
B3Typographic index — no photographs at allno heroFive numbered rows: numeral, practice name at 31px, sub-line, a hexagon marker. Hairlines between. No images anywhere.
Victoria lawyers for injury, estates, business, marine and real estate.
Six offices in British Columbia · 250-888-0002The only option on this sheet that is not standing on photographs that do not exist. It could be built and shipped this week, it is the fastest first screen of the twelve, and it degrades to mobile without a single decision. It is also the plainest — if the firm wants warmth on the homepage, this is not it. Numerals are #A94A29, not brand orange: an orange numeral is a word carrying brand colour at 3.03:1, which is the rule this project already set.
B4Honeycomb — the brand mark as the layoutno heroFive hexagonal photo tiles interlocked as a comb, three above and two below, names inside the shape.
Victoria lawyers for injury, estates, business, marine and real estate.
Free consultation · 250-888-0002The most distinctive of the twelve, and the only one that uses the firm’s own mark structurally rather than as decoration. Two costs, both real: the hexagon crops a photograph hard, so images need a subject dead centre with room around it; and there is no room inside the shape for a sub-line, so B4 shows five names and nothing else — the detail the client’s example page leads with is gone.
B5Heading band, cards crossing its edgehero · services above the foldA brown heading band, and the five service cards pulled up 96px so they cross its bottom edge — half on the band, half on the page below.
Victoria lawyers for injury, estates,
business, marine and real estate.
Six offices across British Columbia. More than 160 years of combined experience. Free consultations for personal injury and estate litigation.
The crossing is what makes it work: the cards belong to the heading rather than following it, so the eye reads them as one unit instead of two stacked blocks. Photograph, name and sub-line all survive at 232px per card. This is my pick of round 2.
B6Photo wall with the heading floating on ithero · services above the foldThe five practice photographs fill the first screen as a 560px wall, and the heading sits on a white card floating in the middle of it.
The most dramatic and the least defensible. The card covers the centre of five photographs, so the wall is texture — and four of the five names sit in the corners where nobody reads. Worth showing the client because it makes the point that “services first” and “a strong opening” are not actually in conflict; worth arguing them out of picking it.
