# Standards of a properly designed website and scoring Rubric.

[Download](https://docs.google.com/document/d/1lk6ngfzFXkhYhaGIkQp_5jVFGUVigxKQ/edit?usp=drive_link&ouid=110480693423187024039&rtpof=true&sd=true)

A properly designed website should be **usable, accessible, fast, and consistent**. At a minimum, it should help visitors find what they need quickly, work well on mobile, and follow web standards for HTML, CSS, and JavaScript, along with accessibility guidelines like WCAG.

**Core standards**

**· Valid, semantic code:** clean HTML, CSS, and JavaScript that browsers can interpret reliably.

**· Accessibility:** keyboard navigation, alt text, good color contrast, proper headings, and form labels.

**· Responsive design:** layouts that adapt well to phones, tablets, and desktops.

**· Performance:** fast loading pages and optimized assets.

**· Clear structure:** consistent navigation, visual hierarchy, and obvious calls to action.

**Good UX signs**

· Users can understand the site quickly without much explanation.

· Important information is easy to find.

· The design is visually consistent across pages.

· Content is readable, concise, and relevant.

· Contact or next-step actions are easy to locate.

**Practical checklist**

· Use one clear primary purpose per page.

· Keep navigation simple and predictable.

· Make buttons and links obvious.

· Test on mobile and multiple browsers.

· Check accessibility with tools like Axe or WAVE.

· Include SEO basics like page titles, meta descriptions, and descriptive URLs.

Use this rubric to score a website from 1 to 5 in each category, where 1 = poor and 5 = excellent. A strong website should score at least 4 in the most important categories: usability, accessibility, mobile responsiveness, and performance.

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Category</strong></p></td><td colspan="1" rowspan="1"><p><strong>1</strong></p></td><td colspan="1" rowspan="1"><p><strong>3</strong></p></td><td colspan="1" rowspan="1"><p><strong>5</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Purpose and clarity</strong></p></td><td colspan="1" rowspan="1"><p>Unclear purpose, confusing messaging</p></td><td colspan="1" rowspan="1"><p>Main purpose is somewhat clear</p></td><td colspan="1" rowspan="1"><p>Purpose is immediately obvious, messaging is focused</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Navigation</strong></p></td><td colspan="1" rowspan="1"><p>Hard to find pages, inconsistent menu</p></td><td colspan="1" rowspan="1"><p>Usable but not always intuitive</p></td><td colspan="1" rowspan="1"><p>Simple, predictable, and easy to scan</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Visual design</strong></p></td><td colspan="1" rowspan="1"><p>Cluttered, inconsistent, or outdated</p></td><td colspan="1" rowspan="1"><p>Acceptable but uneven</p></td><td colspan="1" rowspan="1"><p>Clean, balanced, consistent, and professional</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Responsiveness</strong></p></td><td colspan="1" rowspan="1"><p>Breaks or looks bad on mobile</p></td><td colspan="1" rowspan="1"><p>Works on most screens with minor issues</p></td><td colspan="1" rowspan="1"><p>Adapts smoothly to all common screen sizes</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Accessibility</strong></p></td><td colspan="1" rowspan="1"><p>Missing basics like alt text or labels</p></td><td colspan="1" rowspan="1"><p>Partial accessibility support</p></td><td colspan="1" rowspan="1"><p>Keyboard-friendly, well-labeled, good contrast, semantic structure</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Performance</strong></p></td><td colspan="1" rowspan="1"><p>Slow loading, heavy pages</p></td><td colspan="1" rowspan="1"><p>Moderately fast but not optimized</p></td><td colspan="1" rowspan="1"><p>Fast, optimized, and efficient</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Content quality</strong></p></td><td colspan="1" rowspan="1"><p>Hard to read or too much filler</p></td><td colspan="1" rowspan="1"><p>Useful but not polished</p></td><td colspan="1" rowspan="1"><p>Clear, concise, relevant, and easy to scan</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Calls to action</strong></p></td><td colspan="1" rowspan="1"><p>No clear next step</p></td><td colspan="1" rowspan="1"><p>CTAs exist but are weak</p></td><td colspan="1" rowspan="1"><p>CTAs are obvious and well placed</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Trust and credibility</strong></p></td><td colspan="1" rowspan="1"><p>Looks untrustworthy or incomplete</p></td><td colspan="1" rowspan="1"><p>Some trust signals present</p></td><td colspan="1" rowspan="1"><p>Strong credibility cues: contact info, policies, proof, consistency</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>SEO basics</strong></p></td><td colspan="1" rowspan="1"><p>Missing titles/descriptions or poor structure</p></td><td colspan="1" rowspan="1"><p>Some SEO basics in place</p></td><td colspan="1" rowspan="1"><p>Good page titles, meta descriptions, headings, and clean URLs</p></td></tr></tbody></table>

**Scoring guide**

· 45–50: Excellent, production-ready.

· 35–44: Good, but needs refinement.

· 25–34: Average, with important issues to fix.

· Below 25: Weak, major redesign needed.

[Download](https://docs.google.com/document/d/1lk6ngfzFXkhYhaGIkQp_5jVFGUVigxKQ/edit?usp=drive_link&ouid=110480693423187024039&rtpof=true&sd=true)
