Scribd Logo
Upload

Welcome to Scribd!

  • Wireframe Notes

    Uploaded by

    h
    2K views9 pages
    Wireframing is a process used early in design to plan the structure and flow of an application or website interface. Wireframes are simple visual representations of the content and functionality of a design, without graphic design elements like visual styling. They help define the information hierarchy and user interactions before visual design work begins. Wireframes can be created using various tools from sketching to specialized software and can range from low to high fidelity depending on how much visual detail they contain.

    Original Description:

    Original Title

    Wireframe Notes.docx (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Wireframing is a process used early in design to plan the structure and flow of an application or website interface. Wireframes are simple visual representations of the content and functionality of a design, without graphic design elements like visual styling. They help define the information hierarchy and user interactions before visual design work begins. Wireframes can be created using various tools from sketching to specialized software and can range from low to high fidelity depending on how much visual detail they contain.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2K views9 pages

    Wireframe Notes

    Uploaded by

    h
    Wireframing is a process used early in design to plan the structure and flow of an application or website interface. Wireframes are simple visual representations of the content and functionality of a design, without graphic design elements like visual styling. They help define the information hierarchy and user interactions before visual design work begins. Wireframes can be created using various tools from sketching to specialized software and can range from low to high fidelity depending on how much visual detail they contain.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 9

    Wireframes are easier to adapt than a concept design.

    >>True

    When numerous pages of wireframes are made as clickable, these


    wireframes can be converted as a prototype. This is termed as a
    ________ prototype.
    >>Low-fidelity

    _____________ is/are important aspect/aspects of a wireframe.


    >>alignment & consistency

    Mockups are _________.


    >>static

    The main purposes of a wireframe are to aid in defining the information


    hierarchy of your design and to plan and determine how users will
    interact with the user interface.
    >>true

    ________ resemble the look and feel of the final design.


    >> Mockup

    In contrast to wireframes, mockups include richer visual elements such as color,


    visual style, add typography.

    >>true
    Mockups exhibit __________.
    >>high fidelity

    Mockups are not pixel perfect.


    >> false

    Wireframes are not intended to represent the __________ or


    communicate the identity or brand.
    >> both the options

    Are word processing software such as Microsoft Word and Apple Pages
    used for creating wireframes?
    >>Yes

    Wireframes cannot be modified easily and fast to support the iterative


    and collaborative style of product design and development in agile
    enterprises and startups.
    >>false

    Provide examples for non-digital wireframing tools from the given


    options.
    >>sketching, blackboarding and whiteboarding
    Wireframes can be _____________.
    >> all

    Defining the information hierarchy is not important for working out the
    possible options for arranging the content on a page.
    >>false

    Will you get a response when you click a prototype?


    >>true

    Apart from basic wireframes, what are the other type of wireframes that
    are available?
    >> all

    Are prototypes, wireframes, and mockups the same?


    >>false

    The different types of fidelity are ______________.


    >> all

    Visual elements must be used as high as possible in a wireframe.


    >>false

    What is Wireframing?
    Wireframing is a process to design an application at the structural level
    using wireframes.

    #####Wireframing happens early in the project lifecycle.

    Wireframes are considered to be the blueprint for design.

    Wireframes are intended to connect the information architecture (or conceptual


    structure) to the visual design (surface) of a mobile app or website.

    They are also the visual representations of an interface, which are used to convey the
    application details to everyone evenly.

    Anyone who is involved in the product can use wireframes. Wireframes are typically
    used by

     Interaction designers
     Programmers
     Graphic designers
     User experience designers
     Product managers
     Information architects
     Business analysts

    Why Must You Use Wireframes?


    Ahead of the application development, wireframes provide clarity on the following:

     Structure – How will the different parts of the application be put together?
     Content – What content will be shown on the application?
     Informational hierarchy – How is this content displayed and organized?
     Functionality – How will the application's interface work?
     Behavior – How will the application behave and interact with the user?

    Wireframes are not intended to represent the graphic elements, visual design, or
    communicate the identity or brand.
    Advantages of Wireframing
     Offers an early visual that is useful for reviewing with the client.
     Can be reviewed as an initial feedback mechanism for prototype usability testing.
     Ensures the functionality and page content are positioned rightly based on
    business and user requirements.
     Can be changed easily than concept designs.
     Offers confidence to the UI designer, once users and the client approve the
    wireframes.
     Acts as a good dialogue among the project team members to agree on the scope
    and vision of the project.
    From the flowchart seen in the previous card, you can notice the following traits.

     Prototypes are
    o dynamic
    o clickable
    o interactive
     Wireframes are
    o static,
    o exhibit low-fidelity
     Mockups are
    o static,
    o exhibit high-fidelity

    Note: Design fidelity is the level of functionality and details incorporated into a prototype. Fidelity is
    of three types: low, mid, and high.

    Prototypes are clickable, so when you click/press a prototype, you will get a


    response.

    A clickable prototype,

     simulates the interaction between users and the UI in real time.


     enhances the effectiveness of the interaction.
     allows UX designers to test and discover the potential issues in the interaction flow
    at a prior stage.
     ####High-Fidelity Prototype When numerous mockup pages are made as
    clickable, these mockups can be converted as a prototype. This is known as a high-
    fidelity prototype.

     ####Low-Fidelity Prototype
     When numerous pages of wireframes are made as clickable, these wireframes can
    be converted as a prototype. This is termed as a low-fidelity prototype.

    Wireframe Styles

    Tools and Mediums


     Sketching
     Paper Cutouts
     Stenciling
     Wireframing Software
     Graphic Design Software
     Presentation Software
     Fidelity Levels

    Here the most commonly used analog/non-digital tools and mediums used for wireframing.

     Sketching
     Blackboarding and Whiteboarding
     Stenciling
     Paper Cutouts/Paper Prototyping

    Note: There are many more tools available for use and you can choose the best one that
    suits you.

    Here the most commonly used digital tools and mediums used for wireframing.

     Word Processing Software - Google Docs, Microsoft Word, Apple Pages


     Presentation Software - PowerPoint, Google Slides, Prezi, Keynote
     Graphics Editing Software - Photoshop, Adobe Illustrator, Sketch
     Wireframing and Prototyping Software - Proto.io, Axure, Balsamiq, UXPin,
    Sketch

    Note: There are many more tools available for use and you can choose the best one that
    suits you.

    Choosing Your Wireframe Style


    Fidelity Levels
    Apart from the mediums and tools in wireframing, you must explore other levels of details
    that are based on the purpose of a wireframe and the product design process. These are
    the following fidelity levels that you must consider.

     Block Diagrams
     Grey Boxes
     High-Fidelity Text
     High-Fidelity Color
     High-Fidelity Media
     High-Fidelity Interactions

    Choosing Your Wireframe Style

    Additional Details
    After choosing the right tools and mediums, and the appropriate level of detail, you have to
    include the finishing touches. Few wireframe details may require description and display
    interactions. Sometimes, many wireframes may be joined together to display the user
    flows.

    These are a few additional types of wireframes:

     Basic Wireframes
     Annotated Wireframes
     Wireframes With User Flows
     Interactive and Click-Through Wireframes

    Standalone Libraries
    Web and Mobile

     I Love Wireframes
     Wireframe Showcase
     Web Without Words
     Wireframes Magazine
     Patterntap by Zurb
     UX Archive
     Behance
     Dribbble
     Google Image Search
     Pinterest

    Web Only

     UI Patterns

    Mobile Only

     Pttrns
     Android App Patterns
     Inspired UI
     Mobile Patterns
     MOObileFrames

    Wireframes exhibit ---------------

    ow-fidelity

    When numerous mockup pages are made as clickable, these mockups can be
    converted as a prototype. This is known as a ________ prototype.

    Low-fidelity wrong

    You might also like