Please enable JavaScript.
Coggle requires JavaScript to display documents.
Mockups - Coggle Diagram
Mockups
Anatomy of a mockup
Structure
A mockup’s overall frame is known as its structure, and shows a clear divide between the core components of the design
Structure is designed in the wireframing step, but featured in a mockup
Content
Content occupies most of the skeletal frame
Content is designed in the wireframing stage
Things from wireframe: image boxes are replaced with real images, and the text layers are redesigned to include font family, font weight, font style, and more
UI
it does represent the elements of a mockup that users interact with, including navigational components, links, buttons, sliders, form elements, and more.
In a mockup, these elements are styled as you begin to think more about form rather than function.
Surface
Without the surface layer (also known as the visual design), a mockup is essentially still a monochromatic wireframe
The addition of images, fonts, colors, and other visual elements make it a mockup.
Types of mockups
App mockups
Mobile apps are usually designed for one platform at a time, so designers only need to cater for a subset of mobile devices and screen sizes
Logo mockups
Watch mockups
Website mockups
Website mockups are a little trickier, as the design handoff naturally includes more artboards as you try to cater for more devices and screen sizes
feedback
mockups are fueled by feedback
At this stage, collaborators typically comment on visual aspects of the design that relate to both the design’s accessibility and usability
Mockup tools with sharing and commenting features include: InVision Studio, Figma, Sketch, Adobe XD, Justinmind
Design handoff
Design handoff is the process of handing over the final mockup to engineers; this includes all specs and assets so they can develop the design into a real app or website
Mockup tools with design handoff features include: InVision Studio, Figma, Adobe XD, Justinmind, Sketch (when combined with Marvel, Zeplin, Sympli, or Avocode)
Design handoff tools allow to
Copy styles as code to save developers from having to manually write them
Download image assets in a variety of resolutions
Facilitate communication between designers and developers if anything seems unclear
What is it?
A mockup suggests what the final design will look like
Mockups are essentially wireframes with the visual design layer (colors, images, typography)