Concept build · Muscat
Hasik Engineering and Contracting Construction company website design for Muscat, a concept build
We designed and built a working website for Hasik, a fictional engineering and contracting company in Muscat that builds roads, harbours, buildings and industrial works across Oman. The page speaks to the procurement teams who shortlist contractors and to the engineers and technicians who might join one, with sectors, recent projects, a project map, the fleet, safety practice, open roles and a tender enquiry form. Hasik is not a real company, but the map, the filter and the fleet tabs on its page all work.
A concept build: Hasik Engineering and Contracting is a fictional brand we created to show how we design and build a construction company website for Muscat. It is not a client and not a real company; our client work is on the work page.
The complete homepage, live
Both frames run the real site. Scroll inside them, try the project filter by sector, with the cards sliding into their new order, or open it in a new tab.
How we designed a construction company website for Muscat
Rock, sand and sea
Frankincense beige, limestone, deep teal and rust come from the ground a contractor in Oman builds on. Each sector is a plain colour panel that swaps in a large photograph when chosen, and Zilla Slab, a sturdy slab serif, sets the headings like the lettering on an engineering drawing.
Lead with built work
People shortlisting a contractor want to see what it has built, so the page opens on a full-width photo of a viaduct with a caption naming the structure. Every project card gives the region, the years and the contract value in OMR, and the shore protection card shows a section drawing of the rock revetment where another photo would only repeat itself.
A map of Oman, not a logo wall
Work in Oman runs from Sohar to Salalah, so a hand-drawn SVG map links each project pin to a list and a details panel, with the company's yards marked beside them. The pins work by keyboard, and each one has a matching button in the list beside the map, so nobody on a phone has to hit a small dot.
A front door for site staff
Engineers and technicians read a contractor's website as closely as clients do, so careers are not tucked into the footer. The Site School, an 18-month rotation for graduates and technicians with a named mentor, has its own section, each open role expands in place to show the work involved, and every role links to a CV form kept apart from the tender enquiry.
What the homepage includes
- Header with a tender enquiry button
- Hero with the viaduct photo
- Fact strip
- Sectors
- Recent work
- Project map
- Capabilities and equipment
- People and training
- Safety and HSE
- Careers and CV form
- Tender call to action
- Contact and tender enquiry form
Features and interactions
- Project filter by sector, with the cards sliding into their new order
- A map of Oman where each pin or list item opens a details panel and links to its project card
- Sector cards that swap a large sticky photo on hover, focus or tap
- Fleet tabs with arrow-key navigation and machine counts that count up once
- Open roles in native accordions, each linking to the CV form
- Tender enquiry form with sector, location and expected start fields (in the demo nothing is sent)
- A section drawing of the rock revetment, in SVG, on the shore protection card
The whole page, top to bottom
Palette and type
- Frankincense beige #EFE6D6
- Limestone #E3D6BF
- Deep teal #0F3D3E
- Rust #A4472A
- Ink #1C1A17
Type: Zilla Slab (600, 700), Archivo (400, 500, 600), Reem Kufi (600, for the Arabic name).
Languages: English.
How it is built
- Hand-built HTML, CSS and JavaScript, no framework
- GSAP 3.15.0 with ScrollTrigger, SplitText and Flip
- Lenis 1.3.26 smooth scrolling
- Photographs generated with Higgsfield (Nano Banana Pro), served as WebP, with AVIF for the hero
- Hand-drawn inline SVG for the map of Oman and the revetment section drawing
- About 1.2 MB on desktop and 0.7 MB on a phone, measured on our machine on 27 Oct 2026
Need a construction company website like this?
We design and build sites like this one for real businesses, with your brand, your photographs, your prices and the forms wired to your team. See what goes into construction company websites, our web development service, our website prices and how we work with businesses in Oman, or browse every concept build.
Questions
Should a contractor's website list its plant and equipment?
For civil and marine work it helps. Clients and consultants want to know whether you own the machines a job needs or will hire them in, so a list by type, such as earthmoving, lifting, paving and marine plant, with where it is kept and how it is maintained, answers that early. Keep it current: a fleet list that is years out of date does more harm than none.
How can a construction company website help with hiring in Oman?
List open roles with the site or yard they are based at and what the work involves day to day, and give each one a short way to apply. If you train graduates or technicians, explain the programme: how long it runs, what they rotate through and who mentors them. Keep CVs and tender enquiries on separate forms, so neither team has to sort the other's inbox.
How should a contractor show projects spread across Oman?
A map with a pin for each project, linked to the project list, shows reach at a glance, from the Batinah coast to Dhofar. Each pin should open the same facts as the project card: the sector, the region, the years and the scope. Put a plain list beside the map, so the projects can be read with a keyboard, a screen reader or a small phone screen.
More concept builds
Websites
Want yours built like this?
Tell us about your business. We'll plan the pages, the bookings or enquiries, and the launch.
Every rupee you spend with us has to earn its keep.
