Alio-Mar — Construction Chemicals, Engineered for Trust
Alio-Mar Construction LLC
A full corporate site for an authorized construction-chemicals distributor — services, portfolio, blog, and a real contact loop — designed to feel as precise as the products it sells.
Overview
Alio-Mar is an authorized distributor of construction chemicals and an approved contractor for flooring, waterproofing, structural strengthening, and other engineering solutions delivered to Global and European standards. I designed the full multi-page marketing site — Home, About, Services, Projects, Project Detail, Blog, Post Detail, and Contact — around three feelings the audience actually buys on: performance, durability, and trust. The visual language is deliberately technical — IBM Plex Mono for body, a single deep blue for actions, generous white space, and blueprint-grade rules that echo the site's construction context.
The problem
Every construction-chemicals company in the region ships the same site: a hero photo of a crane, a services grid nobody reads, a form that emails into a void. Alio-Mar needed to look like the disciplined, standards-driven company they are — with services explained in engineering terms, projects shown as real portfolio entries (location, scope, features, gallery), a blog that earns SEO, and a contact page that shows an office and a map. Everything had to be readable on a phone at a job site, and printable-clean enough to hand to a procurement officer.
Context
Alio-Mar sells to engineers, contractors, and procurement teams — audiences who don't buy on vibes. They buy on certifications, past projects, product datasheets, and the sense that the company behind the pitch will still pick up the phone in year three. The old web presence was a single-page brochure with stock photography and no way to see actual project work. The team needed a real corporate site that could carry service depth, project proof, thought leadership, and a contact channel that felt human.
Design principles
01
Technical, not decorative
IBM Plex Mono for body copy signals engineering discipline. No stock hero videos, no purple gradients — the site looks like the datasheets the audience already trusts.
02
Proof over promise
Every claim is anchored to a number (5+ years, 128+ projects, 66% QA) or a real project card. The Projects grid and Project Detail template exist to convert 'trust us' into 'look'.
03
One blue, used with intent
A single #1E5CD8 owns primary actions, active nav, stat numerals, and the Shop CTA. Nothing else competes for attention.
04
Split-title hero as a signature
Every top-level page opens with a two-line title where the second line is indented and joined by a short blue rule. It becomes a spine the whole site is recognized by.
05
The footer does the work
Every page ends in the same dark footer — CTA, sitemap, services list, contact block. The site never dead-ends; readers always know the next move.
Process summary
01Mapped the eight core templates against the buyer's journey — awareness (Home, Blog), consideration (Services, Projects), decision (Project Detail, Contact), retention (Post Detail, About).
02Anchored the visual language on one deep blue (#1E5CD8), IBM Plex Mono body, and Inter-style display — technical, calm, and readable at every size.
03Designed a shared page shell (fixed nav, mono-cased section eyebrows, split-title hero with a rule marker, dark footer with a full sitemap and CTA block) so every template feels like the same site.
04Built a service card and a project card as first-class components — the same object shows up in the grid on Services / Projects and as the hero on the detail pages.
05Wrote the counters (Years Experience · Projects Completed · Happy Clients · Quality Assurance) as a shared stat row that Home, About, and Projects reuse without redrawing.
06Made the Project Detail template real: location, scope, features, gallery of on-site photos, and an inline Contact CTA — so a procurement officer can qualify Alio-Mar in one scroll.
07Shipped a full Blog and Post Detail with newsletter capture, categories, share row, and a related-posts strip — content marketing without a bolt-on CMS.
08Handed off with responsive rules (breakpoints, container widths, footer collapse) and a component sheet the developer could implement 1:1.
Screens
01 — Home — split-title hero ('Innovative building / and construction chemicals'), a two-tile hero pairing an on-site photo with a Get a Quote CTA, the stat row (5+ / 182+ / 423+ / 93%), a services grid, a partner strip, and a recent-posts row. One scroll, the whole company.02 — About — the same split-title system ('At the heart of Alio-Mar / committed to excellence'), two-column paragraph + photo intro, the stat row again as a trust anchor, a Certificates block with dated partner awards, and a team grid with role captions.03 — Services — six service cards laid out in two columns, each with a blueprint-style icon, a plain-language title (Casting of S.O.G, Constr. joints, Water & Thermal proofing, Flooring finishes, Sports Flooring, Structural strengthening) and a technical two-sentence explanation. Below, a four-step 'Process of Crafting Your Construction Dream' (Initial Consultation → Design & Planning → Construction Phase → Project Completion) using outlined numeric markers.04 — Projects — the portfolio grid. Alternating photo tiles with a highlighted 'Project title here' card that carries a Learn More CTA. The stat row reappears, followed by a Partners testimonial and an Our Products slot for datasheet-quality product visuals.05 — Project Detail — a stacked photo gallery on the left, structured meta on the right (Location, Project Scope, Project Features), a Project Details paragraph in mono type, and an inline 'Ready to Bring your Construction Project to Life' contact card with a direct email link. Everything a procurement team needs on one page.06 — Blog — a two-column feed with a Newsletter capture card pinned top-left, a featured post at the top, and a 2×2 grid of recent posts below. Each card is title-first with a mono byline and date, so scanning stays fast.07 — Post Detail — cinematic hero photo, mono title and author strip, a long-form body with pull sections, an in-post image, and a Share This Post row with real platforms. The dark footer closes the page the same way every other template does.08 — Contact — 'Let's start / a project together' split title, a three-field form on the left (Name / Email / Message), Contact Information on the right (Phone, Email, Office address), social media chips, and a live map anchoring the office in Cairo. The site ends where a deal begins.
Reflection
Corporate construction sites default to stock imagery and vague copy because the audience is assumed to be uninterested in design. The Alio-Mar system inverts that assumption: engineers and procurement officers are among the most detail-oriented buyers on the internet, and a site that respects their vocabulary — mono type, numbered process steps, real project meta, dated certificates — wins their trust faster than any hero video. The template set is small on purpose (eight pages, one shared shell) so a two-person marketing team can keep it alive without a redesign every year.
