Consistent design with frameworks
CSS frameworks make it easier to polish your page and keep the design consistent across sections.
Workshop Takeaways
Build a custom look with free resources
There are many tools you can combine to build a custom design: colors, fonts, icons, UI patterns, and framework docs.
Smarter edits with DevTools
Chrome DevTools helps with accessibility and screen size checks, and it helps you name the exact thing you want AI to change.
Design Resources
UI For Beginners
UI (User Interface): what people see and click on your page.
Foundations
Typography
Typography is how text is styled and organized so people can read quickly.
- Use one clear
h1title at the top. - Keep body text around 16px so it is comfortable to read.
-
Use heading levels (
h1,h2,h3) to show section order.
Layout
Layout is where items sit on the page and how much space is around them.
- Break the page into simple sections: header, main, footer.
- Leave even spacing so blocks do not feel crowded.
- Line up cards and buttons so the page looks organized.
Three Types Of UI Elements
Input Elements
Collect user actions and choices
- Buttons and text fields
- Checkboxes, radios, and toggles
- Dropdowns and date pickers
Output Elements
Show system feedback and results
- Alerts, warnings, and toasts
- Badges and status messages
- Charts and progress indicators
Helper Elements
Guide navigation and context
- Navigation menus, links, and breadcrumbs
- Tooltips, icons, and notifications
- Containers like cards, modals, and sidebars
Adapted from UXPin's UI elements guide.
UX For Beginners
UX (User Experience): how easy and clear the page feels to use.
Quick UX Foundations
User First
Be Intentional About User And Goal
- Who is this page for first: students or parents?
- Pick one main goal for that audience (for example: find events, read updates, join a club).
- Keep only what helps that audience reach that goal quickly; remove the rest.
Clear Structure
Make the page easy to scan
- Use simple labels people already recognize.
- Group related content into clear sections.
- Keep spacing consistent so nothing feels crowded.
Test + Improve
Check it, then make one fix
- Preview on phone and desktop before finalizing.
- Have someone use it and ask what felt confusing.
- Apply one at a time improvement and test again.
Adapted from Justinmind's UX design guide.
Quick accessibility checklist
Accessibility means making your page easier for more people to read and use. Use this as a quick confidence check.
1) Heading order
-
Use headings in order:
h1, thenh2, thenh3. - Why: screen readers use this structure so people (and AI) can navigate sections faster.
2) Readable text size
- Keep body text around 16px so it is easier to read on phones and laptops.
- Why: very small text increases eye strain and makes longer reading harder.
3) Text contrast
- Make sure text stands out clearly from the background.
- Why: good contrast helps users with low vision and improves readability in bright classrooms.
4) Clear links and buttons
- Make clickable items easy to spot and label them clearly.
- Why: people should know what will happen before they click.
5) Simple motion
-
Avoid busy animations and support
prefers-reduced-motion. - Why: too much motion can distract users and may trigger discomfort for some people.
6) Keyboard focus check
- Press Tab from the top of the page and confirm each link/button shows a visible focus state.
- Why: this is essential for users who cannot use a mouse.