Trends come and go; foundations do not. Web design basics — hierarchy, layout, typography, color, accessibility, and responsive behavior — determine whether people can understand your offer and trust your brand.
Mastering them will not make every site identical; it will keep creative choices from collapsing into confusion when real content and real devices arrive. Orpheus teaches and practices these fundamentals across web engagements because flashy concepts fail without them. Whether you are briefing an agency, evaluating a template, or building in-house, the checklist below is what you need to know before debating aesthetics or animation libraries. Critique work against user tasks before personal taste; basics exist to make the task finishable under distraction. Teach clients to spot hierarchy failures with a five-second test: cover the logo and ask what the page is offering.
Hierarchy tells visitors what matters in what order
Size, weight, spacing, and placement create a reading path. Strong hierarchy answers three questions quickly: what is this, why should I care, what should I do next. Weak hierarchy presents every element at the same volume until users invent their own path — or leave for a competitor who made the path obvious. Critique work against user tasks before personal taste; basics exist to make the task finishable under distraction. Teach clients to spot hierarchy failures with a five-second test: cover the logo and ask what the page is offering.
Start content design in outline form before visual styling. If the story is muddy in plain text, typography and color will not save it. Hierarchy is editorial before it is decorative, and that discipline separates professional web design from slide-deck aesthetics pasted onto a page. Limit competing focal points in the first viewport. One primary message and one primary action beat a collage of equal-weight modules that narrate indecision. Critique work against user tasks before personal taste; basics exist to make the task finishable under distraction.
Layout systems create rhythm instead of random placement
Grids, consistent margins, and predictable section pacing help pages feel intentional. Alignment is not pedantry; it is how the eye rests between decisions. Crowding and arbitrary offsets signal amateur work even when brand colors are correct and photography is strong. Teach clients to spot hierarchy failures with a five-second test: cover the logo and ask what the page is offering. Establish content widths and line lengths that stay readable when editors paste long paragraphs without designer help.
Leave breathing room around primary CTAs and media. Density can be a stylistic choice, but it must still be systematic across templates. Responsive layouts should reflow with the same logic, not dump a desktop composition onto a phone and hope pinch-zoom forgives you. Reuse spacing tokens. When every section invents its own padding, the site feels restless. Rhythm is a basic that visitors feel as calm even when they cannot name it.
Typography and color carry brand and readability together
Choose type for legibility at body sizes and character at display sizes — then limit the palette of sizes and weights so pages stay coherent. Color should support contrast and meaning, not fight text or create inaccessible combinations that look fine on a calibrated monitor. Establish content widths and line lengths that stay readable when editors paste long paragraphs without designer help.
Document tokens: text styles, brand colors, neutrals, and interactive states. A small system beats a one-off masterpiece that cannot scale across fifty pages and a blog. Basics are what make growth possible without redesigning every new landing page from scratch. Test type on mobile early. Many “brand fonts” fail at 16px on a bright sidewalk. Readability is brand equity, not a compromise against personality.
Navigation and wayfinding reduce cognitive load
Labels should match user language, not internal org charts or legacy product codenames. Persistent navigation, clear current-location cues, and sensible footers help people recover when they wander. Clever menu metaphors that obscure destinations are not innovation; they are obstacles. Default components should encode accessible contrast and focus states so exceptions become conscious choices. Responsive basics include thumb reach and sticky CTA behavior, not only column counts at breakpoints.
For complex offerings, consider guided paths from the homepage rather than dumping every service in equal weight. Pair IA thinking with UX priorities from why UX cannot be an afterthought. Structure is a design basic, not a separate documentation chore for someone else later. Keep the primary nav short enough to scan. Overflow menus and mega-menus can help, but only when categories are truly clear. Ambiguous parent labels create dead ends dressed as options.
Accessibility and responsiveness are baseline quality
Design for keyboard users, screen readers, and varied vision from the start. Tap targets, contrast, and alternatives for non-text content belong in the same conversations as mood boards. Mobile-first thinking ensures constraints inform composition rather than breaking a fragile desktop layout later. Keep a living examples page of good and bad internal patterns; teams learn faster from their own artifacts than from abstract rules.
Test on real devices. Emulators help; hands, networks, and bright environments teach more. Responsive design is not merely stacking columns — it is re-prioritizing content so the primary job of each page survives small screens and impatient thumbs. Build accessible components once and reuse them. Basics compound when the design system encodes them, instead of hoping each new page remembers the checklist. Responsive basics include thumb reach and sticky CTA behavior, not only column counts at breakpoints.
Motion, media, and performance finish the foundation
Subtle motion can guide attention; excessive motion creates noise and accessibility issues for vestibular sensitivity. Images and video should support the message and meet performance budgets tied to Core Web Vitals. Basics include knowing when not to animate and when a still frame is stronger. Critique work against user tasks before personal taste; basics exist to make the task finishable under distraction.
When foundations are solid, distinctive brand storytelling has a place to live — explore that next in What Story Is Your Website Telling About Your Brand?. For examples of fundamentals executed with craft, browse our work and about. Treat performance as a design requirement in critiques. If a composition cannot ship within budget, it is unfinished design, not merely unfinished engineering. Keep a living examples page of good and bad internal patterns; teams learn faster from their own artifacts than from abstract rules.