You are viewing this page as an ad destination.
Maister

Your design dictionary.

If you’re not a UI/UX designer and you found yourself starting to build products and websites with AI, it can be hard to describe exactly what you have in mind. You know what it looks like in your head, but you don’t have the vocabulary to verbalize it to your AI assistant. So we made it easier for you and put everything you need to know in a dictionary, so you can build the design of your dreams.

Type scaleBaseline gridAccent colourPaletteNavigationFull-bleed imageContainer
All categories

Motion

Motion is how things move on the page. It can make a site feel calm, lively or cinematic, and it is easy to overdo, so say how much you want as well as what kind.

Vale & Co.WorkStudioJournalInquire
Nothing moves.Fastest, calmest and the right answer more often than people think. Static is a choice you can name.

In a prompt“Static site, no animation”

Vale & Co.WorkStudioJournalInquire
IdentityWebsitesFilmSmall, short and under about 300ms. You should notice the page feels alive, not that something animated.

In a prompt“Subtle motion only”

Vale & Co.WorkStudioJournalInquire
Something changing over time on its own, without the visitor doing anything.

In a prompt“Animate the four steps in sequence”

Vale & Co.WorkStudioJournalInquire
Resting→Hovered
The smooth move between two states rather than a jump. One line of CSS, and it is most of what makes a site feel finished.

In a prompt“Smooth color transitions on hover”

Vale & Co.WorkStudioJournalInquire
IdentityWebsitesFilmOpacity from nothing to full. The quietest entrance there is.

In a prompt“Sections fade in on scroll”

Vale & Co.WorkStudioJournalInquire
IdentityWebsitesFilmIn from one side while fading up. Give it a short distance — 20 or 30 pixels, not half the screen.

In a prompt“Images slide in from the left”

Vale & Co.WorkStudioJournalInquire
Already readArriving nowStill below
Each section appears as it comes into view. Fine once per section; maddening on every paragraph.

In a prompt“Gentle scroll reveals, first view only”

Vale & Co.WorkStudioJournalInquire
IdentityWebsitesFilmThe same animation, started a beat apart. A hundred milliseconds between items is usually enough.

In a prompt“Stagger the cards by 0.15 seconds”

Vale & Co.WorkStudioJournalInquire
In front
Background moves slower than the text in front of it. Depth, at the cost of smoothness on older phones.

In a prompt“Light parallax on background images only”

Vale & Co.WorkStudioJournalInquire
One plank is chosen.The seat is cut.The legs are turned.
The picture changes as you scroll the text beside it. Expensive to build, and extraordinary when the story earns it.

In a prompt“Scroll-driven story in the hero”

Vale & Co.WorkStudioJournalInquire
You scrolled a little.
The page takes over the scroll and moves a whole screen at a time. People hate it, and it usually breaks on a trackpad.

In a prompt“No scroll-jacking”

Vale & Co.WorkStudioJournalInquire
Chapter onethe text keeps movingchapter two
One side holds still while the other scrolls past it. The standard way to show a product while explaining it.

In a prompt“Pinned image while text scrolls beside it”

Vale & Co.WorkStudioJournalInquire
A row that moves sideways as you scroll down. Good for a gallery, bad for anything someone has to read.

In a prompt“No horizontal scroll sections”

Vale & Co.WorkStudioJournalInquire
A line that draws itself as you arrive. Signatures, arcs and underlines — one per page.

In a prompt“Hand-drawn circle draws itself on in 1.8 seconds”

Vale & Co.WorkStudioJournalInquire
A still photograph slowly pushing in. Gives a hero image the feel of film without the weight of video.

In a prompt“Slow Ken Burns zoom on the hero photo”

Vale & Co.WorkStudioJournalInquire
The card rises a few pixels, or the image inside it grows a little. The most useful hover there is.

In a prompt“4% image zoom on hover”

Vale & Co.WorkStudioJournalInquire
Nine chairs a month·Made in Rotterdam·Thirty year guarantee·Nine chairs a month·Made in Rotterdam·Thirty year guarantee·
A line of text sliding past forever. Energetic, and unreadable if you put anything important in it.

In a prompt“Slow logo marquee”

Vale & Co.WorkStudioJournalInquire
A chair you will keep
The words themselves move. Memorable at the top of a page, exhausting anywhere else.

In a prompt“No kinetic type”

Vale & Co.WorkStudioJournalInquire
Work
A wipe or fade between pages instead of a white flash. Keep it under 400ms or it starts to feel slow.

In a prompt“Simple fade between pages”

Vale & Co.WorkStudioJournalInquire
Runs for as long as the page is open. Loaders and tickers; almost nothing else should.

In a prompt“One slow looping shape in the footer”

Vale & Co.WorkStudioJournalInquire
120ms300ms900ms
How long it takes. Interface feedback 100–200ms, something entering 250–400ms. A second is a long time.

In a prompt“Reveals take 0.8 seconds”

Vale & Co.WorkStudioJournalInquire
linearease-outspring
The speed curve. Linear looks mechanical; starting fast and settling slowly looks natural.

In a prompt“Soft ease-out on every animation”

Vale & Co.WorkStudioJournalInquire
Snappyconfident, efficient
Slowluxurious, considered
Pace is character. Fast reads as a tool; slow reads as a maison.

In a prompt“Slow and calm, nothing snappy”

Vale & Co.WorkStudioJournalInquire
Motion on
Motion reducedit simply appears
A setting on the visitor's own device. Honour it and the animation is replaced by a plain fade, or by nothing.

In a prompt“Respect reduced-motion settings”