What's the difference between a wireframe and a mockup?

A wireframe is a basic, often grayscale layout focused on structure. A mockup adds real visual design: color, typography and imagery.

Can I practice presenting designs in English in class?

Yes, an English for work class can run mock design critiques or client presentations using your actual portfolio work.

Design vocabulary in English

The list

Search a term

Design vocabulary
Term	Meaning	Spanish	Example
wireframe	a basic layout sketch of a screen	wireframe, boceto	Let's start with a wireframe before the final design.
mockup	a detailed visual draft of a design	mockup, maqueta	Here's the mockup for the new homepage.
user flow	the path a user takes through a product	flujo de usuario	This user flow has too many steps.
usability	how easy a product is to use	usabilidad	We ran a usability test with five users.
wireframing tool	software used to sketch layouts	herramienta de wireframing	We use Figma as our wireframing tool.
prototype	an early, testable version of a design	prototipo	The prototype is ready for feedback.
design system	a shared set of reusable components and rules	sistema de diseño	Everything should follow the design system.
asset	a file used in a design, like an icon or image	recurso, asset	Export the assets at 2x resolution.
responsive design	a layout that adapts to different screen sizes	diseño responsivo	The site needs to be fully responsive.
accessibility	making a product usable for people with disabilities	accesibilidad	We improved accessibility by adding alt text.
handoff	passing a finished design to developers	entrega al equipo de desarrollo	The handoff includes specs and assets.
iteration	a repeated round of refining a design	iteración	We went through three iterations before approval.
stakeholder feedback	input from people with an interest in the project	feedback de las partes interesadas	We collected stakeholder feedback before the final version.
user research	studying real users to inform design decisions	investigación de usuarios	User research showed people wanted a simpler checkout.
persona	a fictional profile representing a user type	persona, perfil de usuario	This feature was designed around our main persona.
information architecture	how content is organized and structured	arquitectura de la información	The information architecture needs to be clearer.
visual hierarchy	the order in which elements draw attention	jerarquía visual	Use size and color to create visual hierarchy.
breakpoint	a screen width where a layout changes	breakpoint, punto de quiebre	We added a new breakpoint for tablets.
style guide	a document defining visual rules for a brand	guía de estilo	Check the style guide before choosing a color.
pixel-perfect	matching a design exactly, down to the pixel	pixel perfect	The developer built it pixel-perfect.
A/B testing	comparing two versions to see which performs better	prueba A/B	We ran an A/B test on the new button color.
dark mode	a color scheme with a dark background	modo oscuro	Dark mode is now available in the app.
onboarding flow	the first steps a new user goes through	flujo de incorporación	We simplified the onboarding flow to three steps.
feedback loop	a process of gathering and acting on input	ciclo de feedback	We built a feedback loop with real users.
design critique	a structured review of a design by the team	crítica de diseño	Bring your mockups to the design critique on Friday.

How to use these at work

Many design terms stay in English even inside Spanish-language teams (mockup, wireframe, handoff), the same pattern as tech and sales vocabulary.
Actually doesn't mean actualmente. Use currently for current state: we're currently iterating on the checkout flow.
When presenting design work to English-speaking clients, lead with the user problem the design solves, then show the solution. Jumping straight to visuals without context can read as style over substance.

Practice

Questions

What's the difference between a wireframe and a mockup?: A wireframe is a basic, often grayscale layout focused on structure. A mockup adds real visual design: color, typography and imagery.
Can I practice presenting designs in English in class?: Yes, an English for work class can run mock design critiques or client presentations using your actual portfolio work.

Keep going

Want to practise this with Pili?

Book a trial class. She writes back with times in Buenos Aires time.

Book a trial class