Scribd Logo
Upload

Welcome to Scribd!

  • Wireframes and Prototyping

    Uploaded by

    Musaib Umer
    32 views24 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    32 views24 pages

    Wireframes and Prototyping

    Uploaded by

    Musaib Umer

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 24

    Wireframes and Prototyping

    Agenda
     Introduction
     Definition
     Purpose
     Types of Wireframes
     Examples
     What is Prototyping?
     Purpose of Prototype
     Wireframes Vs Prototypes
    Introduction
     Wireframes are a fundamental concept in the field
    of user interface (UI) and user experience (UX)
    design.
     They are essential tools used during the early
    stages of the design process to plan and visualize
    the structure and layout of a website, mobile app,
    or any user interface
    What is a Wireframe?
     A wireframe is a simplified, low-fidelity
    representation of a digital interface, serving as a
    blueprint for the final design.
     A wireframe is a two-dimensional illustration of a
    page's interface that specifically focuses on space
    allocation and prioritization of content,
    functionalities available, and intended behaviors.
    What is a Wireframe?
    Purpose of Wireframes
     Structural Planning: Wireframes help designers
    and stakeholders determine the layout and
    arrangement of content, features, and elements on
    a digital interface. They establish the information
    hierarchy and provide a clear understanding of
    how the interface will be organized.
    Purpose of Wireframes
     Communication: Wireframes serve as a means of
    communication between designers, developers,
    and clients or project stakeholders. They help
    convey the design concept and layout early in the
    design process, reducing misunderstandings later
    on.
    Purpose of Wireframes
     Focus on Functionality: Wireframes prioritize
    functionality and layout over visual aesthetics.
    They allow designers to concentrate on the user
    interface's structure and usability without getting
    distracted by colors, typography, or visual design
    elements.
    Types of Wireframes
     Low-Fidelity Wireframes: These are basic
    sketches or diagrams that outline the overall
    layout and content placement. They are quick
    to create and are often used in the early
    brainstorming stages.
    Types of Wireframes
     Mid-Fidelity Wireframes: These provide
    more detail than low-fidelity wireframes,
    including basic typography and some visual
    styling. They offer a more refined
    representation of the interface without
    focusing on visual aesthetics.
    Types of Wireframes
     High-Fidelity Wireframes: These wireframes are
    closer to the final design, often including detailed
    typography, color schemes, and specific visual
    elements. They can serve as a bridge between
    wireframes and the actual design, providing a
    clearer vision of the final product.
    Low to High Fidelity
    Example

    Restaurants
    Menu
    Example

    Market
    Place
    Example

    LMS
    What is a Prototype?
     A prototype is a preliminary model or version
    of a product, system, or design that is created
    to test and demonstrate key concepts, validate
    assumptions, and gather feedback before
    moving forward with full-scale development
    or production
    What is a Prototype?
     A prototype is an early sample, model, or
    release of a product built to test a concept or
    process. It is a term used in a variety of
    contexts, including semantics, design,
    electronics, and software programming.
    (Wikipedia)
    Purpose of Prototypes
     Testing and validating design ideas and concepts.
     Evaluating functionality, usability, and user
    experience.
     Identifying potential issues or improvements early
    in the development process.
    Purpose of Prototypes
     Communicating and sharing ideas with
    stakeholders, clients, and team members.
     Reducing the risk of costly errors or changes in
    later stages of development.
    Prototypes Vs Wireframes
     A wireframe is low-fidelity that takes less time to
    create, while a prototype is high-fidelity that is
    more time consuming.
     A wireframe is more to convey the 30,000 foot
    view of the idea of the product. A prototype is
    something that will be similar to how the final
    product acts and behaves.
    Prototypes
    Vs
    Wireframes
    Thank You

    Have a nice Day!!

    You might also like