What is the difference between a wireframe and a mockup in UI/UX design?

Wireframes and mockups are both essential components of the UI/UX design process, but they serve different purposes and have distinct characteristics:

1. **Wireframe**:
   - A wireframe is a low-fidelity, simplified visual representation of a user interface design. It focuses on the structure and layout of the interface elements without including detailed design elements like colors, typography, or images.
   - Wireframes are typically created early in the design process to outline the basic framework and functionality of a website or application. They help designers and stakeholders visualize the overall layout, hierarchy, and flow of the interface.
   - Wireframes are often created using simple shapes, lines, and placeholders to represent different UI elements such as buttons, text fields, menus, and content blocks.
   - Wireframes are used to communicate the structural and functional aspects of a design, gather feedback from stakeholders, and make early design decisions before moving on to more detailed design stages.

2. **Mockup**:
   - A mockup is a higher-fidelity, more detailed visual representation of a user interface design. It includes specific design elements such as colors, typography, imagery, and styling to accurately depict how the final interface will look and feel.
   - Mockups are created after wireframes and provide a more polished and realistic representation of the design. They showcase the visual aesthetics, branding elements, and user interaction patterns of the interface.
   - Mockups help designers and stakeholders visualize the final look and feel of the design, assess the visual hierarchy, typography, and branding elements, and ensure consistency across different screens and components.
   - Mockups can be static or interactive, depending on the level of fidelity and functionality required. They are often used for client presentations, user testing, and finalizing the visual design before handing off to development teams.

In summary, wireframes focus on the structure and layout of a user interface, while mockups focus on the visual aesthetics and styling. Wireframes are low-fidelity and used to outline the basic framework of the design, while mockups are higher-fidelity and used to visualize the final look and feel of the design. Both wireframes and mockups are essential tools in the UI/UX design process, serving different purposes at different stages of the design workflow.