Skip to content
WorkServicesProcessPricingAboutFAQBook a call
All work

Website

Virtus Infrastructure

A website for a construction company that builds tunnels.

Client
Virtus Infrastructure
Sector
Civil and tunnel construction
Location
Sydney, Australia
Pages
7 desktop pages
Virtus Infrastructure key visual

Overview

A construction website that leads with tunnels.

Virtus Infrastructure builds civil and mechanical projects across Sydney, including the Westconnex M4-M5 Link, Rozelle Interchange, Western Harbour Tunnel and Sydney Metro West.

I designed seven desktop pages: Home, About, Services, Projects, Community, Careers and Contact.

The challenge

Big projects that are hard to show.

  1. 01Tunnel work happens underground, out of sight.
  2. 02Each project has a value, timeline, location and challenges.
  3. 03The site also had to speak to staff and the community.

The approach

Site photos, navy and orange, stories.

  1. 01Full width site photos in every header, with an orange fade on the home page.
  2. 02Each project gets Value, Date and Location cards and key points.
  3. 03Community and Careers get their own pages.

Structure

Seven pages, one floating menu.

Taken from the navigation.

Home

  • AboutCompany overviewOur valuesMeet the teamMilestones
  • ServicesCivil InfrastructureRoad, TunnelDesign + EngineeringMechanical Installation
  • ProjectsFive project stories
  • CommunityCommunity at VirtusSupporting our communities
  • CareersJoin the teamApply now
  • ContactContact detailsFormMap

Key screen

The home page hero.

An aerial view of Sydney's roads, a bold promise and two ways to get in touch.

Virtus Infrastructure, The home page hero
  1. 1
    Floating navigation

    A rounded white bar with five page links.

  2. 2
    Two ways to talk

    Request a Consultation in orange, and a Let's talk! button.

  3. 3
    Aerial photography

    Motorways and rail show the scale of the work.

  4. 4
    The promise

    Building Australia's Future with Integrity & Innovation.

  5. 5
    What they do

    Civil and tunnel projects, from design to maintenance.

  6. 6
    Straight to the work

    A Project Gallery button opens the projects page.

Page flow

From the skyline to the next project.

Who Virtus is, where it has built, what it does, what is next.

Virtus Infrastructure, From the skyline to the next project
  1. 1
    Hero

    The promise over an aerial photo.

  2. 2
    About us

    A short statement, site photos and four headline numbers.

  3. 3
    Project map

    M8 Tunnel, Sydney Gateway, Rozelle Interchange, Western Harbour Tunnel and Sydney Metro, pinned on Sydney.

  4. 4
    Services

    Civil Infrastructure, Roads, Tunnels & Rail, and Design and Engineering.

  5. 5
    Future projects

    Upcoming work, linked to the project gallery.

  6. 6
    The Virtus Difference

    A dark navy band on culture and sustainability.

  7. 7
    Client stories

    Three testimonial cards with star ratings.

  8. 8
    Footer

    Ready To Build Your Next Project? with links, address, phone.

Projects

Every project, told as a story.

Every project has the same structure, so five are easy to compare.

Virtus Infrastructure, Every project, told as a story
  1. 1
    Numbered label

    Project 1 in orange above each title.

  2. 2
    Project name

    Westconnex M4-M5 Link, large in navy.

  3. 3
    Facts at a glance

    Value, Date and Location in three outlined cards.

  4. 4
    The scope

    A paragraph on the work, from conduits to commissioning.

  5. 5
    Key points

    Programme, stakeholders, QA and workforce in a side card.

  6. 6
    On site

    A wide tunnel photo, then the challenges solved.

Inner pages

About and Services.

Inner pages share one header: dark photo, white title, floating menu.

Virtus Infrastructure inner pages
Virtus Infrastructure inner pages

People pages

Community, Careers and Contact.

Pages for neighbours, future staff and new clients.

Virtus Infrastructure people pages
Virtus Infrastructure people pages
Virtus Infrastructure people pages

Visual language

Navy ground, safety orange.

Orange marks labels and buttons. Navy carries text.

  • Navy#1D3643
  • Orange#FF5F00
  • Amber#F79009
  • Ink#202939
  • Slate#697586
  • Mist#F9F9F9
  • White#FFFFFF

Typography

Typeface

Aa

Inter

One family across the site, from page titles to cards and buttons.

  • Regular
  • Medium
  • Semi Bold
  • Bold

Headlines

Our Projects

Inter

Medium and Semi Bold carry the titles, Regular carries the long project copy.

  • Medium
  • Semi Bold

Deliverables

What I delivered.

  • Home
  • About
  • Services
  • Projects
  • Community
  • Careers
  • Contact
  • Floating navigation
  • Footer
  • Icon set

Want this kind of clarity for your website?

Book a free 30 minute call. You leave with 3 written fixes, even if we don’t work together.

Nafees ZulfiqarUsually replies within an hour 5.0 from 33 Upwork reviewsTop Rated
OpenTaking new projects for NovemberBook a call