Home › About this redesign
About this redesign
A proposal for the Principal and the Board — what was changed, why, what the school still needs to supply, and what it would cost to publish.
Why change anything
The content on the existing website is good. The history is detailed, the Philosophy, Vision and Mission are complete, the admission requirements are specific, and there are real photographs of the campus and the school year. The presentation is what works against it.
Seven problems, in the order a visiting parent would meet them:
- An advertisement sits above the school’s own name. Every page opens with a Wix banner reading “This website was built on Wix. Create yours today.” It is the first thing a parent sees.
- The layout does not fit a phone. The school’s name runs off both edges of the screen. Most Filipino parents will open this site on a phone, and on a phone it is unreadable.
- The rainbow gradient background sits behind every page and fights with every photograph placed on it.
- Three competing typefaces in the header alone — a heavy condensed face for the school name, a monospaced face for the former name, and a blue script for the levels offered.
- Nine top-level menu items with no hierarchy, and a Gallery page that is a grid of orange buttons captioned “Click buttons to see pictures.”
- Information locked inside images. The faculty roster, the recognition permits and the school calendar exist only as photographs of printed sheets. They cannot be read on a phone, searched, copied, or updated without redoing the artwork.
- No way to act. There is no enrollment button anywhere on the site, even though admissions is the main reason a parent visits.
What this redesign does
Keeps
- The school seal, unchanged
- The colours from that seal
- The Philosophy, Vision and Mission, word for word
- The full founding history
- The program objectives and admission requirements
- The school’s own photographs
- The KJCSI Hymn and Proverbs 22:6
Changes
- Works on a phone, tablet and desktop
- Nine menu items reduced to seven, with related pages grouped
- An enrollment call to action on every page
- Text that was trapped in images becomes real text
- The gallery becomes a filterable grid
- No third-party advertising
- Meets WCAG 2.1 AA for colour contrast and keyboard use
Design decisions
The colours come from the school seal
Nothing here is invented. The four brand colours were sampled directly out of the logo image:
| Colour | Value | Where it appears in the seal |
|---|---|---|
| Royal blue | #003080 | Outer ring and seal lettering |
| Orange | #F08030 | The globe’s right hemisphere |
| Green | #6FAF40 | The crescent at the globe’s left |
| Sky | #0090C0 | The highlight inside the blue dome |
One adjustment was necessary. The orange and the green are beautiful as shapes but too light to carry text: orange with white lettering has a contrast ratio of 2.4 to 1, where the accessibility standard asks for 4.5. So each has a darkened partner used only for text and small elements, while the exact seal colours are used for everything you actually see as colour. The orange “Enroll now” button is the true seal orange, carrying dark text rather than white, at 6.6 to 1.
All 33 colour combinations in the site were checked against WCAG 2.1 AA. All 33 pass.
Two typefaces, each with a job
Headings are set in Source Serif 4 — a serif reads as an institution rather than a start-up, and it suits a school that has been here since 1992. Everything else is Inter, chosen because it stays legible at small sizes on a cheap phone screen. Both are free and open-licensed, so there is nothing to buy and nothing to renew.
Built to be maintained by whoever comes next
The site is plain HTML, CSS and JavaScript. No framework, no page builder, no monthly platform fee, no login. Any person who can edit a text file can change a phone number. It will still open in ten years.
Corrections made to the text
The Philosophy, Vision and Mission are reproduced word for word — they are official statements and were not touched. Elsewhere, these spelling and grammar errors from the current site were corrected. They are listed here so they can be approved rather than discovered.
| Current site | Corrected to |
|---|---|
| Clubs & Orgnaization | Clubs & Organization |
| School Govenment Recognition | School Government Recognition |
| sanitized comport rooms | sanitized comfort rooms |
| Danilo Soledad, Jr. Teasurer | Danilo Soledad, Jr., Treasurer |
| Girls Scouts of the Philippines | Girl Scouts of the Philippines |
| Proverbs 22:6 … depart from it..g | … depart from it. |
| “Pre School,Elementary & High School” | “Preschool, Elementary & High School” |
One phrase was deliberately left alone: “a foundation in building a long life worth” appears in the official Vision. It reads oddly in English, but changing an adopted Vision statement is the Board’s decision, not a copy edit.
What the school still needs to supply
The design holds a place for each of these. None of them blocks a decision on the design itself.
Photographs worth taking fresh
- The school building from the street — there is currently no photograph of the campus exterior anywhere on the site.
- A portrait of the President and of the Principal, for the welcome message.
- One classroom-in-session photograph per grade band. The existing classroom photos are good but empty of children.
- Staff headshots at a consistent crop, so the faculty page reads as one set.
Information currently locked inside images
- The faculty and staff roster for SY 2026–2027 — names and positions as text.
- The DepEd recognition and permit numbers with their dates.
- The approved school calendar as a list of dates.
- The student handbook as a PDF.
Details to confirm
- Registrar and cashier office hours.
- The enrollment period for the coming school year.
- Whether current tuition and fees should be published on the site.
- The school’s exact map pin.
- The official Facebook page address, for the footer.
A note on the logo
The seal is used here exactly as it exists today, unchanged.
One fact is worth putting in front of the Board, because it will matter the next time the school orders a tarpaulin or a letterhead: the only copy of the logo the school appears to have is 199 by 195 pixels. That is large enough for a website header and far too small for anything printed. Enlarged past about two inches it goes soft and shows compression edges.
If the school still has the original artwork — an Illustrator, CorelDRAW, PSD or PDF file from whoever drew the seal in 2018 — it is worth finding and keeping safe. If it no longer exists, the seal can be redrawn as vector art at any time: same design, sharp at any size, usable for print. That is a separate, small piece of work and it is not part of this proposal.
What it would cost to publish
The site itself is a folder of files. It can be hosted several ways. These are the realistic options, cheapest first. Prices are approximate and should be confirmed at the time of purchase.
| Option | Hosting | Notes |
|---|---|---|
| GitHub Pages, Netlify or Cloudflare Pages | Free | All three host a site like this at no cost, on their free tiers, with HTTPS included. A custom domain can be pointed at any of them. |
| Custom domain e.g. kjcsi.edu.ph or kjcsi.org |
Roughly US$10–25 per year | Optional but strongly recommended. A school address of its own reads far better
than a free subdomain. .edu.ph domains have eligibility requirements
worth checking early. |
| Shared web hosting | Roughly US$3–8 per month | Only needed if the school also wants email at its own domain, which would replace the two Yahoo addresses currently in use. |
| Staying on Wix | Paid plan | Removes the advertising banner and allows a custom domain, but the layout limitations remain and the fee recurs monthly for as long as the site exists. |
The recommendation is the first two lines: free static hosting plus a domain the school owns. Total ongoing cost is the domain renewal alone.
Not included in this proposal
- Buying the domain and setting up DNS.
- A content management system or admin login — pages are edited as files.
- A working contact-form backend. The form on the Contact page opens the sender’s own email app with the message ready. A true form that delivers to an inbox can be added later, free, through the hosting provider.
- Online enrollment or payment.
- Migrating or closing the existing Wix account.
Have a look around
Every page in this proposal is complete and clickable. Open it on a phone as well — that is where most parents will see it.