Put everything on a grid
The calmest layouts share invisible edges. When elements line up to the same few columns, the eye feels an order it cannot see. Reduce how many alignment points you use and a busy page settles down immediately.
Showcase
Six ideas worth studying
You learn design faster by naming what is working. Here are six fundamentals, each shown as a specimen with the single lesson to carry into your own work. These are also the visual system behind this site, built entirely in code, no stock photos.
Kept byHardy Design Co.6 studiesLast change
Assembled by the studio rather than credited to a person. Nothing here is a client project or a case study, and no specimen is offered as work we were paid for. A study earns its place by teaching one idea cleanly, and it gets pulled the moment it stops doing that.
Build depth by layering
Overlap, shadow, and a little offset tell the eye what sits in front. A small amount goes a long way. Flat is fine, but one considered layer can turn a static block into something with a front and a back.
Give the eye one place to land
Composition is about a single focal point and everything else arranged around it. If two things fight to be first, neither wins. Decide what matters most, make it clearly dominant, and let the rest support it.
Restraint reads as confidence
One color used at several strengths looks more expensive than five colors fighting. Depth comes from tints and shades of a small palette, not from adding more hues. When in doubt, remove a color.
Let type carry the design
Sometimes the type is the whole composition. Big, well spaced, and confident, a headline needs no decoration around it. Before you reach for graphics, ask whether the words set well would say it better.
A mark that survives being tiny
The strongest marks are simple enough to work at the size of a favicon and in a single color. If it needs detail or a gradient to read, it is a picture, not a mark. Simplicity is what scales.
Two of these are not opinions
Most of what is above is judgment, and it is offered as judgment. The vector and alignment claims are documented elsewhere by people whose job it is, and these are the pages we read.
- MDN Web Docs, SVGWhy a vector mark holds together at any size, including the favicon scale the last specimen is arguing about.
- MDN Web Docs, CSS grid layoutThe mechanics behind the shared edges in the first specimen, for the point where you stop sketching a grid and start building one.
- W3C Web Accessibility Initiative, WCAG overviewHierarchy has to survive being read aloud as well as looked at, and contrast has a defined threshold rather than a house preference.