Wireframes are helpful in the early stages of design so that people do not get distracted by the styling of the interface while discussing functionality. In wireframes, it is perfectly acceptable to have placeholder text and empty content blocks while details are still being determined. Because color is the first thing that humans notice when they look at an interface, it is very easy for people to focus on look and feel when they should be focusing on workflow and interactions. By removing color and using less detailed images for initial discussions, it allows product teams to hone in on the functional details of the design, such as location of elements, labeling, and overall layout. Once these details are decided, user stories can be effectively written and design can move from wireframes to mockups.
Mockups should look as close as possible to the intended final application. While low-fidelity wireframes are beneficial for discussion purposes, they can be relatively vague for depicting requirements. In comparison, high-fidelity mockups provide a more accurate representation of the final product. They display all the necessary elements, typography, styling, terminology, etc. that the application will have. While wireframes may leave some room for interpretation with filler text and undefined content areas, mockups should be a realistic representation of the product down to the exact colors, content, and pixel sizes. They are ideal for handing off requirements to the development team so that there is little to no room for error. For an additional level of detail, annotated mockups provide a visual representation as well as written information about specific elements on the page. Mockups, in combination with user stories, provide a precise textual and visual depiction of requirements that allows for increased understanding by all involved parties.
Mockup (Left); Wireframe (Right)