En este apartado del curso sobre vocabulario técnico para desarrolladores y programadores, veremos los términos clave relacionados con el diseño de aplicaciones e interfaces de usuario. Entender estos términos es fundamental para comunicarse de manera efectiva en el campo del diseño web y de aplicaciones.
1. Vocabulario inglés: Diseño y elementos de interfaz (Design & interface elements)
El siguiente listado muestra un vocabulario relacionado con el diseño y desarrollo de aplicaciones web. Incluye términos como «Action bar» (barra de acciones), «Color wheel» (círculo cromático), «Dropdown menu» (menú desplegable) y muchos más. Cada término está acompañado de una descripción tanto en inglés como en español, lo que facilita la comprensión de su significado.
| Term (término) | Description (descripción) |
|---|---|
| Action bar (barra de acciones) | A bar containing options for actions or commands (Una barra que contiene opciones de acciones o comandos) |
| Action panel (panel de acciones) | A panel displaying options for performing actions (Un panel que muestra opciones para realizar acciones) |
| Advertisement (anuncio) | A promotional message to advertise something (Un mensaje publicitario para promocionar algo) |
| Analogous colors (colores análogos) | Colors that are adjacent to each other on the color wheel and share a similar hue, often used together in design for harmony and unity (Colores que están adyacentes entre sí en el círculo cromático y comparten un tono similar, a menudo utilizados juntos en el diseño para lograr armonía y unidad) |
| Aside (barra lateral) | A section of content that is tangentially related to the main content, often presented as a sidebar or callout box (Una sección de contenido que está tangencialmente relacionada con el contenido principal, a menudo presentada como una barra lateral o un recuadro de destacado) |
| Banner (anuncio) | A visual advertisement typically placed at the top of a webpage (Un anuncio visual generalmente ubicado en la parte superior de una página web) |
| Breadcrumbs (migas de pan) | A series of links showing the current location on a website (Una serie de enlaces que muestran la ubicación actual en un sitio web) |
| Brightness (brillo) | The lightness or darkness of a color, with brighter colors having higher values and darker colors having lower values (La claridad u oscuridad de un color, con colores más brillantes que tienen valores más altos y colores más oscuros que tienen valores más bajos) |
| Browser (navegador) | An application for accessing and viewing websites (Una aplicación para acceder y visualizar sitios web) |
| Button (botón) | An interactive element that performs an action when clicked (Un elemento interactivo que realiza una acción al hacer clic) |
| Call to action or CTA (llamada a la acción) | An element designed to prompt users to take a specific action (Un elemento diseñado para incitar a los usuarios a realizar una acción específica) |
| Callout box (Recuadro de llamada) | A styled box or container used to draw attention to specific content or messages on a webpage (Un recuadro o contenedor estilizado utilizado para llamar la atención sobre contenido o mensajes específicos en una página web) |
| Carousel (carrusel) | An interactive component that displays content in a rotating sequence (Un componente interactivo que muestra contenido en una secuencia rotativa) |
| Caption (subtítulo) | Descriptive text accompanying an image or multimedia element (Texto descriptivo que acompaña una imagen o elemento multimedia) |
| Cart (carrito de compra) | A place where selected items are stored for purchase (Un lugar donde se almacenan los artículos seleccionados para su compra) |
| Color palette (paleta de colores) | A selection of colors used in a design or artwork, typically chosen to evoke a certain mood or aesthetic (Una selección de colores utilizados en un diseño o arte, generalmente elegidos para evocar cierto estado de ánimo o estética) |
| Color psychology (psicología del color) | The study of how colors affect human behavior, emotions, and perceptions, often used in marketing and design to evoke specific responses (El estudio de cómo los colores afectan el comportamiento humano, las emociones y las percepciones, a menudo utilizado en marketing y diseño para evocar respuestas específicas). |
| Color wheel (círculo cromático) | A circular arrangement of colors showing their relationships and how they blend together, often used in color theory and design (Un arreglo circular de colores que muestra sus relaciones y cómo se mezclan entre sí, frecuentemente utilizado en teoría del color y diseño). |
| Complementary colors (colores complementarios) | Colors that are directly opposite each other on the color wheel, creating a strong contrast when used together, often used to make elements stand out (Colores que están directamente opuestos entre sí en el círculo cromático, creando un fuerte contraste cuando se utilizan juntos, a menudo utilizados para resaltar elementos) |
| Container (contenedor) | An element that holds other elements (Un elemento que contiene otros elementos) |
| Contrast (contraste) | The difference in brightness, color, or texture between elements in a design, used to create visual interest and hierarchy (La diferencia en brillo, color o textura entre elementos en un diseño, utilizada para crear interés visual y jerarquía) |
| Cross-browser compatibility (compatibilidad entre navegadores) | Ensuring that a website or web application works correctly across different web browsers, ensuring a consistent user experience. (Garantizar que un sitio web o aplicación web funcione correctamente en diferentes navegadores web, asegurando una experiencia de usuario consistente.) |
| Cursor (Cursor) | A graphical representation on a computer screen that indicates the position where user input will be received (Una representación gráfica en la pantalla de una computadora que indica la posición donde se recibirá la entrada del usuario) |
| Dark (oscuro) | Having low brightness or lightness, often associated with shades of black or gray (Tener baja luminosidad o claridad, a menudo asociado con tonos de negro o gris). |
| Dialog boxes (cuadros de diálogo) | Pop-up windows displaying messages or requests (Ventanas emergentes que muestran mensajes o solicitudes) |
| Dropdown menu (menú desplegable) | A menu that drops down when clicked on (Un menú que se despliega hacia abajo al hacer clic en él) |
| Footer (pie de página) | The bottom section of a webpage (La sección inferior de una página web) |
| Form (formulario) | An area where data is entered for processing (Un área donde se ingresan datos para su procesamiento) |
| Grid system (sistema de rejillas) | A system used in design and layout to organize content into columns and rows, providing structure and alignment for visual elements on a webpage or interface (Un sistema utilizado en diseño y diseño para organizar contenido en columnas y filas, proporcionando estructura y alineación para elementos visuales en una página web o interfaz). |
| Style guide (guía de estilo) | A set of design standards and rules for creating consistent and cohesive visual elements across a project (Un conjunto de estándares y reglas de diseño para crear elementos visuales consistentes y cohesionados en un proyecto). |
| Hamburger menu (Menú hamburguesa) | A type of menu icon consisting of three horizontal lines stacked on top of each other, typically used to represent a menu in mobile or responsive web design (Un tipo de icono de menú que consiste en tres líneas horizontales apiladas una sobre la otra, generalmente utilizado para representar un menú en diseño web móvil o adaptable) |
| Header (cabecera) | The top section of a webpage (La sección superior de una página web) |
| Hero image (imagen destacada) | A large, prominent image on a webpage (Una imagen grande y destacada en una página web) |
| Horizontal rule (regla horizontal) | A horizontal line used to separate content (Una línea horizontal utilizada para separar contenido) |
| Hover (mover el cursor por encima de un elemento) | When a user moves the cursor over an element, typically triggering an interactive response or change in appearance (Cuando un usuario mueve el cursor sobre un elemento, generalmente activando una respuesta interactiva o un cambio en la apariencia) |
| Hue (tono) | The pure color of an object, determined by its dominant wavelength in the visible spectrum (El color puro de un objeto, determinado por su longitud de onda dominante en el espectro visible) |
| Icon (Icono) | A small graphical symbol or image representing a program, file, or function on a computer screen (Un pequeño símbolo gráfico o imagen que representa un programa, archivo o función en una pantalla de computadora) |
| Image (imagen) | A visual or graphical representation (Una representación visual o gráfica) |
| Input field (campo de entrada) | An area where users can input information (Un área donde los usuarios pueden ingresar información) |
| Landing Page (Página de aterrizaje) | A web page specifically designed as the entry point for users to a website or an online marketing campaign, typically with the primary purpose of converting visitors into leads or customers (Una página web diseñada específicamente como el punto de entrada para usuarios a un sitio web o una campaña de marketing, típicamente con el propósito principal de convertir visitantes en clientes.) |
| Layout (diseño) | The visual organization of elements on a webpage (La organización visual de los elementos en una página web.) |
| Lazy loading (carga diferida) | Delaying the loading of certain elements on a web page until they are needed, improving initial loading times and overall performance. (Retrasar la carga de ciertos elementos en una página web hasta que sean necesarios, mejorando los tiempos de carga inicial y el rendimiento general.) |
| Light (claro) | Having high brightness or lightness, often associated with shades of white or pastel colors (Tener alta luminosidad o claridad, a menudo asociado con tonos de blanco o colores pastel) |
| Link (enlace) | An element allowing navigation to another webpage (Un elemento que permite navegar a otra página web) |
| Main content (contenido principal) | The primary content of a webpage (El contenido principal de una página web) |
| Menu (menú) | A list of navigation options (Una lista de opciones de navegación) |
| Mobile-first design (diseño mobile-first) | A design strategy that prioritizes the user experience on mobile devices when creating a web application, starting with design and development for small screens (Una estrategia de diseño que prioriza la experiencia del usuario en dispositivos móviles al crear una aplicación web, comenzando con el diseño y desarrollo para pantallas pequeñas) |
| Mockup (maqueta) | A visual representation or rough draft of a design, often created to communicate the layout, structure, and functionality of a website or application before it is fully developed (Una representación visual o boceto de un diseño, a menudo creado para comunicar el diseño, estructura y funcionalidad de un sitio web o aplicación antes de que esté completamente desarrollado). |
| Modal (modal) | A pop-up window that requires user interaction to close (Una ventana emergente que requiere interacción del usuario para cerrarse) |
| Monochromatic colors (Colores monocromáticos) | Different shades, tones, and tints of a single hue, created by varying the brightness and saturation (Diferentes tonos y matices de una sola tonalidad, creados variando el brillo y la saturación) |
| Navigation bar (barra de navegación) | A bar containing links for navigating a website (Una barra que contiene enlaces para navegar por un sitio web) |
| Placeholder (marcador de posición) | Temporary text indicating the type of data expected in an input field (Texto temporal que indica el tipo de datos que se espera en un campo de entrada) |
| Pointer (Puntero) | An on-screen symbol, such as an arrow, that indicates the position where input is being entered or where an action will occur (Un símbolo en pantalla, como una flecha, que indica la posición donde se está ingresando la entrada o donde ocurrirá una acción) |
| Popup (ventana emergente) | A small window that suddenly appears on the screen (Una ventana pequeña que aparece repentinamente en la pantalla) |
| Progressive web app – PWA – design (diseño de aplicaciones web progresivas) | The design and development of web applications that use modern technologies to offer an experience similar to native applications, including features such as offline access or push notifications (El diseño y desarrollo de aplicaciones web que utilizan tecnologías modernas para ofrecer una experiencia similar a la de las aplicaciones nativas, incluyendo funcionalidades como el acceso offline o notificaciones push) |
| Prototype (prototipo) | A preliminary model or version of a product, often used for testing or demonstration purposes before final development (Un modelo o versión preliminar de un producto, utilizado frecuentemente para pruebas o demostraciones antes del desarrollo final) |
| Responsive design (diseño adaptativo) | A design that adapts to different devices and screen sizes (Un diseño que se adapta a diferentes dispositivos y tamaños de pantalla) |
| Rough draft (borrador) | An early version or preliminary draft of a document, design, or project, typically created to capture initial ideas or concepts before undergoing revisions or refinement (Una versión inicial o borrador preliminar de un documento, diseño o proyecto, generalmente creado para capturar ideas o conceptos iniciales antes de ser revisado o refinado) |
| Saturation (saturación) | The intensity or vividness of a color, with fully saturated colors appearing vivid and vibrant, while desaturated colors appear more muted (La intensidad o viveza de un color, con colores completamente saturados que aparecen vívidos y vibrantes, mientras que los colores desaturados aparecen más apagados) |
| Scrollbar (barra de desplazamiento) | A vertical or horizontal bar allowing scrolling through content (Una barra vertical u horizontal que permite desplazarse por el contenido) |
| Sidebar (barra lateral) | A vertical column on the side of a webpage (Una columna vertical en el lateral de una página web) |
| Slider (deslizador) | An interactive component for selecting a value by dragging a slider control (Un componente interactivo que permite seleccionar un valor arrastrando un control deslizante) |
| Sketch (boceto) | A rough drawing or outline that represents the basic structure or concept of a design, often used as a starting point for further development or refinement (Un dibujo o esquema aproximado que representa la estructura básica o el concepto de un diseño, a menudo utilizado como punto de partida para un desarrollo o refinamiento posterior) |
| Thumbnail (miniatura) | A reduced version of an image or video (Una versión reducida de una imagen o video) |
| Tooltip (mensaje emergente) | A help message that appears when hovering over an element (Un mensaje de ayuda que aparece al pasar el cursor sobre un elemento) |
| UI/UX design (diseño de interfaz de usuario/experiencia de usuario) | The process of designing user interface and user experience (El proceso de diseñar la interfaz de usuario y la experiencia del usuario) |
| Usability (usabilidad) | Usability is the ease of use and efficiency of a product or system, measured by how well users can accomplish their goals (La usabilidad es la facilidad de uso y eficiencia de un producto o sistema, medida por lo bien que los usuarios pueden alcanzar sus objetivos) |
| User interface, UI (interfaz de usuario) | The part of a program or system that interacts with the user (La parte de un programa o sistema que interactúa con el usuario) |
| User Experience, UX (Experiencia de Usuario) | The overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use (La experiencia general de una persona al usar un producto como un sitio web o una aplicación informática, especialmente en cuanto a lo fácil o agradable que es de usar). |
| Website architecture (arquitectura de sitio web) | The structure and organization of a website (La estructura y organización de un sitio web) |
| Web accessibility (accesibilidad web) | The practice of ensuring that websites and web applications are usable by people with disabilities, including those who have visual, auditory, motor, or cognitive impairments (La práctica de garantizar que los sitios web y aplicaciones web sean utilizables por personas con discapacidades, incluyendo aquellos que tienen discapacidades visuales, auditivas, motoras o cognitivas). |
| Wireframe (maqueta) | A simplified visual representation of a webpage (Una representación visual simplificada de una página web) |
Diferencia entre «wireframe«, «prototype» y «mockup«. El wireframe se centra en la estructura y disposición de los elementos, el prototipo agrega funcionalidad interactiva y el mockup muestra el diseño visual detallado pero no funcional. Ver más información sobre los distintos tipos de prototipos
Diferencia entre UX y UI. UX se centra en la experiencia general del usuario, abarcando aspectos como la usabilidad, la accesibilidad y la satisfacción del usuario en todo el proceso de interacción con un producto o servicio. Por otro lado, UI se refiere al diseño visual de la interfaz, incluyendo elementos como diseño gráfico, disposición de elementos y estilo visual, con el objetivo de crear una interfaz atractiva y fácil de usar.
2. Ejercicios sobre diseño y elementos de interfaz
Enriquece tu dominio del vocabulario relacionado con el diseño y los elementos de interfaz a través de estos ejercicios prácticos. Te recomendamos también explorar el artículo sobre vocabulario de verbos relacionados con acciones en informática.
2.1. Ejercicio 1: Crucigrama
Completa el crucigrama con vocabulario de elementos de diseño e interfaz. Complete the crossword puzzle with design & interface elements vocabulary.
2.2. Ejercicio 2: Completa los huecos
Completa los espacios en blanco con los términos correctos sobre elementos de diseño e interfaz. Fill in the blanks with the correct terms about design and interface elements.
2.3. Ejercicio 3: Preguntas de verdadero y falso
Resuelve los siguientes ejercicios de verdadero o falso sobre los términos relacionados con diseño e interfaz. Solve the following true or false exercises about terms related to web design and interface.