Product Making

BRING IDEAS & DESIGNS INTO REALITY

From basic organization and structure to a beautiful MVP.

Wireframes

Wireframes are rapidly designed visual guides for determining page structure, hierarchy, and key elements. They are ideal to show the developers the required design layout and elements without distracting them with visual effects and UI requirements. ( spec planning )

Wireframe website
Example: one of the wireframes I made with Justinmind

Examples of Best Free Wireframing tools :

Balsamiq
Justinmind Wireframe tool
wireframe.cc
Invision Freehand tool

Mockups

We use Mockups to finalize the information delivered by wireframes, while also incorporating the addition of visual design. Mockups tells developers how the application should look like by applying the visual identity and the UI Components. We can say that Mockups are the real final MVP designs ( in this iteration ) delivered to developers.

Example of a final design ( mockup )

Examples of Best Free UI Design and Mockup tools :

Invision Studio
Justinmind
Photopea ( Alternative to Photoshop )
Lunacy ( Alternative to Sketch )

Prototypes

Prototypes help bring to life the final design, from a visual and functional standpoint. They are used to visualize the interaction between screens and pages. Using static images you can create a dynamic User Experience so you can test your product and help developers to understand the user flow.

invisionstudio
Example of a prototype made with invision studio

Examples of Best Free UI Design and Mockup tools :

Invision Studio & Invision
Justinmind
Lunacity ( Alternative to Sketch )

Code development

Developers will bring designs and prototypes to life. You will have a real MVP that you can use and test. During this phase No changes on designs or specifications are allowed. Developers should focus on coding and delivering the product.

QA testing

The product is now ready to be used and tested. Quality Assurance Testing is a quality testing process that ensures that developed product respects the specs, use cases and designs and to catch the bugs before the next release. In this phase reports will be generated in order to optimize the MPV in the next iteration.

Don’t keep this to yourself

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Need help ?Just let me know by filling this form

Skip to content