Concept build · Abu Dhabi
Lanternfield International School A school website design for Abu Dhabi, a concept build
Lanternfield International School is a fictional British-style school for ages 3 to 18 in Khalifa City, Abu Dhabi, and we designed and built its full homepage to show what a school website for the emirate can do. Lanternfield is invented, and nothing on the page claims otherwise. Curriculum by stage, an admissions timeline, fees in full with a calculator, bus zones, a filterable calendar and a tour request form with the next tour mornings all run in the browser.
A concept build: Lanternfield International School is a fictional brand we created to show how we design and build a school website for Abu Dhabi. 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 fee calculator for up to four children, with sibling discounts, three bus zones and per-year or per-term totals, or open it in a new tab.
How we designed a school website for Abu Dhabi
Answers before adjectives
A family moving to Abu Dhabi asks every school the same five questions: what will my child learn, when do we apply, what does it cost, how does the bus work and what help is there if my child needs a little extra. So the principal's welcome opens with a numbered list of exactly those questions, and the full fee table sits on the homepage with what is and is not included listed beside it.
Warm, not marble
Instead of marble and gold, Lanternfield is cream pages with solid sky, sunflower and sand colour blocks, a rounded Fredoka headline face and arched photo frames that echo the lantern in the logo. The school's Arabic name, in Baloo Bhaijaan 2, sits beside the lantern mark in the header and again in the footer.
The UAE school year, built in
The office hours run Monday to Thursday with a short Friday, the calendar marks UAE National Day celebrations on a school day and the admissions steps follow an August intake with applications opening in November. The photographs were generated to look like the emirate: a shaded sandy garden under a sail, a study centre lit through a carved timber screen and a courtyard around a ghaf tree.
The inspection report, where parents look
Every private school in Abu Dhabi is licensed and inspected, and parents ask for the latest report early on. The page gives it a panel of its own between the fees and the campus, where a live site would link the original document with its publication date. In the demo that panel is labelled and left empty.
What the homepage includes
- Hero and key facts
- Principal's welcome
- Curriculum by stage
- Wellbeing and inclusion
- Admissions timeline
- Fees and fee calculator
- Inspection and licensing
- Campus and facilities
- Bus zones and uniform
- School calendar
- Parent portal sign-in
- Tour booking
Features and interactions
- Fee calculator for up to four children, with sibling discounts, three bus zones and per-year or per-term totals
- Admissions timeline that checks today's date and marks how far the August 2027 intake has got
- Curriculum tabs for Early Years, Primary, Secondary and Sixth Form, with arrow-key navigation
- School calendar that filters by admissions, whole school, Early Years, primary and secondary
- Tour request form that lists the next six Tuesday and Thursday tour mornings (it sends nothing)
- Bus zone map in SVG with rings for three zones, described in words for screen reader users
- Photographs uncovered by a curtain wipe as they scroll into view; with reduced motion on, they are simply in place
The whole page, top to bottom
Palette and type
- Cream #FBF4E6
- Navy ink #14304D
- Sky #8CC4EC
- Sunflower #F4B731
- Terracotta #D9643A
Type: Fredoka, Figtree, Baloo Bhaijaan 2.
Languages: English.
How it is built
- Hand-built HTML, CSS and JavaScript, no framework
- GSAP 3.15.0 with ScrollTrigger and SplitText
- Lenis 1.3.26 smooth scrolling
- Photographs generated with Higgsfield (Nano Banana Pro), served as WebP, with AVIF for the hero
- Fredoka, Figtree and Baloo Bhaijaan 2 from Google Fonts
- About 750 KB on desktop and 450 KB on a phone, measured on our machine on 27 Oct 2026
Need a school 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 school websites, our web development service, our website prices and how we work with businesses in the UAE, or browse every concept build.
Questions
What should an international school website in Abu Dhabi include?
Parents look first for the curriculum at each stage, the admissions steps and dates, the full fee table, bus zones and how to book a visit. They also expect to find the school's licence details and its latest inspection report, linked to the original document. Wellbeing, inclusion support and a calendar of open mornings help a family decide whether to visit.
Should a school website in Abu Dhabi publish its fees?
Yes. Fees are one of the first things parents weigh, so a table by year group, with what the fee covers and what costs extra, keeps a family reading instead of writing in to ask. Families with more than one child also want the sibling discount and the bus fare for their area added up, which a small calculator does on the spot.
What makes a school tour booking form easy for parents?
Few fields and real dates. Ask only for the parent's name, email, phone and the child's year group, and offer actual tour mornings to pick from rather than a free date box. Next to the form, say when tours run, how long they take and who will show the family round, so the visit feels arranged before it is booked.
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.
