Compose styles
Rather than blending styles toward a middle, this gives them roles. The first one carries the structure, the next comes in as the accent, and anything after that shows up in a single detail. Where they fight each other, it says so before you start.
How to divide the work
- Composition
- Follow Diegetic UI: Leave the four corners of the screen empty. Distribute information across the body, the held device, and the environment, and keep those roles fixed
- Type
- Set in Diegetic UI's manner (Treat every character as printed or projected onto something in the world, so it skews with the camera. Some angles will be unreadable, so carry the same meaning in shape and color too), and let FUI (Fantasy User Interface)'s lettering (Lead with monospace and let most of the text act as texture. Only the word that must be read changes size and brightness) appear only where you want the eye to catch.
- Material
- Ground in Diegetic UI's material (Use only materials the fiction can account for, such as a lit tube or a projected plane. The style collapses when the material stops being explainable, so settle the world first); bring in exactly one thing from FUI (Fantasy User Interface) (One or two luminous colours on black, thin strokes, almost no fill. Pull the brightness down so the screen sits inside the photographed shot).
- Colour
- Build on #6EC6E0, #E8A33D, #111417 and admit one accent from #000000, #4FE3FF, #FF6A00.
Where they fight
- Diegetic UI and FUI (Fantasy User Interface) both belong to UI Expression, so the difference is small. Push the roles further apart than feels comfortable.
Caution
- Diegetic UI Building an object into the world and then printing controller button names on it mixes fiction with rules, and that is exactly where the thesis's own focus group reported the illusion breaking.
- FUI (Fantasy User Interface) Trying to make the screen genuinely operable thins out the density and scatters the information, and it stops being readable in the length of the performance.
Image prompt
Produce four original images that take their structure from Diegetic UI (technique, 2009–) and their accent from FUI (Fantasy User Interface) (style, 1997–). ## What to make Make the kind of thing Diegetic UI exists for: moving health and ammunition out of the corners of a first person game and into the world itself, or placing information in VR or in a vehicle as an object in space rather than a layer stuck to the view. Choose one subject and hold it across all four. ## Structure comes from Diegetic UI - Health or ammunition shown on the protagonist's own equipment instead of in a corner of the screen - A map the character holds up and reads while still walking, rather than a paused overlay - Panels of information projected into the air that tilt with the camera because they occupy the space - Directions given by the color of a signpost standing in the world itself Composition: Leave the four corners of the screen empty. Distribute information across the body, the held device, and the environment, and keep those roles fixed. Type and lettering: Treat every character as printed or projected onto something in the world, so it skews with the camera. Some angles will be unreadable, so carry the same meaning in shape and color too. ## Accent comes from FUI (Fantasy User Interface), used sparingly - One thing per screen that the audience is meant to read, with everything else present as density - Columns of monospaced figures updating continuously while computing nothing - Thin luminous lines on black, with shapes drawn as outlines and almost no fill - Frames and controls that look like plausible equipment rather than pure abstraction Let one material quality come from it: One or two luminous colours on black, thin strokes, almost no fill. Pull the brightness down so the screen sits inside the photographed shot. ## Colour and feeling Build the ground on #6EC6E0, carry the structure in #E8A33D and #111417, and let a single accent come from #FF6A00. These are read off real works, so a direction rather than a fixed palette. Feeling to carry: play, technique, exhilaration, futurity. ## Where they fight - Diegetic UI and FUI (Fantasy User Interface) both belong to UI Expression, so the difference is small. Push the roles further apart than feels comfortable. ## What goes wrong - Diegetic UI: Building an object into the world and then printing controller button names on it mixes fiction with rules, and that is exactly where the thesis's own focus group reported the illusion breaking. - FUI (Fantasy User Interface): Trying to make the screen genuinely operable thins out the density and scatters the information, and it stops being readable in the length of the performance. ## Across the four Keep the roles fixed in all four. Vary the framing, the scale and the arrangement so the set shows what this pairing can do rather than four versions of one picture. ## Constraints - Do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. - Do not reproduce the composition of an existing work. - Produce original compositions in the general period languages described above.
Related entries
- Diegetic UI 2009– / Technique / UI Expression
A name for the corner of game interface design where an element belongs both to the fiction and to the three dimensional world. A 2009 master's thesis at Chalmers University of Technology, written with EA DICE, mapped game UI on those two axes and reserved the word for that corner. Health glowing on the hero's own suit is the type case.
- FUI (Fantasy User Interface) 1997– / Style / UI Expression
The name that stuck to the craft of making the screens that appear inside films. It spread around the work of Mark Coleran, who says he is given credit for the term without being sure he can take it, and who describes these screens as illustration and a storytelling device that was never designed to be used. He works with light, shape, form, movement and sound so that each film screen has one thing the audience is meant to read.
Share this composition:https://indexstyle.org/compose?ids=diegetic-ui+fui