← {Portfolio}
{Case: 07}

SBU

A website for a builder of business parks, drawn on vertical construction lines. Text and images had to meet those lines exactly, down to the pixel.

{Client}
SBU Park
{My role}
Front-end & WordPress development
{Stack}
WordPress, CSS, JS, PL / EN
{Design}
[Designer / agency]
{Year}
[YEAR]
{Live}
sbu.pl ↗
{sbu.pl}
SBU home page

{Brief}

A design with its grid in plain sight

Most grids stay hidden, so a small slip goes unnoticed. Here the columns are drawn on the page as thin vertical lines, like on a construction drawing. If a paragraph or a photo missed its line by even a pixel or two, anyone could see it. [Adjust to the real brief.]

{What I did}

  • Built the design in WordPress at pixel-perfect accuracy
  • Aligned text, buttons and images to the visible line grid
  • Carried the same grid through the dark and light pages
  • Set up the Polish and English versions

{Highlight: Pixel perfect}

Text that meets the line, with 0 px to spare

Seven lines divide the page into eight equal columns. Turn on the guides to see them highlighted over the real page. The zoomed views below show how the content sits against them.

{Home} — the layout hangs on the same seven lines
{Home} — the layout hangs on the same seven lines
{Zoom A} — the paragraph and button start right after one line, the photo right after the next
{Zoom A} — the paragraph and button start right after one line, the photo right after the next
{Zoom B} — the photo ends on one line, the justified paragraph on another
{Zoom B} — the photo ends on one line, the justified paragraph on another

{Measured on the 1720 px screenshot}

215 px

Spacing between lines, identical on the dark and light pages I measured.

x 430

The paragraph and button start on the first pixel after the line at x 428–429.

x 859 | 860

One photo ends on the centre line at x 858–859, and the other starts on the next pixel.

x 1289

The justified paragraph ends exactly on the line at x 1288–1289.

{Key features}

{01}

Visible line grid

The vertical lines run behind the content from the header down to the footer.

{02}

Dark and light pages

Home, technology and executions are dark, and the other pages are light, all on one grid.

{03}

Executions

Finished parks with key facts, a description and an image slider, alternating left and right.

{04}

Technology story

An explanation of the energy-efficient building, with a cross-section render and a film.

{About us} — the same lines on a light background
{About us} — the same lines on a light background
{Services} — business lines with their own photo sliders
{Services} — business lines with their own photo sliders
{Executions} — finished parks, one after another
{Executions} — finished parks, one after another
{Technology} — a cross-section of the wall build-up
{Technology} — a cross-section of the wall build-up

{Full page}

Scroll the home page

Follow one line from top to bottom and watch the content attach to it section after section.

  • * WordPress
  • * Pixel-perfect CSS
  • * Dark + light pages
  • * PL / EN
{scroll ↓}
Full SBU page

{Technical notes}

[How the lines and the content share one grid, how alignment survives other screen widths, what happens to the lines on a phone, and how you checked the result against the design.]

{Takeaways}

[The hardest part of the project and what you learned from it, in one or two sentences.]

{mattstudio}

Thanks for
looking.

← {Back to portfolio}