Legacy Metal Products Website

Homepage — the full Legacy identity, shop photography, and five clear ways into the site.

Screens captured from the working website. Select a thumbnail to browse, or click the large image to enlarge it.

Web designUXGraphicsDevelopment

The project

My role: Visual design, graphics, catalog structure, and website development.
Challenge: Make a broad product line easy to browse and discuss from a phone.
Result: A connected catalog, shop galleries, project resources, and product-aware inquiries.

I designed and built Legacy’s website around the questions contractors bring to a sheet-metal shop: can you make this, what information do you need, and how do I get the job started?

The work connected visual design, product organization, photography, practical resources, and the inquiry process. My fabrication background helped me turn shop knowledge into a structure a customer can follow.

View Legacy website View all projects

Visual design

A metal-shop identity, right down to the controls.

I carried Legacy’s red gear, metallic lettering, and dark industrial palette into the website’s navigation, cards, and document presentation. The rotating gear sits on its own layer so the wordmark stays readable.

Shop and product photography gives the visual treatment context. The site looks connected to the material, equipment, and finished work behind the company.

Product organization

Turn a broad product line into clear choices.

I organized the catalog into HVAC Sheet Metal, Curbs & Adapters, and Custom Fabrication. Visitors can browse by area or search for a part, then work through the relevant product family and configuration.

Product details connect to the measurements, reference photos, forms, and preparation guidance that help a customer explain the actual job.

Scope of the build

3Product areas

8Product families

42Catalog parts

Resources that support the work

Fillable order forms, product specifications, measuring guides, and project-preparation articles sit alongside the catalog. Gallery albums connect real shop examples to the products and applications they illustrate.

A more informed first inquiry

Selected product context carries into the contact flow. Customers can explain dimensions, material, quantity, and timing, then include drawings or photos. The backend handles validation, file delivery, and submission confirmation.

Legacy resources page on a phone, with readable cards and a fixed five-section navigation dock — The same resource library on a phone, with the five main sections always within reach.

Mobile & app presentation

Designed for the phone someone already has on the job.

A persistent five-section dock keeps Products, Gallery, Resources, Blog, and Contact accessible. Content scrolls above it, and the site remembers the visitor’s place within each section.

I also developed the home-screen icon and installed-app presentation around the gear-and-L mark, with device-safe spacing and black app chrome.

Responsive layouts, visible keyboard focus, reduced-motion support, and smaller web images carry the same attention into everyday use.

What this project demonstrates

Connecting the brand, the product line, and the customer’s next step.

This project brings together the parts of design I enjoy most: understanding the business, organizing complicated information, developing a visual language people recognize, and building the interactions that make it useful. The finished site gives Legacy one connected place to present its work and help customers prepare a request.

Have a project in mind?

Let’s make your website work for your business.

Bring the idea, the existing site, or the part of the process that needs to work better.

Contact Chris View all projects