https://dribbble.com/shots/5780745-video-frame-design
The Frame
The main purpose of the frame as a design tool is to visual differentiate from the background. The background could be anything — a desk, a brick wall, a page full of text, or a moving scene.
Why use frames?
- A frame is an alternative to proximity
Just like content placed close together is associated, a frame associates the content in it, even if they are not placed close together. - When visual grouping is not enough
You may already have used up all the other tools for grouping content, and frames are your last resort.
A frame may be borderless if there is enough contrast, like picture on a fridge. A frame with just padding may be a frame in its most basic form, created by empty space.
- Contrast
A frame can be a tool for providing an additional level of contrast.
Frames can highlight the content, sort of like an underline in text. It can be used to draw your eyes to a painting in a room, highlight an item on sale, or indicate a selected tab, or a clickable button.
There are some other ways to use frames:
- Multiple frames
When used repetitively, frames can be strong visual dividers, like double vs single lines separating traffic. They could also be nested to create groups in lists/grids. - Alignment
Frames can provide a new reference for the content within it, and therefore break from the lines that the parent content follow. It can be rotated, or curved, etc. - Elevation
This can be achieved with shadows or bezels. It creates a feel of adding an additional “layer”.
How not to use frames:
- Frames that are different but too similar
This can create confusion, and the user may not know whether to visually group them or not. The elements compete with each other to draw focus. - Frame is not central to the context
Sometimes, frames can draw unnecessary attention when the content in it isn’t that important. Remove the frame and use contrast instead. - Frame itself draws too much attention
The frame can be too ornate or big compared to what is in it. For example, a frame in the shape of a house, with a little window holding the photo (a little exaggerated but you get the idea). - A frame squeezed into a small space
Ideally a frame differentiates the content from context, but if its context is small, it can end up overcrowding. Could try something simpler instead.
Frames are a useful and flexible tool for organizing content and directing focus to the right places. They can also be beautiful on their own and a way to be creative and add style.
🎈