Industrial Welding Manufacturer — B2B Catalogue Site
Eleven frames across four documented breakpoints, the tightest in the batch.
A B2B institutional and catalogue website for an industrial welding and electrical-busbar manufacturer: technical capabilities, company history and certifications, and direct quote-request touchpoints. I designed eleven responsive frames across four documented breakpoints — tablet at 1024 and 641, mobile at 640 and 320 — covering home, services, about and contact with their mobile counterparts. Sole website UI designer; identity and the WordPress build were other people's.
- Role
- Sole website UI designer
- Timeframe
- Jun 2023 – Jun 2023
- Stack
- Figma
- Evidence
- Design file
Sole Website UI Designer for JB Soldas, a specialized industrial welding, metal fabrication, and electrical busbars manufacturer (Barramento para painéis elétricos). Designed 11 responsive frames on the primary Design page across desktop, tablet, and mobile viewports (Homepage, Homepage1, Serviços, Sobre nós, Contato, and mobile counterparts) backed by a 16-node Style Guide documenting multi-breakpoint layout rules (Tablet 1024/641px, Mobile 640/320px), typography scales, and industrial color palettes in Figma (file key 6d6oqPNLo3gfpPiCu2iYBo).
Agency employment at Sagitta delivering in June 2023 (concluded June 30, 2023). Juan served as the sole website UI designer within the agency team: Kelvin Bezerra created the JB Soldas logo and brand identity, Juan designed the complete multi-page responsive website in Figma, and an external no-code developer implemented and published the site on WordPress using Elementor. Scoped by Ramon.
B2B industrial catalog design: heavy welding and electrical busbars
- 11
- responsive layout frames on the primary Design page
- 4
- device breakpoints specified (1024px, 641px, 640px, 320px)
- 16
- style guide design tokens and breakpoint specifications
- 100%
- production match verified via historical Wayback archive
Industrial B2B buyers—procurement managers, electrical engineers, and factory plant supervisors—do not browse websites for entertainment. They evaluate suppliers based on technical capability, machinery precision, and commercial responsiveness. JB Soldas required a robust digital catalog to showcase specialized capabilities: TIG/MIG welding, custom sheet metal fabrication, and copper/aluminum electrical busbars for industrial switchboards.
Multi-breakpoint layout engineering across 11 frames
The Figma file structured complete desktop and mobile parity across the site's primary operational surfaces:
- Commercial Homepage (Homepage & Homepage1) — High-impact hero section highlighting manufacturing infrastructure, followed by technical capability grids and trust credentials.
- Technical Service Catalog (Serviços & Serviços - Mobile) — Detailed breakdown of specialized welding processes, material tolerances, and electrical panel busbar specifications.
- Institutional Credibility (Sobre nós & Sobre nós - Mobile) — Company history, engineering certifications, quality control protocols, and plant safety standards.
- B2B Quote Request Funnel (Contato & Contato - Mobile) — Direct quote inquiry form structured to capture technical project specifications, file attachments, and delivery urgency.
Shipping is evidenced: the 2024-03-20 Wayback snapshot (WordPress 6.4.3 with the Hello Elementor theme, 222,969 B) confirms the public launch, with layout sections that match the Figma file. However, the 'shipped' label denotes only that the UI went live publicly; it does not indicate that Juan wrote the code, managed the hosting, or authored the brand logo.
Breakpoint documentation in the Style Guide
The 16-node Style Guide page (node 1:16) provided the developer with explicit breakpoint thresholds: Tablet layouts at 1024px and 641px, and Mobile layouts at 640px and 320px. By documenting column collapse rules and touch target minimums directly in Figma, the handoff eliminated guesswork during WordPress Elementor assembly.
What this project is and is not
- Not brand identity or logo design. Kelvin Bezerra authored the JB Soldas logo and brand visual identity.
- Not WordPress or Elementor implementation. The website was assembled in WordPress by an external no-code developer.
- Not user research or discovery. Requirements and client parameters were scoped by Ramon.
- Not currently accessible on the live web. The business ceased operations and jbsoldas.com.br is offline; delivery is proven through the 2024-03-20 Wayback capture.
- Not supported by sales metrics. No lead counts, RFQ volumes, or commercial figures were retained.
Clarity and structure in industrial web design
JB Soldas exemplifies disciplined B2B web design: presenting heavy industrial manufacturing with technical rigor and clear lead capture. By pairing detailed service documentation with strict multi-breakpoint responsive rules, the project delivered a professional digital presence for an industrial manufacturer.
Evidence
The website was implemented and published to production. The company subsequently ceased operations and the domain jbsoldas.com.br is offline today (verified curl 000). Historical delivery is verified via an era Wayback Machine archive (2024-03-20, 222 KB on WordPress 6.4.3 / Hello Elementor) whose section structure matches the audited Figma file. No commercial inquiry or sales metrics exist. This case study documents B2B industrial catalog design and multi-breakpoint responsive engineering.