Scribd
Upload
22 views7 pages

Figma GUI Mockups for Dynamic Analysis

The document outlines the process of creating Graphical User Interface (GUI) mockups using tools like Figma, emphasizing their role in prototyping and user testing. It details steps for creating mockups, connecting screens, and conducting dynamic analysis to refine designs and identify potential issues. Additionally, it includes a task to create a mockup interface that presents use case scenarios and suggests evaluating existing diagrams for improvements.

Uploaded by

adderallxdr
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views7 pages

Figma GUI Mockups for Dynamic Analysis

The document outlines the process of creating Graphical User Interface (GUI) mockups using tools like Figma, emphasizing their role in prototyping and user testing. It details steps for creating mockups, connecting screens, and conducting dynamic analysis to refine designs and identify potential issues. Additionally, it includes a task to create a mockup interface that presents use case scenarios and suggests evaluating existing diagrams for improvements.

Uploaded by

adderallxdr
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Graphical User

Interface
(Figma Mockups)
GUI Mockups
● Created prior to actual interface implementation
● No-code, done in graphic design software
● Blazing fast to create (compared to actual construction)
● Hence - easy to modify, perfect for prototyping
● Ideal to validate, test out processes from end-user perspective
● Ideal for initial talks with business/customer side
GUI Mockups
● Create those in Figma or marvelapp (or any other gui mockup
website/Software you prefer).
● Register with PJAIT account
● Create “New Design File”
● Create “Frames” with appropriate screen resolution for your
system/application
● Connect frames/screens with each other, making them
presentable as one, smooth process/flow
Dynamic analysis (1/2)
● Uses e.g. UML diagrams to visualize system behavior and
object state changes before implementation.
● Helps refine design, identify potential issues, and guide the
creation of a user interface aligned with the system's
workflow.
● Includes all the necessary methods in implementing a given
use case
Dynamic analysis (2/2)
During this phase (in our case) you should:

1. Create mockup GUI screens necessary


2. Design flow between those according to activity/state
diagrams created beforehand
3. Evaluate and potentially refine/improve previously made
diagrams if necessary
Task
● Create mockup interface for your application
● Mockup should allow you to present all use case scenarios
created in previous assignments (those for non-trivial use
cases) - you don’t need to implement more screens that that
● Perform a dynamic analysis (with GUI design discussion for
created screens) - see example documentation for reference.
● Apply improvements, changes, refinements to diagrams (if
necessary)
Quick Figma
Tutorial

You might also like