1. Sketch
   1. Idea Generation
   2. A quick drawing technique to implement a vision
   3. tools
      1. Paper & Pen
2. Wireframes
   1. Specification, Detailed Phase
      1. graphic structure of a website or app containing the content and elements
   2. A wireframe is a low-fidelity way to present a structure
      1. Contains the main information
      2. Draw the outline of structure and layout
      3. Visual and description of the user interface
   3. tools
      1. Paper & Pen
      2. Balsamiq
      3. Figma
      4. more tools
         1. https://blog.templatetoaster.com/best-wireframe-tools/
3. Mockup
   1. full-size model of a design
   2. A mockup is a scale or full-size model of a design used for demonstration, design evaluation, promotion, and other purposes.
      1. richer visual elements than wireframe, including graphics, layout, color
   3. tools
      1. Figma
      2. more tools
         1. https://dzone.com/articles/27-open-source-web-ui-mockup-tools
4. Prototype
   1. evaluate your design
   2. is a medium- or high-level detailed representation of the final product that simulates user interaction. Interactive layout / waveframe / sketch option.
   3. tools
      1. Mockplus
      2. iDoc
      3. UXPin
      4. more tools
         1. https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47
5. To DevTeam
6. Sources
   1. https://www.toptal.com/designers/ux/guide-to-ux-sketching
   2. https://medium.com/swlh/ui-ux-design-guide-with-terms-explanations-tips-and-trends-754b9356d914
   3. https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype