ui ux

UI and UX Design: Unit 3 - Elementary Sketching and Wireframing

• Clickthrough Prototyping: A clickthrough prototype links multiple screens using hotspots. A hotspot, which is a screen area, redirects the user to a target screen upon interaction (click or tap). Screens can have hotspots to multiple screens, enabling complex flows without focusing on interactivity.

• Purpose of Click-Through Rate: A high click-through rate signifies a successful webpage or ad ranking in a search engine results page (SERP). Click-through rate measures how well an ad captures user interest.

• Importance of Prototyping: Prototyping designs an optimal user experience. It involves stages that help designers, product owners, and analysts determine user needs, navigation, information architecture, usability, accessibility, UI, or visual design. Prototyping is critical for product development, validation, and refinement.

• Qualities of Prototypes: Prototypes should have representation (e.g., paper, mobile, HTML, desktop); precision (level of detail, low-fidelity or high-fidelity); interactivity (functionality available during testing, e.g., fully functional, partially functional, or view-only); and evolution (lifecycle of the prototype, from quick build/test/discard to improved version, known as rapid prototyping).

Wireflow Creation

• Creating Wireflow Diagrams: To create a wireflow diagram, select "New" (Ctrl-N) from the application toolbar. Choose "Wireflow Diagram" in the "New Diagram" window. Give your diagram a name and click "OK."

• Wireflow Diagram Elements: Wireflows combine wireframes and flowcharts. They illustrate software interface architecture, layout, flow, and communicate design ideas to stakeholders.

• Initial Scene Creation: To start a wireflow, choose "Scene" from the diagram toolbar.

• Scene Editing (Step 3): Edit screen IDs and scene titles. Screen IDs uniquely identify scenes and serve as links to related implementation/artifact details. Scene titles summarize the scene's purpose.

• Connecting Scenes (Step 4-6): Use the "Connector" tool to create scenes and connect them; name the screen IDs and scene titles.

Tools for UI/UX Design

• InVision: A web-based prototyping tool used by UX/UI designers, allowing creation and sharing of website/app prototypes.

• Zeplin: Helps design teams deliver on design promises through a structured workspace for finalizing designs; easily accessible by people from different backgrounds.

• Balsamiq: A web-based interface design tool for creating low-fidelity wireframes, helping generate digital sketches for applications or websites before coding.

• Sketch: UX Sketching involves hand-drawn rough sketches for generating, communicating, and refining ideas. It can serve as a personal reference, and as a tool to share with coworkers, managers, or clients.

• Figma: A cloud-based design tool with similar functionality and features to Sketch, offering better team collaboration and real-time feedback exchange.

• Flint: A PC-based graphical user interface (GUI) design tool with intuitive interface configurations, enabling complete 2D/3D GUI application development without manual coding.

• Adobe XD: A powerful, easy-to-use vector-based software tool for digital design, prototyping UI/UX designs, and collaborative development of high-quality experiences.

asdf