Planning a Page
Before building a webpage, determine what it’s for. Is it a resource, a transaction or one step in a longer journey? If you can’t plainly state the goal, the page is not ready to build.
Start by answering three questions:
- Who is it for? If a page is trying to serve multiple audiences, it won’t end up serving any of them.
- What do you want the audience to do? Identify the conversion or next step. Is it starting an application, submitting a form, reading and clicking to continue their journey, downloading a document or something else?
- Does this information already exist on another page? If so, improve that page instead of building another one. Multiple pages answering the same question differently is how UCF ends up contradicting itself in search results, hurting findability. Be discerning about whether you really need a new page.
How will you know it worked? Every UCF page needs Google Analytics and Search Console connected at launch, not after.
Keep in Mind
How people reach the page changes what you measure. A page found in search, a landing page behind a paid campaign or a link in an email each need their own view. Know how people are getting there before you set up your measurement.
WHAT TO BUILD WITH
Start from something already tested. Supported UCF themes, plugins and frameworks are built to meet these standards by default, which is the fastest route to a compliant, on-brand page.
UCF WORDPRESS THEMES AND PLUGINS
These are maintained in the UCF GitHub organization and tested using our accessibility and performance standards. Start here for any WordPress site.
Athena Framework
This is the front-end framework for consistent UCF styling outside of WordPress. The Athena quick start guide is the fastest path to a page that already looks and behaves like UCF.
The official UCF header
So that every page carries the same identity and baseline navigation, universityheader.ucf.edu is a shared, maintained component. It’s required on every page — no exceptions and no custom rebuilds.
Keep in Mind
Updated themes and component libraries reflecting the refreshed brand are in development. Anything built on the supported themes or the Athena Framework will carry forward.
Page Structure and Content
UCF is mobile-first. Most visitors to our sites are on a phone, so we shouldn’t treat mobile like a reduced version of a page — it is the page.
Design for small screens first and let the layout grow, rather than designing for desktop, then retrofitting into a mobile layout.
Assign One Job Per Page
Know why someone is coming to your page, and remove everything between them and that goal.
- Have one primary action per page. Everything else is smaller, quieter or further down.
- The primary action should be visible without scrolling, on both mobile and desktop.
- Navigation labels should use language the audience would use, not our internal org chart. (Example: “Tuition and Aid” instead of “Student Financial Services.”)
- Make it as simple as possible for people to get what they came for.
Make Each Page Scannable
Most people don’t read an entire page. They scan it to find what they need.
- Front-load the answer. Let the first paragraph do the heavy lifting.
- Use headings every few paragraphs, describing what’s under them.
- Write short paragraphs. Three or four lines is typically plenty.
- Use a list when the content is a list, instead of writing out an extremely long sentence or paragraph.
- Use the same content and heading order on every device. Nothing should get hidden on mobile because it “didn’t fit.”
Make It Easy for People to Act
- The action should be the most prominent thing on the page.
- Button and link text should describe what happens next. (Example: “Start Your Application” instead of “Start Here.”)
- Forms should ask for the minimum. Every extra field means fewer people finish it.
- After someone acts, confirm it and tell them what happens next.
When a Document Should be a Page
Most PDFs should actually be web pages. A typical PDF can’t be searched properly, can’t adapt to a phone, is usually inaccessible and can’t be updated without republishing the entire file. If the content is information people need, it belongs on a page.
Publish a PDF when the document needs to be printed, signed or filed as a fixed record.
When you do publish a PDF:
- Use the UCF Documents plugin rather than uploading files directly. It keeps documents tracked, replaceable and consistently linked.
- The file needs real text, not a scanned version. A scanned image of a document is unreadable to a screen reader and invisible to search.
- Give it a descriptive filename, not something vague like “Final_v3_UPDATED.pdf.”
- If it’s over 5 MB, ask yourself again whether it should actually be a webpage.
Keep in Mind
These are the practices we apply today. Component-level guidance, including patterns for specific page types, lives in the design system as it’s built.
Web Design
UCF web properties share one design language: a black and gold color palette, Oswald headlines, square corners and a dark navigation bar. All of this signals to the audience that they’re still on a UCF site as they move between pages.
Principles
- Use square corners on buttons, images, cards and other elements — no rounded corners or circles.
- Use Bold Gold for emphasis and action, but never for body copy.
- Allow generous white space.
- Photography should lead and graphics should support.
- Layout should adapt nicely to any width.
Common mistakes
- Don’t use gold text on a white background.
- Don’t rebuild the university header locally.
- Don’t have competing calls to action above the fold.
- Don’t use stock imagery as a stand-in for real UCF people.
- Don’t use decorative typefaces to replace brand typefaces.
Color on the Web
The web palette is the brand palette, with one addition approved for digital use. The ratio under each color is its contrast against the background named. Text needs at least 4.5:1 contrast ratio for accessibility compliance.
Bold Gold
HEX #EDB80D
RGB 237 · 184 · 13
Emphasis, actions and accents. Never small text on white.
Black
HEX #000000
RGB 0 · 0 · 0
Navigation, footers, dark sections and body copy.
Horizon Blue
HEX #4A8FBA
RGB 74 · 143 · 186
Links on web and digital only.
Keep in Mind
Horizon Blue is approved only for web and digital links. Do not use it as an accent color.
Web Typefaces
On web, we use the licensed digital equivalents of Gotham and URW DIN Condensed (print typefaces): Oswald, Montserrat and Roboto Mono, which load reliably and render consistently across devices. Never substitute with a decorative typeface.
Oswald
USE OSWALD FOR HEADLINES
Print Equivalent: URW DIN Condensed
Montserrat
Use Montserrat for body copy. This is lead text. It is meant for intros and callouts because it stands out more than the default copy. Use sparingly.
This is the default copy size. Use this for everyday body copy. Remember to avoid using all caps in body and to follow other writing best practices.
Print Equivalent: Gotham
Roboto Mono
USE ROBOTO MONO FOR SPECIFICATIONS – FIGURE NOTES – DATA – VERY SHORT CAPTIONS
Print Equivalent: None. Web and Digital Use Only.
Keep in Mind
The theme automatically applies styling. Do not type in all caps, even for headings. Use title case or sentence case — whichever is more appropriate for the content. For more guidance and best practices, reference the writing for webpages section.
Web Accessibility
The Web Content Accessibility Guidelines, WCAG 2.2 AA, is the minimum standard for every UCF webpage. It is a legal obligation, and the same work that makes pages faster and easier to find.
Use real alt text. Describe what the image shows and why it’s on the page. Decorative images take empty alt text.
Put headings in order. Have only one H1. Nest headings in order. Never skip a level to get a size you like.
Have enough color contrast. Use 4.5:1 for body text, and 3:1 for large text and interface components. Bold Gold on white always fails — do not use it.
Enable keyboard access with visible focus. Every interactive element must be reachable by keyboard, with a visible focus indicator.
Have targets big enough to hit with text that survives zoom. Tap targets at least 44×44px with space between them. Text must reflow and stay readable at 200% zoom, without horizontal scrolling.
Provide captions and transcripts. Have captions on all videos and transcripts for all audio. Do not use autoplay with sound.
Use descriptive link text. Write link text that describes where it goes. Do not use generic “click here” or “read more,” and do not use a URL as the link text. These tell a screen reader nothing and diminish any authority passed through the link.
Test the page with real people. Automated tools only catch some things. Test with real people, including people using assistive technology.
Page Performance and Media
A slow page conveys a careless brand — and it costs you visitors. Media is almost always the reason a page is slow.
Images
Every image earns its place, sized for where it lives.
| Asset | Max. File Size | Max Width |
|---|---|---|
| Full-width hero image | 300KB | 1920px |
| Inline content image | 150KB | 1200px |
| Card or thumbnail | 60KB | 600px |
| Whole page | 2MB | – |
- Use WebP where you can, JPEG as a fallback or AVIF when the platform supports it and size is the priority.
- Save PNG for logos, icons or anything that needs transparency. BMP and TIFF have no place on the web.
- Export images at the size they’ll actually render. A 4000px photo shrunk by CSS is still a 4000px photo weighing down the page.
- Always set width and height so the layout doesn’t jump while the page loads.
- Load images further down the page only when the reader scrolls to them. The supported themes do this by default.
Video
Video should serve the page and the audience, not slow it down.
Embed before you self-host. YouTube and Vimeo carry the compression and streaming load so your site doesn’t have to. This is the one embed that’s justified.
When self-hosting is the only option (and it usually isn’t), use WebM or MP4 (H.264), 720p recommended (1080p max), under 10 seconds and under 5 MB.
Set a static placeholder image every time so nothing shifts while the video loads.
Do not use autoplay with sound. A muted, looped background clip is the only exception, and it has to hold still for anyone with reduced motion turned on.
Video headers are reserved for high-impact pages on desktop, campaign landing pages, the flagship homepage or major announcements. Standard content pages should use a static image instead. When a video header is genuinely warranted, keep it within our standards and overlay any text in HTML rather than baking it into the video file.
No rotating sliders or carousels. Almost no one interacts with them, and the small share who do almost always click the first slide. A single strong image with one clear action outperforms a carousel.
Embeds
Default to none. Add one only when the page truly needs it.
Every embed brings its own scripts, fonts and trackers along for the ride, weight we don’t control.
- Justified: a booking or scheduling tool, a map when location matters, a payment form or a video.
- Not justified: a social feed on every page, multiple video players, pop-ups or modals most visitors will never open
- Use lazyloading, so it only fires when a reader scrolls to it or clicks.
- One embed per page is usually the right number. Two is a signal the page is doing too much.
Core Web Vitals
Google publishes three speed measures and scores every page against them. The better the score, the better the chance of appearing in search results. You can check any page against these measures for free using Google PageSpeed Insights.
| Metric | Target | What it measures |
|---|---|---|
| Largest Contentful Paint | Under 2.5s | How quickly the main content appears |
| Interaction to Next Paint | Under 200ms | How quickly the page responds when tapped |
| Cumulative Layout Shift | Under 0.1 | How much the layout jumps while loading |
Helping People Find a Page
Most people arrive at a UCF webpage through a search engine, and a rising number now arrive through an AI assistant. Both search engines and AI assistants read the same page and need the same things from it.
Lead with the answer. If the page answers a question, the first sentence should be that answer. Detail comes after it. This is what gets a page quoted in a featured snippet, a voice result or an AI summary.
State facts plainly and attribute them to sources. Name the researcher, the ranking body, the credential, the year, etc. A claim that cannot be verified should be removed, not softened to try to make it work. Specific attribution is what makes a passage safe to quote.
Fill in the metadata. The page title is what shows in a search result and browser tab. The meta description never appears on the page, but it’s what sells the click. Meta titles exceeding 50-60 characters and descriptions over 150-160 characters may get truncated. Fill in the social sharing image and description, too, so the page looks right when someone posts it to LinkedIn or texts it to a friend. Reference the writing for webpages section for how to write them.
Mark up the page so machines can read it. Structured data tells a search engine what kind of content the page holds: a program, an event, a person, an FAQ, etc. The supported themes handle most of this for you. If your theme does not, reach out to University Brand and Marketing.
Write a URL People Can Read
A URL is part of the page. People read it in search results, paste it into emails and say it out loud.
- Write in all lowercase, always.
- If needed, use hyphens between words, never underscores or spaces.
- Keep it short and readable.
- Example: “ucf.edu/admissions/tuition” is better than “ucf.edu/admissions/tuition-and-fees-information-page.”
- Describe the content, not the campaign or date. Anything with a year in it ages quickly.
Keep the Page Fresh
A page isn’t finished when it launches.
Review search queries quarterly. They tell you what people actually came for, which is often not what you built the page to answer. Use what you learn to make improvements.
Audit your pages at least annually. If a page gets almost no visits and nothing links to it, rewrite it or take it down. Set a review date when you publish so this doesn’t depend on someone remembering.
Redirect everything you move or retire. Have a 301 to the closest equivalent page, not to the homepage. Deleting a page without redirecting it breaks every link to it, discards the search authority it built and sends visitors to a dead end. If nothing equivalent exists, redirect to the nearest useful parent page. After a migration, check for redirect chains, because a redirect pointing at another redirect slows the page and eventually breaks.
Build for Organic Channels
Search engine optimization (SEO)
Ranking in traditional search results. Use clear titles and meta descriptions, semantic headings, descriptive links, fast pages and current content.
Answer engine optimization (AEO)
Being the answer in featured snippets and voice results. Lead with the direct answer in plain language, then the detail. Use question-shaped headings.
Generative engine optimization (GEO)
Being cited by AI assistants. Facts stated plainly and sourced, structured data and content a model can quote without distortion.
AI overviews
Appearing in the summary above search results. The same discipline as AEO, plus demonstrable expertise and authority behind every claim.
PreLaunch Checklist
While this isn’t an exhaustive list, check that you’ve done the basics:
- The official UCF header is in place.
- You have one H1, with headings nested in order.
- Alt text is written for every image that carries meaning.
- Contrast is checked — no gold text on white.
- Images are sized within the asset budgets.
- The URL is lowercase, hyphenated and readable.
- Anything you moved or retired has a redirect.
- Title, meta description and social sharing image are filled in.
- Google Analytics and Search Console are connected.
- You successfully opened and used the page on a phone.
Emails
Content Coming Soon
QUESTIONS ABOUT WEB AND DIGITAL EXPERIENCES?
Reach out to University Brand and Marketing as early as possible.