kailashblack
DesignWeb DevMarketing
loading content...

FTF Engineering

FTF Engineering website on a laptop: the home page carousel on the Paso Robles Law Residence FTF Engineering: the portfolio page with its category filter bar, on a tablet FTF Engineering's home page on a phone, sliding from the project carousel at the top down to the footer's newsletter signup.

Redesigning and rebuilding the FTF Engineering website from the ground up was a huge task: dozens of engineering projects, hundreds of images, an extensive About page, employee profiles, custom office location maps, and current news and events.

I built a custom WordPress theme and paired it with Advanced Custom Fields to give the staff a way to update content without touching code. Each page is built from content blocks they can add, edit and reorder, from text and photo layouts to staff bios, office maps and partner logos, and a new project slots straight into the portfolio and its filters.

In 2026 I rebuilt several of its core systems in place. The portfolio now filters its 73 projects by category on a single page instead of eight, and 21 staff bios open as popups on the About page, with the old team-page links redirecting automatically.

Pages now arrive with a loading sequence: the FTF logo animates in on the homepage, a slim progress bar runs on every other page, and pages cross-fade into one another, so the menu stays put while the content beneath it changes.

ftfengineering.com
FTF Engineering project sheet for a private residence in Portola Valley: its role, cost, description and construction photos FTF Engineering banner image showing structural and civil engineering services, building and steel structure photos FTF Engineering team page showing company firm overview and staff directory

When bidding for a project, FTF Engineering submits a bid proposal: a formal document laying out the timeline, scope, and pricing, along with a selection of portfolio projects. As FTF’s Visual Designer, I make sure those proposals look professional and compelling.

Proposals vary widely in size, complexity, and content, so the real challenge was an adaptable template. Using InDesign’s master pages and character and paragraph styles, I streamlined the process so the team can turn around a polished proposal on short notice.

More recently, I built a system with Claude that automates the project sheets and qualification packages that go into those proposals. Each project’s facts and photos live in one data file, and Claude lays out the pages from it, along with sector one-pagers, in layouts measured from my InDesign originals. It fits the text to each page by rule, refuses any font outside FTF’s brand, and holds every page in a drafts folder until it has been checked. The website’s project descriptions come from the same files, and the team can ask Claude for a new or updated page without anyone opening InDesign.

I also design FTF’s other marketing pieces: this event banner, shown at engineering conventions and company outings, a series of 5×7 postcards, employee resumes, company invoices, and regular email blasts.

FTF Engineering: the home page loader, the F, T and F settling into the mark FTF Engineering Brand Standards cover: the FTF logo above the title, listing colors, fonts, typography and logo treatment FTF Engineering Brand Standards spread: the brand blue and grey with CMYK, RGB and hex values, and Myriad Pro install steps FTF Engineering: Brand Standards, Typography and Body Paragraphs FTF Engineering Brand Standards spread: bullet and numbering rules, and the logo's clear space and alignment FTF Engineering: Brand Standards, the logo on photography FTF Engineering: the SFO Cargo Building 626.1 project page on a laptop

In the summer of 2022 I led FTF Engineering’s rebrand from start to finish, exploring a wide range of directions and mockups. In the end the firm chose an evolution of its existing logo, and I refined it, most visibly by giving the first F the top crossbar it had been missing, so it no longer reads as half of a plus sign. I then designed the Brand Standards document that defines the brand: the blue and gray for print and screen, the Myriad Pro type family and its hierarchy, and the rules for the logo, from its clear space to its use over photography.

On the website, the brand runs on a design system I built: a full light/dark mode on a roughly 200-token color system, layered from raw values up to the components that use them, which also follows a visitor’s system preference automatically. I normalized the site’s breakpoints to a five-tier scale and replaced its stepped page margins with a single fluid measurement, which fixed a couple of longstanding layout bugs along the way.

home > FTF Engineering