Start a Project
Selected work

Fence & Gate Builder Custom software · configurator + estimating

Design a steel gate.Get the whole order, instantly.Design a steel gate.Get the wholeorder, instantly.

We built Fence & Gate Builder, a configurator for custom metal gates and fence. Enter the opening, watch the gate draw itself to exact dimensions, and get a complete steel takeoff: every part, every cut, the total weight, the leftover, and the cost. No more pricing a job by hand.

See the tool Start a project
The Fence & Gate Builder workspace we built: an Opening panel with gate type, post width, wall thickness, heights, leaf widths, top style and gaps, beside a live 2D preview of a double gate fully dimensioned with post gaps, leaf widths, outside width, and post opening
Product
Fence & Gate Builder (founder-owned)
Industry
Metal fabrication · fence and gate
Project
Web app · configurator · estimating
Our role
Product designUX/UIgeometry and pricing enginefront-end development

The app, interactive

Type an opening.
Watch the gate draw.

Change the opening, the gate type, and the picket spacing, then switch between the drawing, materials, and cut list on desktop or on a phone. This copy runs in local-only mode: there are no accounts or cloud saving, and a build you save stays in your own browser.

The challenge

Every gate is one-off, and every quote was done by hand.

Custom gates are never the same twice. Change the opening by a few inches and the post height, the frame tubing, the picket count and spacing, the steel weight, and the cost all move with it. Pricing a job meant sketching it out, working the math on paper, and hoping the cut list matched what actually went on the truck.

Fence & Gate Builder wanted to put that whole calculation into a tool a fabricator could trust: one that draws the gate, lists every part, and prices the steel the instant the dimensions change.

Live geometrySteel takeoffCut list
Fence & Gate Builder on a phone: the dimensioned gate drawing above the Materials, Purchase, Cut List, and Build Notes tabs
Posts, outer frame, rails, pickets. Four colors on the drawing, the same four in the parts list, so the shop never has to translate.

The signature build

Set the opening.
Watch the gate draw itself.

Pick single or double, type in the opening and post heights, choose a top style and frame tubing, dial in picket width and spacing, and the gate redraws live, fully dimensioned. Post gaps, center gap, leaf widths, outside width, post opening: every number the fabricator needs to cut to is right there on the drawing, updating as they type. The same build can be viewed four ways, 2D, 3D, top, and plan, and exported to PDF for the shop floor or the customer.

The Fence & Gate Builder system: New Build type selection, the desktop live preview with dimensions and pickets panel, Material & Design with frame material, picket style, spacing and finish, a 3D preview, Parts Summary, Plans & PDF, Save Build, and Review & Checkout with Add to Quote
Design to order, on every screen. Type, size, design, review: the same build moves from the first choice to a saved quote, on desktop or on a phone.

The complete takeoff

Every part to order,
weighed and priced.

The Materials tab turns the drawing into an order. Each part, posts, frame verticals and horizontals, pickets, lists its tube size, wall gauge, cut length, quantity, and shop notes. Below it: the finished gate weight, the steel weight to actually buy in full sticks, and an estimated metal cost at the current per-hundredweight rate. It even tracks the leftover, so there's no guessing at the supply house.

201.3 lbGate weight
303.2 lbSteel to buy, in full sticks
38'9"Leftover scrap, tracked
$318Estimated metal cost at the current $/CWT rate
Straight to the saw

A cut list the shop can build from.

Two phones showing the Fence & Gate Builder cut list: the dimensioned drawing with the parts legend, and numbered, color-coded parts with quantity, length, width, wall gauge, stock, type, and cut notes
Flip to the Cut List and the same job becomes a numbered, color-coded run sheet: part name, quantity, length, width, wall gauge, the stock each part comes from, and the cut notes. The fabricator works straight down the list. No re-measuring, no translating a sketch.
Out in the shop

The whole gate, in your hand.

Fence & Gate Builder on a phone at the bench, showing the gate drawing and parts tabs
The same builder runs in the field. Pull up a saved gate on a phone at the bench, check a cut length, or re-spec on the spot when an opening measures up different than the drawing said.
  • Live. Drawing, cut list, weights and cost, updated as you design.
  • 4-view. 2D, 3D, top and plan, plus one-tap PDF export.
  • $/CWT. Steel priced by the hundredweight, the way shops buy it.

The whole workspace

One screen,
design to order.

Everything lives on a single working screen: the spec panel on the left, the live drawing up top, the takeoff below. Name the build, save it, start a new one, or export the whole thing to PDF, all from the toolbar. It works the same on a laptop at the desk or a tablet out in the shop. The same engine now drives Fence Designer, which lays a full redwood fence around a lot and house in 3D and prices the run.

Fence Designer, built on the same engine: a 3D view of a redwood fence around a house on a 70 by 120 foot lot, with lot, house, and clearance controls beside a live estimate of 257 feet of fence, 559 pickets, 105 rails, 38 posts, and 2 gates
Fence Designer. Lot, house, setbacks, and runs in 3D, with the full estimate in the footer: 257 ft of fence, 559 pickets, 105 rails, 38 posts, 2 gates.

What we made

From an opening
to an order.

  1. Configurator design

    Defined the inputs a real gate needs, from opening and height to style and hardware, and the order they are asked in, so a builder can price a job without a phone call.

  2. Drawing engine

    The gate redraws itself to exact dimensions as the numbers change, so what appears on screen is the gate that gets built.

  3. Takeoff and pricing

    Every part the design implies is counted, weighed, and priced into a complete steel takeoff rather than an estimate.

  4. Cut list in the yard

    The same job on a phone: the cut list, part detail, and dimensions a fabricator needs standing at the steel rack.

  5. Interface system

    One set of controls, states, and typography across the designer, the takeoff, and the mobile views.

Real weights, honest waste, and a cut list a shop can build from.

Design & front-end

Brendan Collins
Brendan CollinsOwner and project lead

Brendan leads UI/UX, branding, and front-end execution, making software simple, clear, polished, and easy for real people to use.

Meet the studio →

What are you working toward?

Tell us what the brand needs to do, who it is for, and when you need it. You will get a straight answer on scope, timing, and cost.

Start a project

More Collins Creative work

Flip OS sign-in screenCustom software

Staker Collins Flip OS

 The Invoice Flow workspaceCustom software

Invoice Flow

 Welker's quote builder pricing a cedar beam orderOrdering prototype

Welker's Custom Cut Lumber