IID

IID is an interior design institute, and we designed its home page. Everyone who opens an interior design school’s website wants to learn how a room should feel. So the home page is the first room they walk into, and it has to feel like a good one.

The page had a lot to carry: nine courses, four benefits, career paths, life at the institute, reasons to join, student reviews, FAQs, the director, an enrolment form and students’ work. It became one Figma frame, 1,280 pixels wide and 10,434 tall. That is about twelve laptop screens.

This is a design case study. The page was designed in Figma and has not launched as a live site, so there is no link to visit and no launch numbers to report.

Give ten sections the same treatment and you get a wall, and nobody reads a wall. So the hard part was never filling the page. It was pace: each section had to feel like a new room, while the whole scroll still felt like one building.

We set that pace with four tools and kept each of them small: two typefaces, one blue with two touches of gold, a plain grid under lines borrowed from the drawing board, and a short kit of parts that keeps coming back.

Plus Jakarta Sans does the announcing. Every section heading is set in it, bold and large, with the letters pulled in tight. The hero is tracked at −5%, which makes a heading read as one solid shape instead of a row of letters.

Inter does the reading: the menu, every paragraph, the course names and the FAQ questions. Its lowercase stands a little taller against its capitals, which keeps small paragraphs clear. You aren’t meant to notice it, and that is its job.

The colour is close to a single idea. One strong blue fills the big sections, the buttons, the icons and the open FAQ row. Headings use a far deeper navy, which reads almost black but stays in the family. Even the pale backgrounds lean blue instead of grey.

On a page this long, colour also keeps time. White gives you room. A pale tint marks a quiet change. Every few screens a full band of blue arrives, and you know you have reached somewhere new. Blue never touches blue.

About a quarter of the page is blue. About 0.02% of it is gold, and gold appears in exactly two places: the laurels around the award line at the top, and the same laurels beside the enrolment form.

So the only warm colour on the page sits next to the two moments that matter most: the first impression and the ask.

An interior project starts as a drawing, and the page keeps some of that. The hero sits on a line drawing of a room. Thin dashed lines with small dots run down the sides of sections, like the construction lines on a plan, and the FAQ rows wear the same dashes as their border.

Under those lines the layout stays plain. Nine courses could have been a long list. Instead they sit in three columns of matching cards, 345 by 104 pixels, with 40 pixels between columns and 28 between rows. The eye learns the pattern once and then just reads.

The smaller details follow the same logic. Corners grow with the card: 7 pixels on a course card, 8 on a button, 12 on a benefit tile, 17 on a review and 33 on the big feature cards. Rows of photos, reviews and career pills run off the page and fade out, so you know there is more without a single arrow.

A long page only feels calm if its parts repeat. This one gets by with very few: a white card with a soft edge, a pale square for each icon, and solid blue for whatever is active.

The FAQ shows how that works. Closed rows stay quiet: white, with the dashed edge. Open one and it fills with the page’s strongest blue. Only one row holds that colour at a time, so the eye goes straight to the answer that was asked for.

The home page was delivered as a Figma design: one frame, 1,280 by 10,434 pixels, from the hero to the footer. It has not launched, so we have no traffic or enquiry numbers to show.

What the file does show is how little a page this long needs. Two typefaces, one blue, two touches of gold and a handful of parts, all there to decide where the eye goes next and when it gets to rest.

A good room is mostly space, well arranged. So is a good page.