Flowchart
First, we design the feature and function flowchart and make sure to eliminate any gaps in the application UI.
The goal is to optimize users ability to accomplish a task with the least amount of friction.
I recommend that you look .pdf in "Two Page" view for the best experience.
Wireframe
Wireframe is a simple presentation of a website/app which only shows a product at the structural level. However, simple doesn’t mean a wireframe is easy to create. Wire-framing is a necessary step during the whole interactive design process, and it often takes place early in the project lifecycle. A wireframe is a graphical skeleton of a website, similar to an architectural blueprint.
Often, a wireframe has 3 core goals:
To show the content and functionality of the pages before any further designs.
To help designers communicate with clients about the design concept.
To establish the information hierarchy of the site/app.
Moodboard
Purpose of a Mood Board - Mood boards can serve many purposes, starting with organizing the inspiration around a project. They can be a valuable resource throughout the design project, to help keep the style and aesthetic consistent and on track with a client’s goals and expectations.
Mood boards are also an excellent way to refine a project’s style before diving into the actual design process. They’re a much lower investment than mockups and prototypes in terms of resources and time and can convey a lot about the look and feel of the final design.
Mood board - Graphic designers, interior designers, industrial designers, photographers and other creative artists use mood boards to visually illustrate the style they wish to pursue.
Design & Prototype
Finally, a fully functional prototype that can be clicked through as a demo.
In software technology, the term prototype is a working example through which a new model or a new version of an existing product can be derived.
Export
Magically better handoffs from design to development.