We replaced an IT company’s website with one that loads before you can blink
Barsion runs managed IT for businesses across Europe — but its own site took almost eight seconds to show a single word. ICE WIND designed and built a bilingual replacement that renders in under half a second, works without JavaScript, and ships as a folder the client owns outright.
- Client
- Barsion
- Sector
- Managed IT services & technology consulting
- Location
- Tallinn, Estonia
- Live website
- barsionlimited.com
- Languages
- English / Estonian
Services
A slow site in a business that sells speed
The old site was a WordPress build with a page-builder and a stack of plugins: 90 network requests, 45 stylesheets and 29 scripts for one page. First contentful paint came at 7.7 seconds and the page kept loading for nearly a minute. A company whose pitch is “we keep your systems fast” was greeting visitors with eight seconds of blank white.
The design had the same problem as the performance: a grid of identical icon-and-paragraph cards, stock office photography, a blue-and-white corporate palette — competent, and indistinguishable from a thousand other IT outsourcers.
Three constraints came with the website redesign: two languages from day one, GDPR compliance for an EU company collecting enquiries, and a hand-over the client could host anywhere without touching the code.
One light source, and nothing that glows for decoration
We built the visual system around a single rule: cyan is a light source, not a fill. Every bright element has to be justified by where the light comes from — a lit hairline, a screen glow, an edge catching the light. No coloured drop shadows, no neon halos, no gradient on everything. That one rule is the difference between a page that looks engineered and a page that looks generated. Setting a rule like that early is how we start every web design project.
The palette is a near-black navy (#090F23) with pale cyan as the only accent, set in Geologica at weight 200 for headings — thin, wide, technical. Hairline rules do the structural work that cards and boxes usually do, so the page stays quiet until you interact with it. Photography is duotoned into the same two colours, so stock imagery never breaks the palette.
Everything included in the published project
- A full single-page site: hero, positioning statement, eight services, editorial statement panels, values, FAQ and contact — each section with its own rhythm rather than one repeated card grid
- Complete English and Estonian localisation, switched instantly without a page reload, every string held in a single dictionary
- A custom animated mascot masked into the page — no video rectangle, no visible border
- A contact form with real validation, honest states, honeypot and timing-based spam protection
- A GDPR privacy notice in both languages: controller, legal bases under Article 6, retention periods, data subject rights, and the route to the Estonian Data Protection Inspectorate
- Self-hosted, subsetted webfonts and self-hosted photography — the finished page makes zero third-party requests
- SEO and sharing: canonical, Open Graph and Twitter cards, JSON-LD Organization,
robots.txt,sitemap.xml - A portable handover package: no build step, no dependencies, a domain-configuration script and a written handover guide
The four decisions that shaped the site
Cyan as a light source, not a fill
Every accent had to be explainable as light hitting a surface. We removed every coloured blur and zero-offset shadow from the build and replaced them with radial gradients, solid marks and lit hairlines.A mascot that lives inside the page
The animated mascot is composited with three stacked CSS masks intersecting a linear falloff, with the clip’s black point matched to the page background — so the edges of the video simply stop existing.Progressive enhancement, all the way down
The page is fully readable with JavaScript disabled. The mascot never loads underprefers-reduced-motion, on Save-Data, or on a slow connection, and pauses the moment it leaves the viewport.
A form that never lies
The form validates and reports honestly rather than showing a “thank you” it can’t back up. A site that pretends to send is worse than a site with no form at all.
How the site is built
Hand-written HTML, CSS and JavaScript. No framework, no build step, no node_modules — the entire site is a folder you upload. Geologica ships as subsetted woff2 split by unicode-range, so a Latin-only visitor downloads only the Latin cut. Static delivery like this is our default for web development projects that do not need a CMS behind them.
The mascot is delivered as H.264 with a VP9 fallback, encoded as a ping-pong loop so it never visibly restarts, lazy-loaded through an IntersectionObserver and paused off-screen. Mask compositing uses standard mask-composite with a prefixed fallback gated behind @supports, so older Safari degrades to a simpler but still borderless mascot rather than a rectangle.
The same system at 390 px
Same domain, same company, measured again
| Metric | Before | After |
|---|---|---|
| First contentful paint | 7.7 s | under 0.5 s |
| DOMContentLoaded | 10.9 s | 0.49 s |
| Network requests | 90 | 12 |
| Stylesheets / scripts | 45 / 29 | 1 / 1 |
| DOM nodes | 1,599 | 362 |
| Third-party requests | many | 0 |
| Languages | 1 | 2 |
Google’s threshold for a “poor” first paint is 3 seconds. The old site missed it by more than double; the new one clears it more than six times over. The site is delivered as a self-contained package with a handover guide in the client’s own language, so it can be pointed at any domain and any host without touching the code.
Need a site that looks engineered rather than assembled?
We design and build fast, accessible, genuinely custom digital experiences — from first structure to launch and handover.
Start a project[email protected]
+44 7345 058863