The Digital Designer's Dictionary is a practical and specialized tool that brings together the fundamental and emerging concepts of digital design. Designed for UX / IU designers, UX editors, researchers, front-end developers and product equipment, this resource offers clear definitions, real applications and actionable examples for each term.
From classic concepts like affordance up to methodologies such as Atomic Design, going through tools for daily use such as Auto Layout in Figure, each entry is designed to help you communicate better, design more intensively and make informed decisions.
A / B Testing
The A / B Testing is a testing methodology that compares two versions of the same page, component or content to determine which one works best based on a specific metric, such as conversion rate or clicks.
Practical application of A / B Testing: It is used to make data-based decisions, especially in optimization phases. Common tools include Google Optimize, Optimizely or VWO.
Example of A / B Testing: Try two versions of a CTA button on a home page: one with the text «Try it for free.» and another with «Start now» to see which one generates more records.
Above the fold
«Above the fold» makes reference to the visible content on screen before making scroll. It comes from the editorial design, and on the web it is crucial to capture the immediate attention of the user.
Practical implementation of above the fold: It is considered in the information architecture and visual hierarchy. The key content and calls to action must be located in this area.
Example of above the fold: In a landing page, include the main value of the product, an illustrative image and a CTA highlighted just when loading the page.
Accordion (Acordeon)
An accordion is an interactive design pattern that allows you to expand or contract content sections within the same view. It improves organization and usability in interfaces with extensive information.
Practical application of accordion: It is often used in FAQs, side menus or complex forms. Its implementation must ensure accessibility and clarity in open / closed states.
Example of accordion: A list of frequent questions where each question acts as a header that can be clicked to show or hide your answer.
Accessibility
Accessibility in digital design refers to the creation of products and services usable by all people, including those with visual, hearing, motor or cognitive disabilities. It aims to remove barriers to equitable access to information and functionalities.
Practical application of accessibility: It is applied throughout the design and development cycle. It includes good practices such as appropriate color contrast, keyboard navigation, semantic labels and alternative image descriptions.
Example of accessibility: An accessible form allows you to navigate between fields with the Tab key, has labels associated with each field and displays clear and legible error messages.
Adaptability
The adaptability describes the ability of an interface to fit different devices, screen sizes or use contexts without compromising functionality or experience.
Practical adaptability application: It is essential in context-focused and responsive design. It is achieved by means of fluid grids, half-claims, and scalable components.
Example of adaptability: A recipe web that works correctly on both desktop screens and small mobile, reorganizing the content blocks according to width.
Affordance
The concept of affordance describes the visual tracks that indicate how the user should interact with an element. He was introduced by psychologist James Gibson and adapted to the design by Don Norman.
Practical application of affordance: It applies to the design of buttons, links or icons that must communicate their functionality intuitively. It helps reduce errors and improves experience.
Example of affordance: A button with shaded and rectangular shape that looks «Pressursible» correctly communicate your affordance.
Alt text (alternative text)
The alternative text describes the content of an image so that it can be interpreted by screen readers or shown in case the image does not load. It is essential for web accessibility.
Practical application of alt text: It is included as attribute «alt» in the HTML code of an image. It should be descriptive, brief and relevant.
Example of alt text: An image of a bar chart on quarterly sales must have an alt text like «Figure showing sales growth in the second quarter».
Anchor link (Anchor link)
A anchor link is a link that directs to a specific section within the same website. Improves navigation and can positively influence user experience and positioning SEO.
Practical application of anchor link: It is commonly used in content indices, FAQs or long pages. It is implemented with the href attribute and an ID in the destination.
Example of anchor link: A side menu that allows you to jump to sections like «Specifications», «Opinions» or «Guarantee» in a product sheet.
Anchor text (Anchor)
The anchor text is the visible and clichable part of a link. It is relevant to the SEO and must clearly describe the destination of the link.
Practical application of anchor text: It is optimized in web content strategies. Avoid generic phrases such as "click here" and prefer informative expressions such as "see full accessibility guide."
Example of anchor text: In a blog article on inclusive design, a link within the paragraph says "principles of web accessibility," directing to another page with such information.
Antipatterns
Antipatterns are common but ineffective solutions that make the user's experience worse. They are usually adopted by custom or lack of analysis, and should be avoided in user-centred design.
Practical application of antipatterns: Identifying antipatterns helps improve products. Some examples include infinitely long forms, confusing confirmations or intrusive pop-ups.
Example of antipatterns: Enforcing users to register before seeing the content of a web is an antipattern that can increase abandonment.
ARIA - Accessible Rich Internet Applications
ARIA is a set of attributes that improves the accessibility of rich web interfaces, allowing screen readers to understand widgets, states and functions that are not present in a native way in HTML.
Practical implementation of ARIA: It is implemented in custom components such as leaders, manners or tabs, using roles, states and ARIA properties to communicate its function.
Example of ARIA: A drop-down menu made with JavaScript can be used «aria-expanded» and «aria-controls» to indicate whether it is open or closed and what content it controls.
Art direction (Art direction)
The direction of art in digital design refers to the coherent visual strategy that guides the use of colors, typographs, images and styles to communicate a clear brand identity.
Practical application of Article Direction: It is defined in the early stages of visual design and guides the production of interfaces, banners, illustrations or motion graphics. It's key to maintaining consistency.
Example of art direction: A welfare app uses pastel tones, soft illustrations and rounded typography to convey calm and confidence.
Atomic Design
Atomic Design is a methodology created by Brad Frost that organizes the interface components on five hierarchical levels: atoms, molecules, organisms, temperates and pages. It promotes consistency and scalability.
Practical application of Atomic Design:It is used in system design to build reusable bookstores. It allows to identify generic and product-specific components.
Example of Atomic Design: A button (atom), a search field with a button (molecule), and a complete header (body) in a design system.
Auditability
The audibility refers to the ability of a digital interface or system to be evaluated, verified and monitored by record, metric or clear documentation. It is essential for products that must meet standards or standards.
Practical application of audibility: It is considered in product design with legal, medical or financial requirements. It involves recording key interaction events and allowing traceability.
Example of audibility: On a banking platform, each user transaction is registered with a time stamp and can be consulted from the activity history.
Authentication
Authentication is the process by which a system verifies the identity of a user before giving him access. It is essential in the security of digital interfaces.
Practical authentication application: Design secure and clear login flows, with options such as passwords, two-step authentication or biometry.
Example of authentication: A digital health system requests mail and password, followed by a verification code sent to the user's mobile.
Self-completed
Self-completed is a functionality that automatically suggests or fills information as the user writes. It improves speed and accuracy by completing forms or conducting searches.
Self-completed practical application: It is used in search fields, address forms or text entries that require predictable options. It must be implemented with a sensitivity to privacy and accessibility.
Example of self-completed: In a search bar, when writing "cam," the system suggests "camera," "t-shirt" or "truck" according to popular history or terms.
Auto layout
Auto layout is a tool functionality like Figma which allows the automatic distribution of elements within a container, adapting to changes in size and content.
Practical application of auto layout: It is used to build responsive components and maintain visual consistency. It allows to define margins, alignments and flexible behavior in the face of changes.
Example of auto layout:A button with icon and text that keeps the right spacing between the two, even if the text or the size of the button is changed.
Autofocus
The autofocus attribute in HTML allows a form field to receive the focus automatically when uploading the page. It improves efficiency but can affect experience if used incorrectly.
Practical application of autofocus: It is useful in short forms, such as search or login, to speed up initial interaction.
Example of autofocus: On a login page, the field of «user» appears active as soon as it is loaded, allowing to write without clicking first.
Avatar
An avatar is a graphic representation, usually circular, that symbolizes a user in digital interfaces. It can be an image, initial or icon.
Practical application of avatar: Used in session headers, comments, chats, profiles and user lists. It is useful for strengthening identity and customization in digital products.
Example of avatar: In a messaging application, each contact shows an avatar to the left of the message, facilitating the visual identification of who each sent.
Product Backlog
It is a priority and constantly evolving list of functionalities, improvements and corrections to be developed in a digital product. It's a key artifact in agile methodologies.
Practical Backlog application: The design team works with product to refine design tickets, investigate before implementation and define acceptance criteria.
Example of Backlog: «Redesign profile screen», «Onboarding Prototype for New Users», «Correct errors in the registration form».
Background (Background)
The background refers to the background area of an interface or component, on which the main elements are available. It affects the legibility, contrast and visual perception of the content.
Practical application of Background: It is used to structure visual hierarchy, highlight or neutralize sections, and respect the design system. It can be solid, with gradient or image.
Example of Background: A form with white background on a light grey background to ensure contrast and focus.
Backup
A backup is a backup of files, data or settings that allows you to restore content in case of system errors, loss or failures.
Practical Backup application: In digital design, it applies when saving versions of files, components of Figma, system versions or documentation to avoid job loss.
Example of Backup: Before making a deep redesign, the computer doubles the master file from Figma as backup.
Banner
A banner is a prominent graphic element that is used to communicate promotions, key messages or guide attention in a digital interface.
Practical application of Banner: It is usually at the top of a page (Hero) or in intermediate sections. It must be visually attractive, accessible and avoid interfering with navigation.
Example of Banner: In an ecommerce home, a banner announces «Seasonal rebates - Up to 50% off».
Barrier
In design and technology, the sweep is the reading process that makes a scanner or laser on an original (such as a bar code or image) to capture information line by line.
Practical application of Barrido: Although more common in graphic or industrial areas, it influences how images are optimized for scanning or automatic reading.
Example of Barrido: A QR code reader uses a sweep pattern to correctly interpret the content.
Benchmark
Benchmarking in digital design is the process of analysing products or interfaces of competition or market references to extract learning and establish quality or innovation standards.
Practical application of Benchmark: It is done at the beginning of the project to know good practices, common errors or value proposals. It helps inspire informed design decisions.
Benchmark example: A UX team analyzes 5 digital banking apps to understand how they solve money transfer flow and which interface elements are most common among them.
Blinn
Blinn is a 3D graphic shading model that calculates how light interacts with a surface. It allows to soften reflexes and better define volumes.
Practical application of Blinn: It is applied in rendering for product design, games or digital animation, where it is necessary to simulate materials realistically.
Example of Blinn: When modeling a 3D bottle, Blinn shaded is applied to highlight the brightness and curvature of the glass.
Biolor
In design, bicolor refers to compositions that use only two main colors. It favours simplicity, contrast and clear communication.
Practical application of Bicolor: It is used in visual identities, illustrations, graphics or interfaces where it is necessary to reduce visual noise and facilitate understanding.
Biolor example: A dashboard of analytics shows data with two contrasting colors: blue for positive, red for negative.
Blanking
In editorial and digital processes, the draft or state of «whitening» is a preliminary version of a design, text or interface, still not finished or approved.
Practical application of Eraser: It is key to iterative processes. It allows early testing, validations and adjustments before final launch.
Example of Eraser: A team shares a draft of the new high-user flow in Figma to receive feedback from the product equipment.
Block
Block is a technique used in typographic design or mapping to reserve a space that will be occupied by an element not yet available, such as a special image or letter.
Practical application of Block: It is used in editorial design or automated content. Ensure that the overall design structure is maintained even if elements are missing.
Example of Block: In an automatic PDFs generation system, spaces are blocked for personalised names not yet received.
Bold
Bold is a typographic variant that applies a thicker piece to the letters, useful to highlight information within a text or hierarchy titles and buttons.
Practical implementation of Bold: It is used for titles, Ctis or emphasis on key phrases. It should be applied with restraint so as not to lose its contrast function.
Example of Bold: In an aid section: «Important: Remember to keep your progress before you go out.»
Borde
A edge is the line or contour that delimits a visual element, such as a card, image, form field or button.
Practical implementation of Borde: It provides structure, separation or emphasis. It must be integrated into the visual system of the product with defined spacings, radios and color.
Example of Borde: A form input has a light grey 1px edge with soft radios to maintain consistency with the other elements.
Ghost button (Ghost button)
It is a type of button with clear edge and background, generally used as a secondary option not to compete visually with the primary button.
Practical application of Ghost Button: It is used in clean or minimalist interfaces, and must maintain good contrast and visibility. It is useful for non-priority actions such as "More information" or "Back."
Example of Ghost Button: On a landing page, next to the button «Register now» a ghost button appears with the option «Know more».
Primary button
It is the most important button in an interface, which contains the expected main action on a page or flow. It must visually highlight and be aligned with user and business objectives.
Practical application of Primary Button: It is defined within the design system with own style (color, size, hierarchy) and is limited to one per screen or block.
Example of Primary Button: In a checkout, the primary button says «Confirm purchase»while other buttons like «Back» or «Edit Address» They're secondary.
Button
A button is an interactive element that allows the user to run an action, such as sending a form, opening a modal or advancing a flow.
Practical application of Button: It must have defined states (normal, over, focus, off), good contrast, appropriate size for touch interaction and clear text.
Example of Button: A button with icon and text that says «Add to cart» in a product form.
Branding
The branding is the set of visual, verbal and strategic elements that define the identity of a brand. It includes name, logo, color palette, typography, voice tone and more.
Practical implementation of Branding: It affects the entire ecosystem of the digital product: from interfaces to microcopys. It should be guided by a consistent brand manual.
Example of Branding: A close-tone personal finance app, soft green palette, rounded icons and motivational language.
Brainstorming
Brainstorming is a group creative technique used to generate ideas freely, without filters or initial judgments. It is common in design ideation processes.
Practical application of Brainstorming: It is applied in workshops, ideation sessions or early product definitions. It can be done with physical posts or digital tools.
Example of Brainstorming: In a design sprint, the team proposes ideas to improve the onboarding of new users.
Breadcrumbs
The breakcrumbs are a hierarchical navigation component that shows the current location of the user within a content structure, facilitating return to previous levels.
Practical application of Breadcrumbs: They are used in sites with complex architectures such as ecommerce or institutional websites. They improve orientation and reduce cognitive burden.
Example of Breadcrumbs: In an online store: «Home > Electronics > Telephone > Samsung».
Breakpoint
A breakpoint is a break point defined in a responsive interface that determines when the design should be adapted to a new screen width.
Practical implementation of Breakpoint: It is established by means of media claims in CSS or rules in design tools such as Figma. It helps maintain legibility and usability on all devices.
Example of Breakpoint: On a web, by reducing the screen from 1024px to 768px, the navigation menu changes from horizontal to a hamburger button.
Shine
Glow is a visual attribute that defines how clear or luminous a surface or component is. It affects visibility, contrast and aesthetic perception.
Practical application of Brillo: It fits into images, backgrounds or icons to maintain legibility. It is also used for visual effects, shading or visual accessibility.
Example of Shine: In dark mode, clear texts are balanced with a less bright background to avoid visual fatigue.
BTL - Below The Line
BTL is a marketing strategy that uses direct, segmented and high-impact actions, such as targeted activations, events or digital campaigns.
Practical application of BTL: In digital design, it is applied in landing pages, email campaigns, microinteractions or custom promotional products.
Example of BTL: A fintech launches a BTL campaign where users receive custom emails with savings recommendations and links to interactive simulators.
Bullet points
Bullet points are visual elements that organize information on lists, facilitating their reading and scanning.
Practical application of Bullet points: They are used in information texts, forms, help pages or onboarding. They help to structure key ideas in a clear and hierarchical manner.
Example of Bullet points: In a product benefits section:
- Delivery within 2 days
- Support 24 hours
- Return guarantee
Seeker
A search engine is an interface component that allows the user to locate content within a site or application through a text field.
Practical Search application: It must be accessible, offer self-completed, intelligent suggestions and handle typographic errors. It is key in products with much content such as ecommerce, media or databases.
Example of Seeker: On a course platform, the user writes «UX» and the search engine suggests categories, labels or related courses before showing the results.
Cacheo (Caching)
Caching is the process of storing data temporarily so that future requests are used more quickly. In digital design, it improves performance and reduces load times on interfaces.
Practical application of Cacheo: It applies to images, navigation data, sources and resources of IU. Its correct implementation improves the user's experience, especially on mobile devices or slow networks.
Example of Cacheo: A news app cache the latest news consulted so that when it is reopened they will be loaded instantly.
Head
The header is the top of a website or interface that contains elements such as the logo, navigation menu, user icons or search. It is key to the orientation and structure of the site.
Practical application of Header: It is designed to be visible and consistent throughout the site, with mobile adaptability and accessibility. It often remains fixed in scroll.
Example of Header: In an ecommerce, the header includes the logo, search engine, account access and shopping cart.
High box and low box
High box refers to the use of capital letters and low box to the use of lower letters. It affects the hierarchy, tone and legibility of the text on digital interfaces.
Practical application of high and low box: It is used for titles, buttons or labels. The low box favors fluid reading; the high, the emphasis.
Example of high box and low box: A button can use high box to highlight the action: «ENVIAR», while the fields use low box: «Write your name».
Call to Action (CTA)
A CTA is a message or visual element that seeks to motivate the user to perform a specific action, such as registering, buying or subscribing.
Practical application of CTA: It is designed with clear verbs of action and strategic placement. It is usually represented as a highlighted button or link.
Example of CTA: On a landing page, an orange button with the text «Start for free» head to the registration form.
Black bed
The black bed is a printing technique that uses a completely black background as a basis for highlighting bright colors and surface details.
Practical application of Black Bed: It is applied in high quality offset or digital printing, such as premium branding materials.
Example of Black bed: A catalogue of luxury products is printed with solid black background to highlight gold images.
Canvas (Canvas)
Canvas is the digital work area over which it is designed in tools like Figma, Illustrator or Photoshop. It represents the editable space where the elements are built and visualized.
Practical application of Canvas: It allows to organize multiple screens or components, define layouts, and establish collaborative working areas.
Example of Canvas: In Figma, a designer organizes in the canvas a series of frames that represent the full flow of onboarding.
Capes
Las capas son niveles superpuestos dentro de un archivo de diseño que permiten organizar y editar elementos de manera independiente sin afectar otros.
Aplicación práctica de Capas: Se usan en herramientas como Photoshop o Figma para estructurar elementos gráficos, facilitar la edición y controlar visibilidad.
Ejemplo de Capas: Una ilustración tiene capas separadas para fondo, personajes y texto, lo que permite editar el fondo sin alterar los demás elementos.
Capitular
Una capitular es una letra inicial agrandada al inicio de un párrafo o sección, usada tradicionalmente para embellecer textos largos o destacar inicios.
Aplicación práctica de Capitular: Se emplea en diseño editorial, newsletters o presentaciones con estilo clásico o literario.
Ejemplo de Capitular: En un artículo de revista digital, el primer párrafo inicia con una gran «E» capitular decorada.
Card
Una card es un contenedor visual compacto que agrupa información relacionada. Se utiliza para organizar contenido modular en interfaces.
Aplicación práctica de Card: Común en catálogos, perfiles, dashboards o resultados de búsqueda. Debe tener una estructura clara, accesible y responsiva.
Ejemplo de Card: Una ficha de producto con imagen, nombre, precio y botón de «Agregar al carrito».
Carousel
Un carousel es un componente interactivo que permite mostrar múltiples contenidos (como imágenes o tarjetas) en un mismo espacio, desplazándolos de forma horizontal o automática.
Aplicación práctica de Carousel: Se usa en homepages, portfolios o galerías. Debe ser accesible, tener navegación visible y evitar depender solo del movimiento automático.
Ejemplo de Carousel: En la portada de un ecommerce, se muestra un carrusel con banners promocionales que rotan cada 5 segundos.
Checkbox
Un checkbox es un control de formulario que permite seleccionar múltiples opciones independientes entre sí.
Aplicación práctica de Checkbox: Se emplea en encuestas, filtros o configuraciones. Debe tener etiquetas visibles, buen tamaño táctil y estados definidos.
Ejemplo de Checkbox: En un filtro de tienda, el usuario puede marcar «Talla M» y «Color azul» simultáneamente.
Chip
Un chip es un componente visual pequeño y compacto que representa información como etiquetas, filtros o elementos seleccionados.
Aplicación práctica de Chip: Se usa en inputs de múltiples selecciones, navegación por tags o resúmenes de opciones elegidas. Deben ser legibles, accesibles y tener opción de eliminación.
Ejemplo de Chip: En un campo de búsqueda avanzada, se muestran chips con los términos «UX», «Remoto» y «Junior» que el usuario puede quitar individualmente.
CIE L*a*b* (LAB Color Space)
Es un modelo de color tridimensional creado por la Comisión Internacional de Iluminación (CIE), que mide el color de forma perceptual basada en la luminosidad (L*), el eje verde-rojo (a*) y el eje azul-amarillo (b*).
Aplicación práctica de CIE L*a*b*: Se utiliza en corrección de color, calibración de monitores y diseño donde se busca precisión cromática.
Ejemplo de CIE L*a*b*: Al preparar una guía de color para impresión profesional, se convierten los valores HEX a LAB para garantizar fidelidad.
Clean IU
Clean UI se refiere a una interfaz limpia, ordenada y sin elementos innecesarios. Prioriza la legibilidad, jerarquía visual y facilidad de uso.
Aplicación práctica de Clean UI: Implica uso de espacios en blanco, tipografía clara, número limitado de colores y eliminación de ruido visual. Mejora la experiencia y comprensión.
Ejemplo de Clean UI: Una app de tareas muestra solo lo esencial: lista de pendientes, botón para añadir y filtro de fecha, sin distracciones visuales.
Clipboard
El clipboard es el portapapeles virtual del sistema operativo que permite copiar y pegar información (texto, imágenes, componentes). En diseño, se usa frecuentemente para duplicar y reutilizar elementos.
Aplicación práctica de Clipboard: Se emplea entre herramientas (Figma, Sketch, navegadores) o dentro de la misma app. Debe preservarse el formato y contexto.
Ejemplo de Clipboard: Un diseñador copia una tabla desde Excel y la pega directamente en FigJam para discutirla en equipo.
Content cluster
Un clúster de contenidos es una agrupación temática de páginas o secciones en torno a un pilar principal, optimizado para SEO y navegación estructurada.
Aplicación práctica de Clúster: Se aplica en blogs, guías o hubs de conocimiento. Mejora el posicionamiento y facilita la exploración profunda.
Ejemplo de Clúster: Una guía de accesibilidad web agrupa artículos sobre color, navegación, tipografía y testing dentro de una sección principal.
CMYK
CMYK es un modelo de color sustractivo utilizado en impresión, compuesto por Cian, Magenta, Amarillo (Yellow) y Negro (Key). Permite reproducir una amplia gama de colores sobre papel.
Aplicación práctica de CMYK: Se usa en piezas impresas como folletos, tarjetas, catálogos o packaging. Es importante convertir archivos de RGB a CMYK antes de imprimir.
Ejemplo de CMYK: Un diseñador convierte un afiche en Photoshop a CMYK para enviarlo a imprenta.
Column
Una columna es una división vertical en un diseño que ayuda a estructurar el contenido. Forma parte de la retícula o grid de una interfaz.
Aplicación práctica de Columna: Se utiliza para crear alineación, ritmo visual y modularidad. Las interfaces responsivas suelen basarse en un sistema de 12 columnas.
Ejemplo de Columna: Un diseño de blog usa tres columnas: una para navegación lateral, otra para contenido principal y una tercera para widgets o enlaces útiles.
Collage
Un collage es una composición visual que une múltiples elementos gráficos, imágenes o texturas en una sola pieza. Se utiliza con fines creativos, narrativos o experimentales.
Aplicación práctica de Collage: Común en diseño editorial, campañas creativas o moodboards. Puede hacerse digitalmente o en formato analógico.
Ejemplo de Collage: Un moodboard de inspiración para un rediseño visual combina fotos de estilo, paletas de color y tipografías superpuestas.
Tablet
En diseño digital, un archivo comprimido es uno que ha reducido su tamaño mediante técnicas de compresión, sin o con pérdida de calidad. Mejora la carga y optimización web.
Aplicación práctica de Comprimido: Se aplica a imágenes (JPG, WebP), videos y recursos UI. Debe equilibrarse tamaño y calidad.
Ejemplo de Comprimido: Una imagen de portada se exporta como WebP comprimido para que cargue rápido sin perder nitidez.
Convicted
Condensado es una variante tipográfica donde los caracteres son más estrechos de lo habitual. Permite incluir más texto en menos espacio.
Aplicación práctica de Condensado: Se usa en titulares, etiquetas o diseños donde se requiere ahorrar espacio sin sacrificar jerarquía visual.
Ejemplo de Condensado: En una tabla comparativa, los títulos de columna usan tipografía condensada para ajustarse al ancho.
Concept art
El concept art es una ilustración conceptual que representa ideas visuales iniciales para productos, videojuegos, películas o entornos digitales.
Aplicación práctica de Concept art: Se utiliza en fases tempranas de exploración visual. Ayuda a alinear la visión del producto con stakeholders y equipos creativos.
Ejemplo de Concept art: Un diseñador crea un concept art de una interfaz futurista para una app de realidad aumentada.
Contouring
Contornear es una técnica que consiste en aplicar un borde o trazo alrededor de un texto o figura para destacarlo del fondo o mejorar su legibilidad.
Aplicación práctica de Contornear: Se usa en banners, afiches o interfaces con fondos complejos. Debe aplicarse con sutileza para no generar ruido visual.
Ejemplo de Contornear: Un texto blanco sobre una imagen se contornea con un trazo oscuro para hacerlo legible.
Copyright
El copyright es el derecho legal que protege la autoría de obras originales, como diseños, ilustraciones, textos o interfaces.
Aplicación práctica de Copyright: En diseño digital, implica respetar derechos de autor, licencias y atribuciones de recursos visuales.
Ejemplo de Copyright: Una app incluye en su pie de página: «© 2025 Estudio XYZ. Todos los derechos reservados.»
Courtesy
En tipografía, las cortesías son signos o símbolos que acompañan al texto con fines de cortesía o formalidad, como ®, ™, © o abreviaciones como «Atte.»
Aplicación práctica de Cortesías: Se utilizan en textos legales, pie de página, branding y comunicaciones formales.
Ejemplo de Cortesías: En la ficha de producto se indica: «Nike® Air Max™ con tecnología ZoomX.»
Key chroma
El croma key es una técnica audiovisual que permite reemplazar un color específico (generalmente verde) por una imagen o video diferente. Se usa en edición de video y presentaciones.
Aplicación práctica de Croma key: En diseño digital, se aplica en videos promocionales o mockups interactivos.
Ejemplo de Croma key: Un video explicativo usa croma verde detrás del presentador para superponer la interfaz de la app que se está demostrando.
Cover
En diseño editorial, la cubierta es la parte externa de una publicación (como una revista o libro) que incluye portada, contraportada y lomo. Es clave para la identidad visual del contenido.
Aplicación práctica de Cubierta: Se diseña con atención a jerarquía, imagen de portada, título, branding y acabado impreso.
Ejemplo de Cubierta: El diseño de una revista digital imita una cubierta impresa, con imagen central, logo, titulares y código QR.
Text body
El cuerpo de texto es la parte principal de un contenido escrito. Incluye los párrafos corridos que desarrollan la información o narración.
Aplicación práctica de Cuerpo de texto: Debe tener tipografía legible, interlineado adecuado, buen contraste y tamaño apropiado para la lectura en pantalla.
Ejemplo de Cuerpo de texto: Un artículo de blog usa fuente serif a 16 px con interlineado 1.5 para facilitar la lectura prolongada.
Cursor (pointer)
El cursor o puntero es el ícono gráfico que representa la posición del ratón o método de entrada en una interfaz. Cambia según el contexto o tipo de interacción.
Aplicación práctica de Cursor: Se personaliza para indicar acciones como clic, selección de texto, carga o interacción con enlaces.
Ejemplo de Cursor: Al pasar el mouse sobre un botón, el cursor cambia a una mano para indicar que es clickeable.
Count drops
El cuenta gotas es una herramienta de selección de color que permite capturar un color exacto desde una imagen o diseño.
Aplicación práctica de Cuenta gotas: Se usa en software de diseño para igualar colores, crear paletas y mantener consistencia visual.
Ejemplo de Cuenta gotas: En Figma, el diseñador usa el cuenta gotas para igualar el color del botón con el del logo corporativo.
UX / IU Designer and Digital Marketing Specialist
Creating intuitive experiences and effective strategies.
