All projects
Concept redesignConcept, not commissioned2026

A concept for a CNC machining shop: the machine park drawn to scale and a check that says which machine a part fits, then writes the request.

Decolan is not my client and did not commission this website. I made the concept on my own initiative from the text and photos on their public website, so every fact on it is theirs.

Decolan
Company
Decolan
Service
Concept website and part-size check

Decolan in Izegem, Belgium, is a subcontractor for CNC turning and milling, from a single part to medium batches, in any material, with its own certified welding department. A buyer who contacts them has a drawing and one question: will my part fit your machines?

What I found

It is a single page. I checked it on 14 November 2026, on a laptop and a phone:

  • The page is eight GIF images exported from Fireworks in January 2010. The HTML holds no sentence, only the alt text "Stuur een mail", and the tab reads "index.gif". Google cannot learn what they do.
  • The first sentence reads "Decolan hernieuwt zijn site!" ("Decolan is renewing its site"). The code today is identical to the Internet Archive capture of 20 April 2012.
  • With no mobile viewport setting, a phone shows a table 1020 px wide at about 38% scale, unreadable without zooming.
  • Their strongest point, the machine park (Ø 1400 mm, 15 m in X, lifting up to 50 t), is part of the image. A buyer has to compare the numbers alone, then phone.
  • At the https address the browser warns that the certificate is self-signed; it expired in November 2022.

First screen of the current Decolan website on a laptop: logo, address and the line "Decolan hernieuwt zijn site!" on the left, a grey box with the machine park on the right, all of it an image on a white background

Decisions

Capacity on the first screen

The headline comes from their own sentence: "Draai- en freeswerk, van één stuk tot middelgrote serie". Below it, four figures from their site, 1400 mm, 8 m, 15 m and 50 t, now as text. On the right, a drawing of a turned part with a title block, labelled as an illustration, draws itself once and stays still; on a computer its layers shift slightly with the pointer. Colours come from the logo, yellow and graphite grey.

Services that end in a dimension

Turning, five-axis milling, large milling and welding are four cards, each ending with its maximum dimensions, because that is what a buyer looks for.

The services section: four cards with an icon, a description and a line of dimensions, from Ø 1400 mm · L 6000 mm to lifting up to 50 tonnes

The machine park on one scale

I drew the figures from the grey box as working envelopes on a one-metre grid, all on one scale. As you scroll, the drawing holds still and each step draws its envelope: the 6 m lathe, the 8 m five-axis machine, the 15 m machine with its fourth axis, then welding and lifting. Dimensions count up to their real value. At the end all envelopes sit together. A note says it is a diagram, not a drawing of the machines.

The machine park to scale at step three: the working envelope of the 15 m milling machine highlighted with its 2 m fourth axis, the description and X, Y and Z dimensions on the right

A check before the enquiry

"Past uw werkstuk?" (does your part fit?) asks for the operation, dimensions, weight, quantity, welding and material. It answers at once which machine the part fits and how much of the range it uses, draws the part inside the envelope, and flags anything over the 20 t the fourth axis takes. A request summary builds alongside and says when it is ready. The button carries it into the enquiry form, which opens an email to info@decolan.be. No prices or lead times, as on their site.

The size check: milling a part of 11,800 × 2,600 × 1,300 mm, small batch, with welding; on the right the answer that it fits the 15 m milling machine, a drawing inside the envelope and percentages per axis

Dutch, and the phone

The website is in Dutch, like the current one, with the polite "u" they already use. On a phone the machine park drawing stays at the top while the steps change beneath it, and in the tool a bar with the answer stays above the fields.

Three phone screens of the new website: the first screen with the headline, the first machine park step and the check result with the request summary

First screen on a laptop, the current website on the left and the new concept on the right

How it's built

Static HTML, CSS and JavaScript, with no framework or animation library. Every drawing is inline SVG. CSS draws the first screen, a small script ties the machine park lines to the scroll position, and the rest is CSS transitions and IntersectionObserver. Hidden starting states are set only once JavaScript loads, so without it the page is fully visible, and with reduced motion the drawings appear complete. The tool has no server: the browser does the sums and the enquiry leaves through mailto. The page is noindex (meta tag, robots.txt, response header) and the JSON-LD holds only details from their website.

What I would do next

With the company I would first check which certificate the welding department holds, which materials they machine most and what width the five-axis machine takes, which the tool leaves open. A real project would add photographs of the workshop, a French version and a form that takes the drawing as an attachment.

A slot is open right now, get in touch about working together

If you have an idea worth doing properly, the first step is a 30 minute conversation.

No proposal and no pressure. You tell me what you're building, I ask the questions nobody has asked you yet, and by the end you know whether it's feasible, roughly what it costs and what the next step is. Whether or not we end up working together.

Jurica Stublić u radu na projektu