Concept build · Jeddah
Matanah Construction company website design for Jeddah, a concept build
We designed and built a working homepage for Matanah, a fictional main contractor in Jeddah working across commercial, residential, infrastructure and industrial sites. Its readers are the people who commission and price buildings: developers, tender teams and engineers looking for site roles. Matanah is invented; the English and Arabic versions are built and running, interactions included.
A concept build: Matanah is a fictional brand we created to show how we design and build a construction company website for Jeddah. 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 sector chips that filter the project index, reordering the rows with a flip animation and a live count of what is showing, or open it in a new tab (Arabic version).
How we designed a construction company website for Jeddah
Laid out like drawings
Contractors and their clients read drawing sets every day, so the hero has a title block with a sheet number, a grid reference for Jeddah and a revision letter. Headings are set in Archivo at its widest, heaviest setting, and every specification, project number and programme length sits in IBM Plex Mono, the way a spec sheet would print it.
Concrete, teal and safety yellow
Wide, flat fields of poured-concrete grey and Red Sea teal carry the page. Safety yellow is kept for the few things that matter most, the call to action band, the active filter and the focus rings, always with concrete-black text so it stays readable.
Built for tender teams
Procurement teams need documents before they invite a bid, so the prequalification picker lets them tick what their tender asks for and shows a live count, with audited accounts marked as sent under NDA. Credentials a real contractor would publish, such as classification numbers and safety statistics, sit in clearly labelled design slots instead of invented figures.
Jeddah ground and climate
Every project sits in a named district of the city, Al Shati, Obhur, South Jeddah and Al Khumrah, and a stylised map of the coastline shows where each one stands. The safety section plans for the Saudi summer, with midday work stopped and heavy pours moved to night shifts, and morning toolbox talks run in six languages, from Arabic and Urdu to Bengali and Malayalam.
What the homepage includes
- Hero with title block
- Sectors
- Projects index
- Capabilities
- How we deliver
- Safety
- Vision 2030 context
- Careers and open roles
- Prequalification pack
- Site visit band
- Contact and map
- Footer
Features and interactions
- Sector chips that filter the project index, reordering the rows with a Flip animation and a live count of what is showing
- A sticky photograph on desktop that follows the project row you hover, focus or scroll to
- Project sheets that open in a dialog with size, floors, scope, programme length and site notes
- A swipe carousel for the project index on phones
- A prequalification picker that counts the documents you select as you tick them
- Open roles that open an application form with the role already chosen
- A delivery timeline, pinned on wide screens, that scrolls sideways from survey peg to handover
The whole page, top to bottom
Palette and type
- Concrete black #1E2124
- Poured concrete #E4E1DB
- Red Sea teal #0E5459
- Deep teal #0A3D41
- Safety yellow #F2C230
Type: Archivo, IBM Plex Mono, Noto Kufi Arabic.
Languages: English, Arabic (right to left).
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
- Native dialog elements for the project sheets and the job application
- Inline SVG map of the Jeddah coastline
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 Saudi Arabia, or browse every concept build.
Questions
What do developers and consultants look for on a contractor's website in Jeddah?
The sectors you work in, a project list with sizes, scopes and handover years, and the work you carry out with your own crews rather than through subcontractors. They also look for your safety practice, a clear way to request prequalification documents and a contact route to the people who price work. Open site roles are worth listing too, because engineers and foremen check a contractor's website before they apply.
Does a contractor's website in Saudi Arabia need an Arabic version?
Yes. Many clients, consultants and public bodies in the Kingdom read Arabic first, so a full right-to-left Arabic page matters more than a translated summary. The Arabic should use the construction terms Saudi engineers actually use, and the layout, menus and timelines should mirror properly rather than simply swap the text.
Can a contractor's website take prequalification requests?
Yes, and it saves time on both sides. Tender teams usually need a set of documents, such as a company profile, project references, HSE and quality plans and an equipment list, so a short form that lets them pick what they need saves a round of emails. Sensitive items like audited accounts can be marked as sent under an NDA. General enquiries need only a simple form that asks what the request is about, a new project, a site visit, a tender or supply, so it reaches the right team.
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.
