When designing a new web-page or adding a new feature to your product, it's important to create both wireframes and mockups - but what's the difference? In short, a wireframe is a low fidelity, minimalist approach to a design concept. It focuses on the core layout and features a new page will have, but leaves all the flash to the mockup. Mockups are higher fidelity and include color, real language, and true icons. A wireframe decides how a mockup will look, and a mockup should be an accurate, static representation of the final product.
Creating wireframes is an essential part of the product design process. Wireframes give developers, designers, and marketers the chance to walk through a new web-page or product before it's built, and stay focused on the key goals or objectives the new page is trying to achieve. Wireframes are generally simple, quick, and easily editable, which allows for strong interdepartmental collaboration during the product development process.