UI/UX Design Unit 3 Past Paper PDF

UI AND UX DESIGN UNIT 3 ELEMENTARY SKETCHING AND WIREFRAMING  CLICK THROUGH WIREFRAMING PROTOTYPING A clickthrough prototype links multiple screens via hotspots (a hotspot is a screen area that, once interacted with via a click or tap, redirects the user to...

UI AND UX DESIGN UNIT 3 ELEMENTARY SKETCHING AND WIREFRAMING  CLICK THROUGH WIREFRAMING PROTOTYPING A clickthrough prototype links multiple screens via hotspots (a hotspot is a screen area that, once interacted with via a click or tap, redirects the user to the target screen). A screen may have hotspots to multiple other screens, allowing you to put together complicated flows without having to focus on interactivity  PURPOSE OF CLICKTHROUGH 1. A high click-through rate indicates a successful ranking page on your website or ad in a Google SERP (search engine results page). 2. This means Click-through rate, then, measures how successful an ad has been in capturing a site visitor's interest.  IMPORTANCE OF PROTOTYPING Prototyping is the process of designing an optimal experience for target users. It includes various stages that help designers, product owners or business analysts to determine key concerns, including user needs, navigation, information architecture, usability, accessibility, UI, or visual design It plays a vital role in product development , validation and refinement.  QUALITIES OF PROTOTYPES: Representation — The prototype itself, i.e., paper and mobile, or HTML and desktop. Precision — The fidelity of the prototype, meaning its level of detail—low-fidelity or high-fidelity. Interactivity — The functionality available to the user during the testing phase, e.g., fully functional, partially functional, or view-only. Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (known as “rapid prototyping”).  WIREFLOW CREATION To create a wireflow diagram: 1.Select Diagram > New (Ctrl-N) from the application toolbar. 2.In the New Diagram window, select Wireflow Diagram and click 3.Name the diagram and click OK. This creates an empty Wireflow Diagram where you can start constructing the flow.  1.CREATING A WIREFLOW I. To create the first scene of a wireflow, select Scene from the diagram toolbar. STEP-2 : Click on the diagram to create a blank scene STEP-3 : Edit the screen ID and scene title. The screen ID uniquely defines a scene. People also use it as a key to link the scene with the implementation activities / artifacts associated with that scene. The scene title is a short description of what’s happening under the moment the scene appear STEP-4:To create the next scene, move your mouse pointer over the created scene. STEP-5: Press on the resource icon Connector -> Scene and drag it out STEP-6: Release the mouse button. This creates a new scene connected with the previous one. Name the screen ID and scene title.  WORK WITH DIFFERENT TOOLS: There are many different types of tools that has been used, they are 1.Invision 2.Zeplin 3.Balsamiq 4.Sketch 5.Figma 6.Flinto 7.Adobe XD 1.INVISION InVision is a web-based prototyping tool used by UX/UI designers. It allows you to create prototypes of your website or app and then share them with others for feedback. I nVision is easy to use, and you can create prototypes in minutes  2.ZEPLIN  Zeplin helps teams deliver on the promise of design.  It provides a structured and organized workspace to publish finalized designs.  Collaborating on designs is entirely different in Zeplin, which is accessible & friendly to users without design backgrounds.  3.BALSAMIQ  Balsamiq Cloud is a web-based user interface design tool for creating wireframes (sometimes called mockups or low-fidelity prototypes).  You can use it to generate digital sketches of your idea or concept for an application or website, and to facilitate discussion and understanding before any code is written.  4.SKETCH UX Sketching is simply rough drawing by hand, commonly used for generating, communicating and refining ideas. It can be for your own reference, or to be shared with co-workers, team managers, or clients and stakeholders  5.FIGMA  Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration.  6.FLINTO Flint UI Designer is a PC based GUI designer tool with intuitive interface and simple configurations which enables user to develop complete 2D/3D GUI applications without manual coding  7.ADOBE XD Adobe XD is a powerful and trending designing tool that is easy to use and a vector-based software tool for digital design and prototyping UI/UX that gives the tools that a developer needs to develop the world's best experiences collaboratively.  FIGMA 1. Figma is a powerful web-based design tool that helps you create anything, websites, applications, logos, and much more. 2. You'll take your first steps into User Interface Design and User Experience Design by learning how to use Figma.  FEATURES OF FIGMA One of the best features of Figma for developers is the ability to collaborate with designers and other members of your team in real time. Figma allows you to leave comments on elements of the design, making it easy to share and provide feedback.