Kilgore Studios

Solutions Behind the Dreams

Designing the Home Page Hero

We started the home page hero with a rough first pass: a centered "Kilgore Studios", the tagline under it, one sentence about what we do, and a button. It was readable and told a visitor nothing about the work.

The first pass: the company name as a heading, the tagline, one sentence, and a Get in Touch button on black.
Figure 1. The rough first pass.

We improved it in rounds: the layout first, then the picture, then the details.

Three directions

We kept the black background and blue accents and added a wall of code behind the page, drawn as SVG. Then we tried three layouts for it.

The first, "code horizon", tilts the code back like a floor that fades into a blue glow. The second, "source view", sets the headline on the left and a code editor on the right showing the hero's own markup.

The third, "big type", sets the tagline at 128 pixels in the heaviest weight, with the code wall tilted behind it on the right.

A large logo and a two-line headline centered on black, with two buttons and code tilted back like a floor below them. Code horizon
A headline and two buttons on the left, and an editor window on the right showing the hero's HTML. Source view
A very large three-line headline on the left, with tilted code fading in from the right. Big type
Figure 2. The three directions: code horizon, source view, and big type.

We liked big type with the code wall. We did not want the company name or the tagline as the giant headline, so we asked for imagery in that spot instead. Both are already in the header.

Four pictures

We drew four options, each at the same size so they could be swapped without moving anything else. Floating windows shows a site being designed next to its code and an app dashboard. The device set shows one small site on a laptop, a tablet, and a phone. The isometric stack draws four layers of a project: hosting, data, code, and design. The automation flow runs from an old terminal through a few process steps to a modern dashboard.

Three overlapping windows: a web page with a selection box on its headline, a line-chart dashboard, and a code editor. Floating windows
A laptop, a tablet, and a phone showing the same small site, with small interface widgets to the left and right. Device set
Four isometric slabs rising from lower left to upper right: server racks, database cylinders, code rows, a page wireframe. Isometric stack
A terminal on the left, a flow of gear, database, document, and check icons, and a phone dashboard on the right. Automation flow
Figure 3. The four pictures: floating windows, device set, isometric stack, and automation flow.

We picked the device set, and liked the stack because it showed everything we do. So we combined them: the devices in front as finished products, with the stack layers behind them, quiet enough that the screens stay the focus. We drew the layers as flat sheets fanning out behind the laptop, since isometric slabs next to front-facing devices mixed two drawing styles.

The laptop, tablet, and phone in front, with three darker sheets behind the laptop, each showing a thin strip of icons.
Figure 4. Devices in front, layers behind.

Rounds of adjustment

We wanted more of each sheet to show, about twice the strip, and a few small widgets on the empty left side.

The same composition with wider sheet strips behind the laptop and four small widgets at the left.
Figure 5. Wider strips and widgets.

The left side then looked busy against the devices, so we dropped one widget and spaced the other three evenly. We also removed the design sheet and kept code, data, and hosting. The hosting sheet was nearly black, so we lightened its body and gave the racks a brighter outline. Its outline against the page went from 1.25:1 to 2.16:1, and the rack outlines against the sheet from 1.13:1 to 3.15:1.

Three widgets stacked evenly at the left, with three sheets behind the laptop and a clearer outline on the rearmost.
Figure 6. Fewer widgets, lighter hosting sheet.

The last round made the three sheets show the same amount (52 units each in the 1300-unit drawing, about 40 pixels on a wide screen), centered the database icons, widened the server racks from 24 to 36 units, and set the HTML tags in the code wall in bold. The bold is faint because the wall is tilted and dim, but it adds some texture.

The final hero: devices in front of three sheets, widgets at left, a headline sentence, two buttons, and a pause button.
Figure 7. The final design.

Limits we kept

Contrast

We hold text to WCAG 2.2 AA, which is 4.5:1 for normal text. Code behind text is the risk, so we computed the worst case by putting the brightest part of the wall, under the blue beam, behind every pixel of text. The headline still reaches 8.71:1 there. Measured on the rendered page at 1440 pixels wide it is 18.9:1. The art itself never sits behind text. It is an image above the headline, and we checked at five widths from 320 to 1440 pixels that no line of text overlaps it.

Motion

The code wall moves one 600-pixel tile every 80 seconds, about 7.5 pixels per second. A "Pause background" button stops it, and its label changes to "Play background". With reduced motion set in the operating system, the wall stays still and the button is hidden. Without JavaScript the wall also stays still.

One visible heading

The sentence under the art is the page's h1. We did not use a hidden "Kilgore Studios" heading, because sighted keyboard and voice users would not see what screen reader users hear.

Drawn, not photographed

The art is original SVG, about 12 KB (2 KB compressed), and the code wall is another 5 KB. They stay sharp at any zoom, and no text sits inside an image.

Back to all posts