Architecture & construction - 2023–2025

Federal

A brand identity and a corporate website for a Dubai architecture and construction firm, built to hold finished renders and the concept sketches behind them without one undercutting the other.

Role
Branding, web design & development
Platform
Responsive corporate website
Scope
Brand identity system + site build
Year
2023–2025
Federal homepage hero: a dusk render of a residential building under the tagline Solid, Functional, Beautiful, with five developer client logos along the bottom edge
The homepage hero - a dusk render of a completed Ellington building, the tagline restating Federal's three stated values, and five developer clients (wasl properties, SPEC, innoventures education, SOL Properties, AMER) anchored along the bottom edge.

The problem

A firm with a track record and no way to show it

Federal is an architecture and construction firm in Dubai working with developers like wasl properties, SPEC and SOL Properties, but it had no identity system and no site built to carry that work. A prospective client sizing up an architecture firm is partly judging the renders and case work it can show them - Federal had neither a mark nor a page built for that job.

The brief covered both ends of it: build a visual identity from nothing - logotype, typography, colour, physical brand touchpoints - then a responsive site to put it to work across a home page, a services overview, a concept-design showcase and a contact page with the Dubai office on a map.

Laptop displaying the Federal homepage hero against a plain wall
The homepage on screen - the identity's most-used surface.
Federal wordmark as illuminated signage above a shopfront entrance
The same mark, cut into signage above a shopfront - the identity had to hold up here too, not just on the surface that's easy to redesign.

Approach

Identity first, site second

I started with brand analysis and discovery workshops to understand Federal's positioning, then competitor research, and only after that a complete visual identity - logotype, typography, colour - before opening a single website screen. The site was designed against a system that already existed, not one improvised a page at a time.

One mark, cut into metal and printed on a lanyard, reading the same as sixteen pixels in a browser tab.

Identity

A mark built for a jobsite, not just a screen

The logotype's sliced, angular letterforms read as structural - clean lines standing in for the firm's engineering work - and stay legible from a favicon to a shopfront sign. Random Grotesque carries headlines, Poppins runs body copy across three weights, and the palette pairs a strong corporate blue with a golden-yellow accent Federal's own brand notes tie to achievement and gold-foil printing.

Federal logotype clear-space guidelines and five colour variants of the F mark
Logotype clear-space rules and colour variants - five approved backgrounds, from strong blue to near-black.
Typography specimen showing Random Grotesque headline type and Poppins body type at three weights
Type system: Random Grotesque for headlines, Poppins across three weights for body copy.
Federal colour palette showing Strong Blue as primary and Golden Yellow as the accent, with hex and Pantone values
Colour palette: Strong Blue as primary, a near-black secondary scale, and Golden Yellow as the one accent - each with hex, RGB and Pantone values specified.

Off the screen

The mark on a lanyard, a badge, a wax seal

The identity had to survive being printed, not just rendered. Event lanyards, staff ID badges and a wax-seal stamp all carry the same F mark in the same handful of colours, so nothing needed reinventing every time it left a screen.

Federal branded lanyards in blue and golden yellow with badge clips
Branded lanyards in Federal's primary blue and golden yellow, badge clip and swivel hook attached.
Federal staff ID badge in blue and black bearing the F mark
A staff ID badge, following the same blue field, black header and F mark as the lanyards.
Wax seal and brass stamp bearing the Federal F mark
A wax seal and brass stamp bearing the F mark - the identity's least-digital application.

Structure

Ten services, three about pages, everything else flat

The sitemap keeps most of the site one level deep - Home, Projects, Clients, News, Reach Us - and reserves the depth for two branches: Services, which breaks into ten sub-pages running from concept design through construction management, and About Federal, with three. That's where a firm like this actually has range to show, so that's where the site carries room for it.

Federal website sitemap tree diagram showing Home, About Federal, Services, Projects, Clients, Federal+, News and Reach Us
The full sitemap - Services carries ten sub-pages (concept design, architecture, interior design, technical approvals, mechanical, structural verification, BIM, contract management, project management, construction), About Federal carries three (People, Join Us, About Us), and everything else stays flat.

Wireframes

Grey boxes before a single render went in

Layout and hierarchy got settled in wireframe first - where the hero sits, how the services grid breaks into columns, what the contact form asks for - so the high-quality visuals the brief called for landed on a structure that was already right, instead of papering over one that wasn't.

Wireframes for the Federal homepage, services page and projects page with placeholder imagery and a stats row
Homepage and services wireframes - image placeholders and a stats row already blocked out at four call-outs.
Wireframe next to the finished Federal homepage design, plus the Reach Us wireframe with map and contact form
A wireframe next to the finished hero it became, plus the Reach Us wireframe with its Dubai map and contact form.

Home page

One tagline doing the positioning

The home page opens on a full-width dusk render of a completed building and three words - Solid. Functional. Beautiful. - restating Federal's stated values in the client's own order. Underneath, a horizontal projects strip and an about section with four stat call-outs carry the rest of the pitch before the page ever asks for a click.

Our Projects section of the Federal homepage showing a horizontal scroll of completed townhouse developments
The projects strip - Sommer SetMews townhouses leading a horizontal scroll of completed work, with a view-all link.
About Federal section of the homepage with a site photo and four statistics: completed projects, years of experience, employees and awards
The about section: a site photo of two people examining a building model, next to four numbers - completed projects, years of experience, employees, awards.

Concept design

Showing the sketch, not just the render

Most of the site runs on photoreal renders. The Concept Design page breaks that pattern on purpose - a hand-drawn elevation, generous white space and a design quote standing in for the earliest, least-finished stage of the work.

Federal's Concept Design page showing a hand-drawn architectural elevation sketch on a mostly white page
The Concept Design page: a hand-drawn building elevation given a full page to itself, ahead of any of the finished renders shown elsewhere on the site.

Additional pages

Same skeleton, one job per page

Services, Reach Us and the About Federal sub-pages all open the same way - a headline, a short underline rule, a line of intro copy - before doing their one job: a services grid, a contact form next to a Dubai map, a team photo next to a headcount. Nothing about the format tries to be different from page to page.

Federal Our Services page with a full-width building photo and service description blocks
The Services page: a full-width building photo up top, service blocks with supporting copy below.
Federal Reach Us page with a contact form and a render of the Dubai office building
Reach Us: a booking prompt, a contact form with company and phone fields, and a render of the Dubai building.
Federal People page, part of the About Federal section, with a team photo and headcount statistics
The People page, one of About Federal's three sub-pages: a team photo and three headcount stats above the fold.

Process

From discovery workshops to a shipped site

  1. Discover

    Brand analysis and discovery workshops on Federal's positioning, followed by competitor research.

  2. Identify

    Logotype, typography, colour and physical brand touchpoints, finished before any screen design started.

  3. Design

    Wireframes, then the home page, services, concept-design and contact pages, all on the same structural skeleton.

  4. Build

    A responsive site with an embedded Dubai map and contact form, on maintainable code.

Design decisions

Three choices that mattered more than any single screen

Outcome

A site built to carry the portfolio, not compete with it

The result restructured Federal's site around its own story - company, services, portfolio - in that order, with a consistent layout, bold typography and the blue-and-gold identity running through every page. An embedded Dubai map and a contact form now anchor the Reach Us page, and the whole build is responsive down to mobile.