A new page should belong to the same website even when its content is different. Copying one layout does not achieve that. A few clear rules for typography, colours, spacing and repeated elements are more useful.
What stays fixed and what can change
I treat the logo, colour roles, typefaces and controls as fixed parts. Composition can respond to the content. A project index needs a different arrangement from an article or form, while still belonging to the same website.
Name the rules by their use. One colour carries body text, another the surface and another an important action. Separate display headings, long copy and short captions. A new page then has fewer decisions to invent.
Test the design with real content
- Can a long heading wrap?
- Are links, buttons and disabled states distinct?
- Do captions remain readable on a smaller screen?
- Do new photographs and illustrations follow the same treatment?
Motion needs shared rules too
Every section does not need its own animation. Choose a way the website uses motion and apply it where it explains something. This website repeats the paper sheet. In a case study it can show connected screens; in the contact section it can settle into place.
Content and controls must remain available with reduced motion. The rules for future pages need to cover that version too. A design system helps make decisions during further work, beyond a palette and a collection of attractive components.
First published .