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). Round 2 (B1–B6) changes the
structure itself; round 3 (C1–C6) removes the heading and the copy as well, so the first screen
carries the services and nothing else.
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 many h1s — in the built page it is the h1.
Round 3 is the exception, and it has an answer: see the note above C1.
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.
Round 3 — the services and nothing else
These six go one step further than round 1: no page heading, no sentence of copy and no button anywhere on the first screen. The only words above the fold are the five practice-area names and, where the layout has room for it, each one’s own detail line. The site header — logo, navigation, phone number — stays, because that is site chrome rather than hero copy; if it should go too, that is a separate decision and I can draw it.
“No h1 in the hero” and “no h1 on the page” are two different things, and only the first one is being asked for here. The heading does not have to sit at the top: it can move down to the first section under the services — the band that introduces the firm — and the page still has exactly one descriptive h1. Nothing is lost for accessibility, because a screen reader reaches the heading by structure and not by position, and nothing is lost for search, because what an h1 is worth comes from what it says rather than from how high on the page it sits. What is lost is the sighted visitor who does not already know the firm: on the first screen of every option below, the page never says who these people are, where they practise, or what it costs to call them. That is the actual price, and it is a business decision rather than a technical one — so it belongs to the client, stated plainly, not buried. The one thing I would not ship is a page with no h1 anywhere, which is what the competitor example appears to do and what the current homepage already does. That is defect #1 on this rebuild; do not let round 3 quietly re-create it.
With the copy gone, the photographs are the whole argument. Four of these six ask five images to carry the entire first screen, and those images are 411–600px wide today — C1 asks a 500px picture to fill a 607px column. C5 is the only round-3 option that needs no photograph at all.
C1Five gateways, and nothing elseno hero · no h1Five full-height photographic columns fill the whole first screen — 607px, exactly the viewport under a 93px header on a 700px-tall laptop window. Each column carries its practice name and its sub-line. There is no strip above and no band below: the first thing under the header is a service, and the last thing on the screen is a service.
The purest reading of the brief on this sheet. It is S3 with the paper band deleted, and deleting it is what makes it qualify — S3 still explained itself underneath. The photography problem is at its worst here: a 500px image has to hold a 607px column, so every one of the five will be soft until it is re-shot or licensed. Do not judge these pictures; judge the shape.
C2The competitor page, taken exactlyno hero · no h1S1 with the title strip removed. The 5×2 checkerboard begins at the bottom edge of the header and the page has no other words on the first screen. Two rows of 256px = 512px, so both rows are visible at once.
This is literally the page the client pointed at, in League and Williams’ type and colour. If the conversation is “show me what they asked for, with nothing added,” this is the specimen — and it is worth showing precisely because it makes the missing heading visible rather than theoretical. Five words and five detail lines is everything the page says about the firm.
C3Asymmetric mosaicno hero · no h1A two-column lead tile for the largest practice and four ordinary tiles beside and under it, in two 300px rows — 600px, edge to edge, names and sub-lines burned into the photographs.
The checkerboard without the checkerboard’s biggest weakness: C2 alternates picture and paper so half the screen is white, while this fills the whole frame with photography and still shows all five. It carries B2’s claim in a milder form — injuries is bigger than the rest — so the firm still has to agree with that before it ships.
C4The comb, alone on the screenno hero · no h1 · names onlyB4 with the title strip gone: five hexagonal photo tiles interlocked, three above and two below, the two lower ones landing on the midpoints of the three above (302px tall, pitch 0.75×302, so the overlap is exactly 75.5px).
The most distinctive option on the whole sheet and the one that uses the firm’s own mark structurally. It is also the emptiest: a hexagon has no room for a sub-line, so with the heading removed as well this screen contains five words in total — Injuries, Estates, Business, Marine, Real Estate. Everything else a visitor might want is below the fold. Choose it with that stated out loud, not by accident.
C5The names are the layout — no photographsno hero · no h1 · no imagesFive rows, hairline between: the practice name set at 44px on the left, its sub-line on the right, a hexagon marker at the end. No numerals, no heading, no pictures.
My pick of round 3. Every other option here answers “no hero, no copy” by making the photographs carry the page — which hands the whole first screen to five images that do not exist yet at the size they are being asked to fill. This one owns the constraint instead of hiding it: if the page is going to say only five things, then set those five things large enough to be the design. It is also the only round-3 option that could be built this week, and the only one that reaches mobile without a decision.
C6Cards crossing their own photographsno hero · no h1Five photographs, 430px tall, each with a white card pulled up over its bottom edge carrying the orange rule, the name and the sub-line. The cards sit on the pictures rather than under them.
The crossing that made B5 work, applied without a band to cross — here each card overlaps its own photograph. It reads as five objects instead of five slots, and unlike C1 and C4 the words sit on white, so the names hold at any photograph quality. The trade is 60px of every picture spent under a card; frame the subject high.
