What's in the Handbook?Schedule of Events
All About Chingu
Your Voyage
Pre-Voyage - Solo Project
Voyage - Team Project
Pair Programming Guide
Technical Resources
Choosing Your TechstackApp Mockup ToolsThe Case for Mockups & WireframesPen & PaperAdobe XDInvisionMarvelMockplusFonts, Icons, Images, & MoreSoftware LicensesGit - Defining a WorkflowGit - BranchesGit - CommitsGit - Pull Requests
Project Resources

Mockup Tools

Photo by UX Store on Unsplash

The Case for Mockups & Wireframes

Creating a successful web application requires more than just writing code. Just as design is important to an API or a database, it is important for the user interface and overall user experience (UI/UX).

Mockups depict what the app will look like, while wireframes depict its structure and flow of control. Both mockups and wireframes may be low fidelity (i.e. hand drawn) or high fidelity (i.e. generated by a graphics utility).

Low Fidelity Mockup

High Fidelity Mockup

Flow of Control Mockup

Pen & Paper

pen and paper!

Yup, just plain old pen & paper. Fastest and easiest to use to generate new ideas.

Adobe XD

Linking pages to make an interactive mockup

Adobe XD is a powerful prototyping tool that allows you not only to quickly create a mockup for your website but also build a fully-functioning prototype based on your mockup. It also has a really great collaboration feature that makes it easy to discuss the mockups and for other developers to see the Font Size, Color, Assets and positioning of each item in the mockup.

Platform: Available for both Mac and Windows.

Free plan details: The free plan allows designers to create one active shared project and provides 2GB of cloud storage space.



Web-based prototype platform where you can either generate or upload mockups, discuss them, and share assets/details with developers.

Platform: Web-based.

Free plan details: The free plan allows 1 prototype (possibly just 1 layout at a time).



All design is done in the browser (you don’t need to install anything), and it also has a low learning tool (no software or experience required). Marvel app provides design specs for every project. With one click, you can instantly download assets and generate CSS code for your design.

Platform: Marvel app is a web-based product.

Free plan details: The free plan is available only for 1 person and 2 active projects (2 projects at a time).



Mockplus can help you create a mockup in minutes. It comes with more than 3,000 icons and nearly 200 components. Designers use intuitive WYSIWYG editor to drag & drop all required components in canvas.

Platform: Available for both Mac and Windows.

Free plan details: The free plan allows creating an unlimited number of projects but only for a single user.

Copyright2021 Chingu Cohorts