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; rounds 3–5 (C1–C6, D1–D6, E1–E4) remove the heading and the copy as well,
so the first screen carries the services and nothing else. Round 5 rebuilds a reference layout
supplied by Adi.
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.
Round 4 — same rule, a different layout language
These six keep round 3’s rule exactly — no heading, no sentence, no button on the first screen — and change the shape vocabulary instead of the grid. A stair, a set of strips, five arches, a fan of cards, one photograph instead of five, and a tabbed panel. The h1 note above C1 governs all six of these as well.
Two of these answer the asset problem rather than dodging it. Every option in round 3 asks five photographs to carry a whole screen at a size the current 411–600px files cannot hold. D2 only needs a good horizontal band out of each picture, because a 120px strip crops away everything else; D5 needs one good photograph of Victoria and gives the five services white plates that hold at any quality. Those are the two that could be built against the library as it actually is.
Three of these six cannot treat the five practice areas as equals, and that is a decision the firm has to make, not a drawing. D1’s stair gives the top-left tile the reading position, D4’s fan has a front card, and D6’s tabs open on one and hide four. Injuries is drawn in the lead position in all three because it is the firm’s largest practice and the only one with sixteen sub-pages in the database — but nobody has confirmed that ranking, and until somebody does, these three are proposals about the business as much as about the layout.
D1Staircase — five tiles stepping downno hero · no h1Five 236×340 tiles across the screen, each one dropped 36px lower than the last, name and sub-line inside. The row descends left to right instead of sitting level.
The only option on the sheet where the five services are deliberately not equal in position — the eye starts top-left and is walked down the stair, which is a reading order rather than a grid. It costs geometry: the stair leaves triangular gaps of empty paper top-right and bottom-left, and it is the hardest of the twenty-four to make work on a narrow screen, where the stair has to collapse to a plain stack and the idea disappears.
D2Five strips — the name set across the pictureno hero · no h1 · names onlyFive full-bleed horizontal strips, 120px each, photograph running behind and the practice name set across the middle at 30px. 600px total, so all five sit on the first screen with nothing else.
The most cinematic option here and the kindest to the photographs that exist: a 120px strip only needs a good horizontal band out of an image, not a whole composition, so a 500px picture is genuinely enough at this height. That is a real practical advantage over C1 and D5. The cost is the same one C4 pays — a 120px strip has no room for a sub-line, so this screen shows five names and nothing more.
D3Arches — five doorwaysno hero · no h1Five portrait tiles with arched tops, standing on the paper like doorways, each with its name and sub-line on white beneath the arch.
A different shape vocabulary from everything else on the sheet — the hexagon is the firm’s mark, but the arch reads as a courthouse rather than a honeycomb, which is a legitimate thing for a law firm to look like. Unlike C4 the words sit on white, so they hold at any picture quality. It crops the top of every photograph to a curve, so a subject’s head cannot sit high in the frame.
D4Fanned cards — four turned edge-on, one openno hero · no h1 · one service leadsFive portrait cards overlapping like a hand of cards. Four show only a 108px edge with the name set vertically; the front card is fully open with its name and sub-line.
The most physical layout on the sheet, and the one that suggests there is more behind it — a fan implies cards you can pull. Two costs, both real. Vertical type is slower to read, so four of the five names are harder to scan than any other option here. And a fan has a front: this design cannot treat the five practice areas as equals, so like B2 it needs the firm to agree that injuries leads before it is honest.
D5One photograph as the ground, five plates on itno hero · no h1 · one imageA single full-bleed photograph fills the 600px first screen, and the five services sit on it as stacked white plates down the left third, each with a hexagon marker, its name and its sub-line.
My pick of round 4, on grounds of what actually exists. Every other option in rounds 3 and 4 asks five photographs to carry a screen; this one asks for one good photograph — Victoria, the building, the harbour — and gives the five names white plates that hold regardless. That is one photo shoot decision instead of five, and it is the option most likely to survive contact with the real asset library. What it gives up is the pictures themselves: no practice area gets an image of its own, so the visual argument is about the firm and the city rather than about the work.
D6Tabs — five names, one open panelno hero · no h1 · four hiddenThe five practice names run as a segmented bar directly under the header, and one 520px panel beneath shows the open one — its photograph, its name and its sub-line. Drawn here with the first tab open.
Car, Motorcycle, Cyclist & Pedestrian Claims, Slip and Fall, Dog Attack
The densest way to show five services in one screen without shrinking any of them: the open panel is full width, so its photograph is finally at a size the pictures can actually hold. The cost is the plainest on the sheet — four of the five services are hidden behind a click, which is close to the opposite of what the client asked for. It also needs JavaScript, so it must degrade to all five panels stacked when that fails; that fallback is a second layout to design, not a detail.
Round 5 — the reference layout, rebuilt for five
Adi supplied a reference: three columns, three different treatments — a photograph above a card, a card above a photograph, and one taller column where the words sit on the picture — on a warm card ground with rounded corners. Round 3’s rule still holds: no heading, no sentence, no button. The whole problem is that the reference holds three services and this page has five, and there are only three honest ways to solve it: squeeze the columns (E1, E3), keep the column width and take a second row (E2), or divide by four and give the fifth a different shape (E4). Each of those costs something specific, named under each option.
Two things in the reference are new to this project, and both are decisions rather than drawings. The card ground is a warm blush — #F4EFE9 here, checked by hand: the name reads at 9.50:1 on it, the sub-line at 4.66:1, which clears the 4.5 floor but leaves no room, so that sub-line never gets smaller than 11.5px. And the corners are rounded at 14px, which is the opposite instinct to the rest of this rebuild — the firm’s mark is a hexagon and every other option on this sheet has square corners. Rounded is perfectly defensible, but it has to be chosen for the whole page, not for one section.
In the reference, the tall column is the prominent one — so which services land in the tall slots is a ranking, whether or not anyone intended it. E1 puts them at positions 2 and 4, which in the ordinary practice order hands prominence to Estates and Marine, the two smallest practices. E3 makes the choice deliberate instead and puts injuries in the middle. Neither is right until the firm says how the five rank.
E1The reference, extended to five columnsno hero · no h1 · reference layoutAdi’s reference has three columns and three treatments: a photograph above a card, a card above a photograph, and one taller column where the words sit on the picture. Here that rhythm runs across five — card-under, tall, card-over, tall, card-under — with the tall columns standing 60px proud of their neighbours at top and bottom, exactly as the middle one does in the reference.
The most faithful reading. What five costs you is width: the reference’s columns are roughly 415px, five of them inside a 1280 page are 241px, and the description under each name drops to three or four lines of 11.5px. The other thing to look at before picking it: the tall treatment is prominence, and in this arrangement it lands on whichever two services sit in slots 2 and 4. Drawn here in the ordinary practice order, that is Estates and Marine — the two smallest. That is an accident of the pattern, not a decision, and it is the sort of accident a client notices.
E2The reference’s proportions kept — three, then two on their sideno hero · no h1 · two screensRather than squeezing five columns into the width, the top row IS the reference — three columns at 415px, the same shape as the image — and the two remaining services are laid on their side beneath as wide cards, photograph left and text right.
My pick of this round. The reference works because its cards are wide enough to read; E1 keeps the arrangement and loses that, while this keeps the thing that made it good and solves “five” by changing direction instead of shrinking. The cost is stated plainly: at 891px (34 + 520 + 18 + 186 + 40, plus the 93px header) it is the only option in rounds 3–5 that does not fit one screen — the bottom two services are half below the fold on a laptop. That is a real trade against C1/D5 and worth putting to the client as one: readable cards, or all five above the fold.
E3Centre-led — the tall column in the middleno hero · no h1 · one service leadsThe same five columns as E1, but the tall picture column sits in the middle where the reference puts it, and the four split columns flank it two a side.
Closer to the reference’s balance than E1 — one tall column, not two — and it fixes E1’s accident by making the prominence deliberate: the middle column is the lead, drawn here as injuries. That makes it the same proposal as B2, D1, D4 and D6, and it needs the same thing before it is honest: the firm has to agree that injuries leads. If they will not rank the five, E1 or E2 is the safer pick.
E4Four in the rhythm, the fifth laid across the bottomno hero · no h1Four columns at 306px keep the reference’s alternation, and the fifth service runs the full width underneath as a horizontal card, photograph left.
The other honest answer to “three into five”: do not divide the width by five, divide it by four and give the last one a different shape. Columns stay at 306px, which is close enough to the reference to keep the description readable, and the whole thing still fits one screen: 22 + 372 + 14 + 140 + 26 = 574, plus the 93px header = 667px. The cost is that the wide card at the bottom reads as an afterthought or an also-ran, so the service that lands there should be one the firm is content to place last — drawn here as real estate.
