PROJECT OVERVIEW
This project is a full website design and development for a structural engineering consultancy. The firm operates internationally with a focus on structural analysis, sustainable design, foundation engineering, and construction management.
The target audience includes property developers, architects, construction firms, and public sector clients — people who need to evaluate technical credibility fast and move toward a consultation. The website needed to do two things well: establish authority in a technical field, and make it easy for potential clients to understand the scope of services and reach out.
Most engineering firm websites fall into one of two traps — either they look like they were built in 2012, or they over-prioritize aesthetics and bury the actual information. The goal here was to build something that sits confidently between both: visually sharp, but functionally clear.
MY ROLE
I was responsible for the full design process — from information architecture and wireframing through to final UI design in Figma and front-end development. That includes:
Site structure and page hierarchy
Layout and grid systems
Typography and color decisions
Component design and reusable UI patterns
Visual hierarchy across all eight pages
Responsive considerations
Full development using Claude Code, including animations and interactions
This was a solo design-to-development effort. Every decision from the navigation structure down to button sizing went through my hands.
THE CHALLENGE
Engineering firms sell trust. Their clients are committing to large-scale, high-stakes projects — buildings, bridges, infrastructure. The website has to communicate competence before a single conversation happens.
The specific problems I needed to solve:
Credibility without complexity.
The firm has deep technical expertise across multiple disciplines. Presenting all of that without overwhelming the visitor or making the site feel like a technical manual was the core tension.
Service clarity.
Six distinct service areas, each with sub-specialties, tools, and methodologies. The challenge was creating a structure where someone could quickly find what's relevant to them without clicking through five pages.
Project storytelling.
Engineering projects are visually impressive but hard to explain to non-technical audiences. The project pages needed to balance imagery with enough context to communicate scope and capability.
Conversion path.
The audience for this site isn't browsing casually. They have a project in mind. The design needed to reduce friction between "this firm looks capable" and "let me reach out."
Trust signals.
No testimonials or client logos were available at the time of design. The trust had to come from the design itself — the quality of presentation, the structure of information, and the confidence of the visual language.
DESIGN PROCESS
Information Hierarchy
I started by mapping out what a potential client actually needs to know, in order:
1. What does this firm do? (Home — hero + expertise section)
2. Are they credible? (Stats, project portfolio, principles)
3. Do they handle my specific need? (Services breakdown)
4. What's their track record? (Project case studies)
5. How do I contact them? (Contact page + persistent CTAs)
Every page was structured around this priority. The home page functions as a funnel — it gives a taste of each area and links deeper. The service pages go from broad categories to individual breakdowns. The project pages provide proof.
Home Page
Services Page
Projects Page
About Page
Layout Decisions
The entire design sits on an 8px grid, which kept spacing mathematically consistent without being rigid. I used a mix of full-bleed sections and contained content areas to create rhythm. Photography-heavy sections stretch edge to edge. Text-heavy sections pull inward to maintain comfortable reading widths.
The home page uses a deliberate alternation between dense visual sections (project grids, image blocks) and breathing room (stats, expertise descriptions). This prevents the page from feeling like a wall of content despite its length.
On the individual service page, I broke from the card grid pattern and introduced long-form content with interspersed photography. Engineering services need explanation — cards alone don't do that justice. The page reads almost like an article, which gives the content room to build credibility.
Typography
Manrope in two weights — semibold for headings, medium for body. One typeface, no exceptions.
The reasoning: engineering is a precise discipline. The typography should reflect that. Manrope is geometric enough to feel technical but has enough warmth in its letterforms to stay approachable. Using a single family with strict weight rules keeps the hierarchy clear without visual noise.
Large display type on hero sections creates immediate impact. Body copy is sized for readability, not style. The type does its job and gets out of the way.
Medium
SemiBold
Color System
Dark background throughout — near-black with white text. No accent colors competing for attention.
FFFFFF
000000
First, it lets the photography lead. Engineering project images are colorful and detailed — steel structures against blue skies, city skylines at dusk, concrete textures in daylight. A dark UI makes those images pop without needing borders or containers.
Second, it communicates seriousness. This isn't a startup landing page. The audience expects weight and authority. The dark palette delivers that without being heavy-handed.
Third, it creates natural hierarchy. White text on dark backgrounds draws the eye to headings and key information. The contrast ratio does the work that color coding would do on a lighter site.
Components and UI Patterns
A few key patterns repeat across the site:
Section headers follow a consistent pattern — large heading, supporting paragraph, sometimes a horizontal rule. This trains the user to scan quickly.
Card components appear in projects, services, and insights — same structure (image, title, metadata) with minor variations per context. Consistency here means users learn the pattern once and navigate intuitively everywhere.
The expandable service list on the Services page uses a minimal accordion pattern. Each service category reveals a brief description on interaction. This keeps the page scannable while still providing detail on demand.
The scrolling "GET IN TOUCH" marquee in the footer is an intentional pattern break. After structured, grid-based content, the horizontal motion creates a moment of energy. It's a visual nudge toward action without being a traditional CTA banner.
OUTCOME
The final design delivers a website that treats engineering with the visual seriousness it deserves while remaining navigable and conversion-oriented. The information architecture guides visitors from awareness to inquiry with minimal friction. The dark visual language creates a distinctive presence in an industry where most competitors default to corporate blue-and-white templates.
The strict typographic and grid discipline keeps the experience consistent across eight distinct page types, while photography and layout variation prevent monotony. Every section earns its place — there are no filler blocks or decorative elements without purpose.
The site was designed and fully developed as a working product. While the project ultimately did not launch due to the client's budget constraints, the design and codebase represent a complete, production-ready deliverable.
The work demonstrates that technical industries don't need to compromise on design quality — and that strong visual design doesn't require sacrificing information density or usability.
Let’s chat about all things design, being creative, AI, watches, perfumes, music, food, anything goes!
Let’s
connect!
Made with 🧡 by Aleksa
2026