Institut Ferrer i Guàrdia
New technology. The same history.
The brief
Institut Francesc Ferrer i Guàrdia is a state school in Sant Joan Despí that has been running since the 1977/78 school year: almost fifty years and three buildings. It teaches ESO, baccalaureate, three families of vocational training and transition programmes, and describes itself as a plurilingual, internationalising school. Its website had spent eleven years on Drupal, with a subtheme built to measure for the school.
A secondary school does not have one audience: it has two. Families are after the notice about textbooks or the canteen, and students are after Moodle before the bell goes; in between there are eleven sections of information — studies, the school office, departments, projects — that nobody should have to walk through to find a date.
What we did
We built the home page like the noticeboard by the front door. Open procedures first — available places, virtual queue — then the log-ins used every day (XTEC, Moodle, iEduca, email, intranet) and only then the introduction to the school. Below that, the term’s highlights — textbooks, lockers, canteen — in five identical cards: photo, headline and button.
We migrated pages, news and files from Drupal to WordPress. The new structure retains the school’s content and provides access to media records that predate the 2023 redesign. A record’s date helps place it in context; on its own, it is not the creation date of every image. The school was not rewritten from scratch: its content was moved into a new structure.
We ordered ten sections and three menu levels. Institut, Estudis, Secretaria, Actualitat, Projectes, Departaments, Coordinació TIC, AFA, Empresa and Contacte. Each stage has its own noticeboard in the school office, the school documents go out as PDFs, the floor plans go floor by floor, and there is an inbox for the companies that host work placements.
One single red, the one on the crest. #DA251C rules the header, the buttons, the links and the active menu item; the rest is paper grey, almost square corners and a 16/28 body meant for long texts. In the footer, the mandatory badges of the Departament, the ERDF and the Recovery Plan.
Today’s information. Yesterday’s archive.
A school website is not judged on its home page. It is judged on whether a family can find the notice about the lockers without picking up the phone. That is why the first thing on the screen is not who we are, but what is open today: the procedures with a deadline at the top, and the history of the school — which is long and good — one screen further down.
Institut Francesc Ferrer i Guàrdia · archive
A new website. A history preserved.
Migration also means preserving context: what each item is, where it can be found and the date in its record. This example from the school’s archive makes that visible.
Media library record date
This is not the date the photograph was taken.
- A page that gives it context
- The school’s history
- An accessible file
- The original imageimagen10.png · 923 × 632
Content has a history of its own.
The photograph is available in the WordPress media library and is identifiable on the page about the school’s history. Its record retains a date preceding the 2023 website change.
The project in numbers
What's underneath
The visual system is deliberately short: a 1,140 px container, a #F7F7F7 page background, an #EFEFEF footer and a 16 px body with 28 of leading — a ratio of 1.75 — because long texts get read here: an educational plan, the entry routes into a vocational course, the term calendar. Block headings run at 24 px bold and the corners are almost square: 1 px on the notice buttons, 6 px on the procedure ones. The red #DA251C appears 265 times and is the only thing that sets hierarchy.
One concrete example is imagen10.png: the public media library retains a record dated 5 May 2022, and the “Història del centre” page references that image. The file is accessible at its WordPress URL. Preserving content and metadata also requires checking legacy links: this example does not establish that every previous URL still works.
The rest is plumbing into the Generalitat ecosystem: thirteen direct links to XTEC, Moodle, iEduca, SAGA, Esfera, Qbid and the other platforms where the day-to-day administration actually lives; noticeboards embedded by stage in the school office; floor plans of the building, floor by floor, as PDFs; and the European funding block with the programme reference, which in a state school is not decoration but an obligation.
How it went
Gallery · the project in pictures (click to enlarge)
"Té una història de gairebé 50 anys, ja que funciona des del curs 1977/78."iesffg.cat
Credits · the people behind it
Want a result like this for your project?
