Watercolour meets code: hand-painted art on a fast website

Most business websites look alike because they are built from the same templates and the same stock photos. Our new homepage starts from something no template has: original paintings by our artist, Klaudia Polakowska. Our motto for it is short. Painted first, coded second.

A painting in layers

The watercolour in our homepage header, Sunset on the beach, is not one flat image. We cut the sea away from the sky and placed it on its own layer, with a soft feathered edge so the join cannot be seen. When you move the mouse or scroll, the sea moves slightly more than the sky. Your eye reads that difference as depth, and the painting seems to open up like a window.

Around it we added light and shape:

• a warm glow and a slow light sweep across the sky,
• soft colour shapes that drift behind the frame,
• a hand-drawn horizon line and “light source” note, the kind of guides a painter sketches before starting.

A studio wall that moves

Further down, the “From the studio” strip shows six of Klaudia’s paintings, from a mountain lake and a marina to a waterfall and Bristol Cathedral. On a computer the strip slides sideways as you scroll down the page, and each painting drifts gently inside its frame. On a phone it becomes a simple row you swipe with your thumb.

Each caption shows the real file behind the picture, for example Watercolour, 720 by 490, 62 KB WebP. That is the engineer’s half of our motto: every painting in the strip weighs between 14 and 86 KB.

How we keep it fast

Art and animation have a reputation for making websites slow. These rules keep ours quick:

1. Modern image files. Paintings are saved as WebP at the size they are shown, not as huge originals.
2. Space reserved in advance. Every image has its width and height set, so nothing jumps while the page loads.
3. Motion that the graphics chip can handle alone. The effects only move and fade things (transforms and opacity), which the browser can do without recalculating the page.
4. Nothing runs off screen. Each effect starts only when it scrolls into view and stops when it leaves.
5. Respect for reduced motion. Visitors who have asked their phone or computer to reduce motion see the finished artwork, still and calm.

New on the homepage

We also added a few things that make the first visit more alive:

• the last word of the headline rewrites itself, from found to seen, chosen and loved,
• small specks of light float through the header and scatter around your cursor,
• a band of our services slides past and speeds up as you scroll,
• highlighter marks draw themselves under headings as you reach them,
• a progress bar along the top shows how far through a page you are.

Your own art on your website

You do not need to be an artist to use art on your website. We can work from your photos, your premises or your products, or Klaudia can create original illustrations for your brand. See our content and artwork service, our photography, or try the effects yourself in the playground.