Compose two styles
Rather than blending two styles into a middle, this assigns them roles: one carries the structure, the other appears as an accent. Where the two fight, 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 Skeuomorphism's lettering (A humanist face suited to the purpose) 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 Skeuomorphism (Precision texture only where it serves function).
- Colour
- Build on #6EC6E0, #E8A33D, #111417 and admit one accent from #d6b47b, #7a4d2c, #39342e.
Where they fight
- Diegetic UI and Skeuomorphism share no intent, so the contrast has to become the subject rather than something to smooth over.
- 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.
- Skeuomorphism Ornament must not bury the interaction. Expect generations who don't share the metaphor.
Image prompt
An original image that takes its structure from Diegetic UI (Technique, 2009–) and its accent from Skeuomorphism (Style, 2000s–2010s). Structural cues: 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. Accent cues, used sparingly: Leather, metal, paper; Dimensional shadows; Real-world metaphors; Fine textures. 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.. Let one material quality come from the second style: Precision texture only where it serves function. Mood: Play, Technology, Exhilaration, Intimacy, Trust, Nostalgia. Color: build on #6EC6E0, #E8A33D, #111417 with a single accent drawn from #d6b47b, #7a4d2c, #39342e. Constraints: do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. Produce an original composition 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.
- Skeuomorphism 2000s–2010s / Style / UI Expression
Borrows cues from real materials and tools to make unknown interactions understandable. It names the principle, so Aqua and Brushed Metal are what the principle looked like when one company shipped it.
Share this pairing:https://indexstyle.org/compose?ids=diegetic-ui+skeuomorphism