Presentation in engineering topic 1.pptx

wireframe in computer

1. Wireframe in 3D

2. WIREFRAME

3. INTRODUCTION Wireframe modelling is a method used to create the visual representation of any three-dimensional object using  3D computer graphics . In this process, lines and curves are used to create the desired 3D wireframe model . It’s a graphical representation of a website, mobile app, or other digital interface that highlights the overall structure and layout of the design without going into specifics like colors , fonts, or images .  They are a fundamental step in the design process that serves as a blueprint or skeleton for the final product . Need:  Wireframes are necessary because they give a clear, visual depiction of the organization and layout of a digital interface. They aid designers and stakeholders in seeing how the product’s information, elements, and navigation are organized.

4. EXAMPLE

5. CONT..

6. Types of Wireframe Low-Fidelity Wireframes : Mid-Fidelity Wireframes: High-Fidelity Wireframes:

7. Low-Fidelity Wireframes These are the simplest and most abstract depictions of a digital user interface. To describe the arrangement and framework of a design, they employ straightforward forms, lines, and placeholders . Purpose:  Rather than focusing on minutiae like colors , fonts, or intricate UI elements, low-fidelity wireframes are intended to show the overall structure and hierarchy of pieces .

8. Mid-Fidelity Wireframes Wireframes that are mid-fidelity strike a balance between low and high fidelity. Although they contain more information than low-fidelity wireframes, they nonetheless stay away from complex design features

9. High-Fidelity Wireframes High-fidelity wireframes are exact replicas of the user interface that may also include UI components like buttons, icons, and content placeholders. Purpose:  High-fidelity wireframes serve as a more accurate representation of the final design, enabling a more thorough assessment of the user experience. Use Cases:  Later in the design phase, when choices have been made more definitively, these wireframes are employed. They aid in the better understanding of the product’s desired appearance and feel by stakeholders and developers.

10. How to Create Wireframes Wire framing is a systematic procedure used in UX (User Experience) design to express graphically the organization and layout of a digital interface. Here is a step-by-step tutorial on producing good wireframes : Understanding the Project’s Goals Obtain user insights and research Define Key User Flows and Features Create Low-Fidelity Sketches First Make simple layouts Define interactions and navigation Iterate and Test