One memorable thing

Pick the one thing people will remember and give it the budget.

From frontend-design, Differentiation: what will someone remember?.

Three-second recall

Flash a pane, look once, then type what you remember.

Five equal featuresEven
TidewellChartsPricingSign in

Know the water before you leave.

  • Hourly tidesEvery harbor, every hour.
  • Offline chartsWorks past the signal.
  • Swell alertsBefore it builds.
  • Harbor notesFrom local skippers.
  • Crew sharingOne plan, whole boat.

Press Flash.

One signature headlineSignature
TidewellChartsPricingSign in

Know the water before you leave.

Hourly tides · Offline charts · Swell alerts · Harbor notes · Crew sharing

Press Flash.

/* Spend the budget on one element. Everything else stays quiet. */
.headline { font: 500 clamp(38px, 9vw, 64px)/.95 var(--serif); letter-spacing: -.03em; }
.headline .word {
  display: inline-block;
  animation: rise 300ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(var(--i) * 50ms);
}
.headline em { font-style: italic; color: var(--accent); }
@keyframes rise { from { opacity: 0; transform: translateY(.45em) rotate(2deg); } }

.features { font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .headline .word { animation-name: fade; }
}

Attention budget

Drag a region; the others rebalance to 100.

Spread evenlyFlat
TidewellChartsPricing
Know the water before you leave.
Hourly tidesOffline chartsSwell alerts
Tidewell · Terms · Status
25 / 25 / 25 / 25
Your budgetSignature
TidewellChartsPricing
Know the water before you leave.
Hourly tidesOffline chartsSwell alerts
Tidewell · Terms · Status
60 / 10 / 20 / 10
const budget = { hero: 60, features: 20, nav: 10, footer: 10 };
// leader >= 2x the next, and it is what the page is for

Write your own signature

Type a headline, pick a treatment, press Replay.

Polish everywhereGeneric

Know the water before you leave.

Hourly tides, offline charts, swell alerts and more.

shadow + gradient on 9 elements
One signatureRemembered

Tidewell

Hourly tides, offline charts, swell alerts. Get Tidewell →

budget: headline only
.sig { display: grid; font: 800 clamp(34px, 7vw, 58px)/.95 var(--condensed); }
.sig > * { grid-area: 1 / 1; }
.sig .echo { color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.sig .echo-1 { transform: translate(6px, 6px);  opacity: .9; }
.sig .echo-2 { transform: translate(12px, 12px); opacity: .5; }
.sig .echo { animation: echo-out 300ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes echo-out { from { opacity: 0; transform: none; } }

Why it matters, pros and cons

Why it matters

A first look keeps about one thing; even polish leaves no anchor.

Pros

  • People can recall the page afterwards
  • Forces a clear hierarchy
  • Restraint elsewhere is cheaper than polish everywhere

Cons

  • The wrong signature is remembered too
  • Dense tools should be remembered for speed, not flourish
  • Kinetic signatures wear off on repeat visits