Creating a mock up is an important part of the design process. A mock up allows you to quickly visualize and test a design concept without investing time and money into full production. Mock ups can be created for websites, mobile apps, publications, packaging, and more. The type of mock up you create will depend on your project needs and goals.
Why create a mock up?
There are several key reasons to create a mock up during the design process:
- Visualize ideas – Being able to see a design concept come to life makes it much easier to evaluate, refine and communicate the idea.
- Test functionality – Interacting with a mock up can help identify any usability or functional issues with a design before development begins.
- Gather feedback – Share mock ups with stakeholders, users or clients to get input and feedback on the design direction.
- Save time and money – Revisions to a mock up can be done quickly and cheaply compared to changing a finished product.
- Guide development – A mock up provides a clear visual guide for developers or engineers to follow as they build out the final product.
Overall, mock ups allow you to fail fast and iterate quickly at the beginning of a project, ultimately saving significant time, money and headaches down the road.
Types of mock ups
There are a variety of mock up types to choose from, depending on your goals and needs:
Wireframes
Wireframes focus on content structure, layout and information hierarchy. They are typically black and white and depict the skeletal framework of a design. Wireframes are especially useful for web and mobile designs in the early stages.
Storyboards
Storyboards visually map out a linear user experience step-by-step. They are often used for designing user flows or interactions.
Design Comps
Design comps add typography, images, color, and other visual elements to give a realistic impression of the final design. They focus on look and feel.
Physical Mock ups
Physical mock ups are 3D models made out of materials like clay, foam or paper. They allow you to evaluate the physicality of an object such as size, shape and ergonomics.
Functional Prototypes
Functional prototypes act as a working model of the final product. They enable testing of capabilities and features in an interactive way.
The level of visual refinement and interactivity will increase from wireframes to design comps to functional prototypes. Determine what fidelity of mock up makes the most sense for your project goals and intended audience.
Creating a wireframe
Wireframes are one of the most common starting points for web and mobile mock ups. Here are some tips for creating effective wireframes:
Keep it simple
Focus on structure, layout, hierarchy and relationships in your wireframe. Details come later. Use basic shapes, monochrome elements, and generic placeholders for images and text.
Map out key pages
Determine the main screens or pages needed for your website or mobile app. Typical pages include a homepage, content listing pages, detail pages, forms, and call-to-action pages.
Sketch versions by hand
Sketching with paper and pencil allows you to iterate quickly on ideas. Don’t get bogged down trying to create perfect digital wireframes too early.
Determine page elements
Decide what elements live on each page, like navigation, headings, body text, images, buttons, etc. Group related elements into sections or modules.
Use placeholders
Use boxes, lines and shapes to indicate where elements will go. You can label them with the element name or content type.
Map user flow
Indicate how a user will navigate from page to page with connectors or arrows. Annotate with any interactions.
Focus on information hierarchy
How you structure and prioritize information on the page directs users attention. Make key elements prominent through size, positioning, contrast, etc.
Following wireframing best practices will ensure you create effective blueprints to guide your website or app design.
Creating a design comp
Once you have completed initial wireframes, the next step is to build out design comps that incorporate brand elements like color, typography and graphics. Here are some tips for creating compelling design comps:
Choose a visual style
Determine an appropriate visual style for your brand or project. Will it be modern and sleek? Fun and playful? Minimalist? Refer to brand guidelines if they exist.
Establish a color palette
Select primary and secondary colors that align with your visual style. Use a tool like Adobe Color to experiment with complementary color schemes.
Pick font styles
Choose 1-3 fonts for headings and body text. Vary weights and styles for visual interest.
Include supportive imagery
Select engaging, relevant photographs to reinforce your message and connect with users emotionally.
Illustrate complex concepts
Use illustrations to explain complicated ideas or show abstract workflows. Icons can also aid usability.
Build out key screens
Expand your wireframes into design comps one page at a time. Add all necessary visual elements to bring the page to life.
Be consistent
Maintain consistency in elements like colors, fonts and button styles across all screens to create a cohesive experience.
Provide clear visual hierarchy
Use techniques like scale, contrast, and proximity to direct the user’s attention. Every element should have purpose.
Following these tips will ensure your design comp effectively communicates the look and feel of your final design visually.
Creating a physical mock up
For products and packaging, a physical mock up can provide invaluable insights into ergonomics, aesthetics and manufacturing requirements. Here are some tips on constructing physical mock ups:
Choose appropriate materials
Use materials that somewhat match the weight, texture and feel of the final product like foam, cardboard and wood.
Focus on critical features
Determine the most important physical attributes and interactions and focus on those areas.
Simulate final finishes
Paint or finish your mock up to approximate the colors, gloss, and texture of the end product.
Construct multiple variations
Build out a few iterations so stakeholders can compare and select the best option.
Photograph from all angles
Take photos from all sides including close ups of key areas to create a visual record.
Make it durable
Your mock up will need to withstand handling and transportation. Use sturdy materials.
Test it out
Have people interact with your mock up to identify any issues. Check accessibility clearances.
Scale appropriately
Will a small desktop model properly reflect the end product? Scale it up as needed.
Constructing a well-made physical mock up allows for critical examination of shape, size, usability and manufacturability before investing in a final product.
Creating a functional prototype
For digital products like apps, functional prototypes act as working models that bring your static mock ups to life interactively. Here are some tips for creating clickable prototypes:
Link screens together
Use prototyping software to stitch screens together and map user flows.
Simulate interactions
Program clickable buttons and touchpoints that trigger actions like menus or new screens.
Include transitional animations
Build in page transitions and microinteractions to demonstrate how elements will move and respond.
Add placeholder data
Populate screens with fake content to give a realistic impression of how data will be displayed.
Incorporate branding
Include colors, fonts and graphic assets to set the visual direction, even if unfinished.
Focus on critical features
Prioritize key workflows and functionality in your prototype for more valuable feedback.
Provide guidance
Include notes, descriptions or demos so users understand how to engage with your prototype.
Plan follow-up revisions
Expect multiple iterations to refine your prototype based on user testing and feedback.
Creating a realistic, interactive prototype allows you to experience your product vision firsthand and identify improvements before launch.
Tools for creating mock ups
There are many great tools available to help you create different types of mock ups. Here are some top options:
Wireframing
- Balsamiq
- Figma
- Adobe XD
- Sketch
- Invision
Design Comps
- Adobe Photoshop
- Adobe Illustrator
- Figma
- Canva
Physical Mock ups
- Foam
- Cardboard
- Modeling clay
- Paper
- 3D printing
Functional Prototypes
- Invision
- Marvel
- Figma
- Adobe XD
- Framer
Experiment with different tools to find the best fit for your skills and project goals.
Tips for effective mock ups
Following some core principles and best practices will ensure your mock ups are as effective as possible:
- Align with target audience – Tailor your mock ups for the specific people who will be using/reviewing them.
- Set clear goals – Decide what questions you want to answer or issues to uncover with each round.
- Iterate often – Expect to go through multiple revisions and refinements to get to the best solution.
- Limit details early – Focus on core structure first, cosmetic details come later.
- Validate with users – Get feedback from real users frequently throughout the process.
- Improve usability – Identify any pain points or confusion and refine interactions.
- Move quickly – The speed of creating mock ups enables fast learning and improvements.
- Bridge silos – Share and discuss mock ups cross-functionally with all stakeholders.
Keeping these principles in mind will ensure you get maximum value out of the mock up process.
Conclusion
Mock ups provide invaluable opportunities to visualize designs, test concepts and align teams in the early stages of a project. Taking time to iterate on mock ups ultimately reduces costly mistakes down the line. The type of mock ups you create should align with your goals and audience needs. Approach mock ups as living documents that will evolve over time as you uncover insights and refine the end product. With the right context-specific tools and commitment to the process, mock ups can transform your design and development workflows for the better.