Historical Perspective: machinery, the PC, leading to the first concerns

the GUI, the Web, Possible Futures about ergonomics and

human workload
Machinery
●​ The history of computing
machinery traces the shift from
early industrial machines to today’s Vacuum Tube Era (1940s - 1950s)
digital hardware. ●​ ENIAC (1945) – one of the earliest
●​ The machinery era originated in electronic general-purpose
the Industrial Revolution of the late computers.
18th and 19th centuries, when ○​ Transition from mechanical
steam engines, textile machines, relays to electronic vacuum
and railroads mechanized tubes, enabling faster
production and transportation. computation.
●​ James Watt’s improvements to the ○​ Interaction was difficult
steam engine in the 1770s are users programmed machines
often credited as a key driver of using physical switches and
industrial mechanization. wiring. This highlighted the
○​ Mechanization need for simpler
○​ Mass Production programming methods.
○​ Automation Concepts
Historical Timeline Transistor Era (1950s - 1960s)
●​ IBM 1401 (1959) – one of the first
Industrial Era (1800s) mass-produced computers.
●​ Jacquard Loom (1801) - used ○​ The introduction of
punch cards to control weaving transistors, made machines
patterns smaller, faster, and more
○​ Introduced the concept of reliable.
programmability and ○​ Grace Hopper developed
automation early programming
○​ Showed that humans could languages (COBOL), making
give instructions to machines computers accessible to
using symbolic systems non-engineers.

Electromechanical Era (1930s - 1940s) Interactive Computing Era (1960s -

●​ JZuse Z3 (1941) – the first 1970s)
programmable digital computer. ●​ RAND Tablet (1964), Ivan
Harvard Mark I (1944) – a large Sutherland’s Sketchpad (1963).
electromechanical calculator. ○​ The first interactive graphics
○​ Introduction of Punch cards, systems allowed direct
switches, and relays for input manipulation instead of just
or output text commands.
○​ Required operators to ○​ Began the concept of user
interact with machinery interfaces and laid the
through manual processes,
 foundation for graphical Embedded and Pervasive Computing
interaction. (1990s - Present)
●​ Smartphones, IoT devices,
Personal Computer Era (1970s - 1980s) wearables.
●​ Xerox Alto (1973), Apple Macintosh ○​ Machinery embedded into
(1984). everyday environments.
○​ Graphical User Interfaces ○​ Focus shifted to context
(GUIs) introduced icons, awareness, seamless micro
windows, and pointers. interactions, and invisible
○​ Shifted from expert-only use interfaces tailored to human
to everyday users. Usability needs.
and consistency became top
priorities.
●​ Altair 8800 (1975) The PC (Personal Computer)
○​ Created by Ed Roberts and -​ Marked a radical transformation in
released by MITS (Micro the scope of Human-Computer
Instrumentation and Interaction
Telemetry Systems) in -​ Personal computers (PCs) emerged
January 1975. in the 1970s and 1980s, shifting
○​ A kit computer that computing from large, inaccessible
hobbyists assembled mainframes to affordable machines
themselves. It had switches for individuals.
on the front panel and lights -​ fueled by microprocessor
to display binary output. No technology, which made computers
screen, no keyboard. just smaller, cheaper, and more
raw computing. powerful.
○​ It’s considered the first -​ PCs transformed computing into a
commercially successful tool for homes, schools, and
personal computer. businesses, not just government or
●​ Apple II (1977) research labs.
○​ Steve Wozniak, marketed by
Steve Jobs, and launched in Impact on Usability on PCs
April 1977 -​ They introduced user-friendly
○​ ready-to-use, pre-assembled interfaces, more intuitive input
personal computer with color (keyboard, mouse), and practical
graphics, a keyboard, and software (word processors,
the ability to connect to a spreadsheets).
TV.
○​ it became popular in schools Key Innovations of PCs
and small businesses. 1.​ IBM PC (1981)
○​ Supported early hit software -​ Marked the standardization
like VisiCalc (1979), the first of personal computers.
spreadsheet program, which -​ Featured Intel’s 8088
made it essential for processor and Microsoft’s
business users. MS-DOS operating system.
 -​ Its open architecture allowed -​ Shift to GUI: The Graphical User
third-party clones, creating a Interface introduced visual icons,
massive and competitive PC windows, and direct manipulation,
market (IBM Archives). allowing users to interact with the
2.​ Xerox Star (1981) computer through recognition
-​ The first commercial system rather than recall.
to introduce a graphical user
interface (GUI) with icons, The WIMP Model
windows, and the desktop -​ WIMP made computers more
metaphor. intuitive by letting users recognize
-​ Though not commercially and select instead of remembering
successful, it laid the complex commands.
foundation for later -​ Windows: Open multiple
user-friendly systems tasks at once, making
(Computer History Museum). multitasking easier.
3.​ Apple Macintosh -​ Icons: Simple images that
-​ Popularized the GUI and represent files, apps, or
mouse for mainstream functions.
consumers. -​ Menus: Lists of options that
-​ Known for its “1984” Super guide users without
Bowl ad, it positioned the memorizing commands.
Mac as a revolutionary, -​ Pointer: Lets users directly
user-friendly machine. interact with items on the
-​ Although not the first with a screen.
GUI, it made desktop
publishing and visual Direct Manipulation in GUI
computing widely accessible. -​ An interaction style in which users
act on displayed objects of interest
The GUI using physical, incremental, and
-​ The Graphical User Interface (GUI) reversible actions whose effects are
originated at Xerox PARC in the immediately visible on the screen.
1970s, where researchers -​ Ben Schneiderman first coined the
developed the desktop metaphor term “direct manipulation” in the
with icons, windows, and a mouse 1980s.
(Isaacson, 2014). Apple -​ Continuous Visibility of
commercialized this in the Objects
Macintosh (1984), and Microsoft -​ Physical Actions Instead of
later popularized it globally Complex Syntax
through Windows (1990s). -​ Rapid, Incremental, and
-​ Command-Line Interfaces (CLI): Reversible Actions
Early computers required users to -​ Immediate feedbacks
type exact commands and
memorize syntax, making them Usability Principles in GUI
efficient for experts but -​ The ease of use and learnability of
intimidating for beginners. a software application or website.
-​ Visibility of system status
 -​ Match between the system communities can still
and the real world benefit.
-​ User control and freedom ●​ Support for multiple
-​ Consistency and standards languages, cultures, and
-​ Error prevention literacy levels.
-​ Ethical and Social Considerations
Web Possible Futures ●​ Privacy, security, and trust in
-​ Greater Universal Usability systems will be key.
●​ Systems will adapt to all ●​ Social media futures →
abilities, ages, and cultures. balance between connection
●​ Personalization will become and misinformation/abuse.
standard (fonts, color
themes, interaction styles). The Web
●​ Accessibility will be built in, -​ The World Wide Web was invented
not optional. by Tim Berners-Lee in 1989 at
-​ Multi-Device and Ubiquitous CERN, launched publicly in 1991.
Computing His proposal combined hypertext
●​ The web will not just be on with Internet protocols, creating a
PCs and phones — but in global information system
wearables, smart homes, (Berners-Lee, Fischetti, &
cars, and IoT devices. Dertouzos, 2000).
●​ Interfaces must smoothly -​ Global Communication
adapt across screen sizes -​ Knowledge Sharing
and input methods. -​ E-Commerce and Social
-​ Immersive Interfaces Media
●​ Virtual Reality (VR), -​ Information Age
Augmented Reality (AR), and
Mixed Reality will expand the
web into 3D and immersive
spaces.
●​ Direct manipulation
principles and Fitts’ Law will
be even more critical in 3D
interaction.
-​ AI-Driven Personalization
●​ Intelligent assistants will
anticipate user needs.
●​ Hick’s Law (decision time
with many options) will be
addressed by AI filtering and
smart recommendations.
-​ Global Inclusive Access
●​ Bridging the digital divide →
making sure low-income,
rural, or underrepresented
Human Perception and Information
Presentation

Human Perception
-​ Refers to our senses receive and
interpret information from the
environment

Information Presentation
-​ The way information is displayed Figure-ground Principle
affects how easily it is perceived, -​ Instinctively separate objects into
remembered, and applied figure (foreground) and ground
(background)
Sensory Aspects of Perception -​ Figure stands out prominently,
1.​ Visual Preception while the ground fades into the
-​ Interpreting visual background
information
-​ Most dominant in design, Similarity Principle
involving how users process -​ Objects that look similar are
images, text, and visuals perceived as part of the same
2.​ Auditory Perception group
-​ Understanding sounds
-​ Used in design through voice Proximity Principle
prompts, clicks, -​ Objects close to each other are
notifications, and seen as related or grouped
background together
3.​ Tactile Perception
-​ Sense of touch Continuity Principle
-​ Important in touchscreens -​ Elements are arranged along a
and haptic feedback curve or line are perceived as
related
Human Perception in HCI
-​ How users sense and understand Closure Principle
digital interfaces through seeing, -​ tend to perceive incomplete
hearing, and touching information objects as whole by automatically
on screens and devices filling in the missing gaps to create
a complete and coherent image or
Gestalt Perception form
-​ refers to the way our brain
naturally organizes and interprets Symmetry Principle
visual information -​ Perceive objects as symmetrical
-​ tend to perceive objects as whole shapes around a central point
patterns or groups
-​ make sense of complex images
quickly and efficiently
Typography Elements of Graphic Design
-​ Art of arranging letters and text in -​ Line
a way that makes the copy legible, -​ Shape
clear, and visually appealing to the -​ Texture
reader -​ Form
-​ Communication -​ Color
-​ Visual Hierarchy -​ Space
-​ Readability -​ Imagery
-​ Aesthetics -​ Typography
-​ Consistency
Displays and Other Output Devices
Color -​ primary source of visual feedback
-​ Affects how we see, feel, and -​ main channel for presenting
perform task on a system information, graphics, and system
-​ It can influence emotions and responses
experiences, they can easily -​ Enables interaction by showing
recognise information quickly results of user input in real time
-​ Roles of Color -​ Ranges from traditional monitors
-​ Visual Perception to advanced immersive systems
-​ Aesthetic Design (VR/AR headsets)
-​ Feedback and Validation
-​ Accesibility Types of Display Devices
-​ Emotional Impact 1.​ Large Wall Displays
-​ Branding and Identity -​ High-resolution LCD display
-​ Information Representation -​ Allows multiple users to
-​ Cross-cultural Consideration observe and analyze a large
-​ Navigating and wayfinding amount of information at the
same time
Color Palettes 2.​ Tabletop Displays
-​ Planned set of colors used in an -​ Generally equipped with
interface multi-touch touchscreens
Consistency -​ Serves as a shared and
-​ reduces confusion and makes the public display where changes
experience smoother affect all collaborators
3.​ Heads-up & Head-mounted
Graphic Design Displays
-​ creative and dynamic area that -​ Projects information on a
plays an important part in partially silvered windscreen
business, organization, and of an airplane or car
individual visual communication. -​ Used in VR/AR to show
-​ Involves developing visual material information even while
that communicates messages, turning heads
engages audiences, and
strengthens brand identification. Paper: an OUTLET Tool
-​ versatile and widely accessible
medium supporting
 communication, documentation, different concepts, ideas,
creativity, and education and pieces of information
4.​ Hyperbolic Tree
Output Devices -​ type of interactive visual
-​ Output Devices are hardware that representation used to
receive data from the computer display hierarchical
and translates it into another form: information or data in a
visual, auditory, or tactile circular, tree-like structure
5.​ Multidimentional Scaling
Types of Output Devices -​ statistical technique that
●​ Sight accurately represents the
○​ Monitors similarity or dissimilarity
○​ Projectors between objects in a
○​ E-paper/ E-ink lower-dimensional
●​ Hearing space,simplifying geometric
○​ Speakers relationships and patterns in
○​ Spatial Audio data,making analysis easier
○​ Voice Synthesizers -​ Closer points = more
●​ Touch similar
○​ Haptic Feedback Devices -​ Farther points = less
○​ Braille Displays similar
○​ Wearables

Information Visualization
-​ Using computer programs to
represent information or abstract
concepts in a visual form
-​ Process of representing data in a
visual and meaningful way for a
better understandabiltiy

Types of Information Visualization

1.​ Cartogram
-​ Map showing geographically
diagrammatic statistics of
various kinds usually by the
use of shades, curves, or
dots
2.​ Heat Map
-​ visual representation of data
where values in a matrix are
depicted using a range of
colors
3.​ Concept Mapping
-​ way to visually display the
relationships between
The Human Body and Device Design 4.​ Accessibility
-​ Ensuring that computer
Ergonomics systems and interfaces are
-​ Ergonomics is the scientific study usable by individuals with
and practice of designing systems, diverse abilities and
products, and environments to fit disabilities.
people, not the other way around. 5.​ User Feedback and Evaluation
-​ It focuses on creating user-friendly -​ It involves gathering user
designs that consider human feedback and conducting
capabilities, limitations, and usability evaluations to
preferences, ultimately enhancing identify areas for
the overall user experience. improvement.

Importance of Ergonomics in HCI• Input Devices

Creates comfortable interactions. -​ Input devices are important parts
●​ Reduces frustration and cognitive of a computer that help us
overload. communicate with the system.
●​ Reduces the time and effort -​ These devices let us send data or
needed to complete tasks. commands to the computer,
●​ Encourages short breaks and allowing it to process information
proper work habits. and perform tasks.
●​ Ensures that people with
disabilities can effectively interact How Does an Input Device Work?
with digital systems. -​ An input device converts user
●​ Enhances focus and reduces stress. actions or physical movements into
signals that the computer can
Key Aspects of Ergonomics understand and process.
1.​ Physical Ergonomics
-​ The goal is to minimize a.​ Signal Conversion: Input devices
physical strain and convert physical actions into
discomfort, preventing electrical signals that the computer
issues like repetitive strain can understand.
injuries (RSIs) and b.​ Data Transmission: These electrical
musculoskeletal disorders. signals are transmitted to the
2.​ Cognitive Ergonomics computer’s processor, typically via
-​ Involves designing interfaces USB, Bluetooth, or wireless
that align with human connections.
cognitive abilities, such as c.​ Processing by the CPU: Once the
memory, attention, signals reach the processor, the
perception, and data is interpreted and processed
problem-solving. by the computer to carry out the
3.​ Affective Ergonomics desired task.
-​ Focuses on the emotional d.​ User Interaction: The user interacts
and affective aspects of user with the input device, and the
interaction with computer device sends corresponding data to
systems. the computer based on user input.
 e.​ Feedback to the User: In some 7.​ Web Camera
cases, input devices provide -​ A webcam is an input device since
feedback to confirm the input was it records a video image of the
registered. scene in front of it.
-​ A webcam is a small digital video
Types of Input Devices camera that is connected to a
1.​ Keyboard computer.
-​ It allow users to input text and 8.​ Graphic Tablets
commands. Keyboard contains -​ A graphics tablet, also known as a
various keys for entering letters, digitising tablet, is a computer
numbers, and characters. input device that allows users to
2.​ Mouse draw and graphics by hand, much
-​ It’s a small, handheld device that like they would with a pencil and
you move on a flat surface to paper.
control a cursor or pointer on the 9.​ Touchscreen
screen. -​ A touchscreen is a type of input
-​ By clicking buttons or scrolling a device that allows users to interact
wheel on the mouse, you can select with a digital display by directly
items, open files, drag objects, or touching the screen's surface.
navigate programs.
-​ Mouse was invented in 1963 by Virtual Reality
Douglas C. Engelbart. ●​ Virtual reality, or VR, is a simulated
3.​ Joystick three-dimensional (3D)
-​ A pointing device used to move the environment that lets users explore
cursor around the screen is the and interact with a virtual
joystick. surrounding in a way that
-​ It was invented by [Link]. approximates reality, as it's
4.​ Light Pen perceived through the users'
-​ A light pen is a pointing device that senses.
has the appearance of a pen. ●​ The environment is created with
-​ It can be used to draw on the computer hardware and software,
monitor screen or to pick a menu although users might also need to
item. wear devices such as goggles,
5.​ Scanner headsets or bodysuits to interact
-​ A scanner is a type of input device with the environment.
that works in the same way as a
photocopier. Types of Virtual Reality
-​ It's used when there's data on 1.​ Non-immersive
paper that needs to be transferred -​ This type of VR typically refers to a
to the computer's hard disc for 3D simulated environment that's
further processing. accessed through a computer
6.​ Barcode Reader screen.
-​ A bar code reader is a device that 2.​ Semi-immersive
reads bar-coded data (data that is -​ This type of VR offers a partial VR
represented by light and dark experience that's accessed through
lines).
 a computer screen or some type of physically within the virtual
glasses or headset. environment.
3.​ Fully immersive e.​ Multi-sensory haptic feedback
-​ This type of immersive VR delivers -​ Advanced virtual reality systems
the greatest level of virtual reality, can also include haptic feedback,
completely immersing the user in which gives tactile sensations to
the simulated 3D world. the users.
4.​ Augmented Reality f.​ Spatial collaboration
-​ AR is also sometimes referred to as -​ The capacity for individuals or
a type of virtual reality, although groups to work together and
many would argue that it's a communicate in a common virtual
separate but related field. environment through the use of
-​ With augmented reality, virtual virtual reality technology is known
simulations are overlaid with as spatial collaboration.
real-world environments to g.​ Complete 360-degree views
enhance or augment those -​ With a full 360-degree spherical
environments. field of view that most VR systems
5.​ Mixed reality offer, users can look in any
-​ This category blends the physical direction and explore the virtual
and virtual worlds into a single space from different perspectives,
space. just as they would in the real
world.
Features of Virtual Reality h.​ Adaptive environments
a.​ Immersion -​ When generative AI is integrated
-​ By immersing users in a with VR settings, the result is a
computer-generated world that responsive and personalized
seems and feels genuine, VR seeks experience that can change
to evoke a feeling of immersion. dynamically in response to human
b.​ Interaction inputs.
-​ Virtual reality is a highly interactive
experience where people can
interact with various elements
realistically.
c.​ Realistic visuals
-​ High-resolution monitors and
sophisticated graphics rendering
techniques are used in VR to
produce vivid, lifelike images. This
includes realistic lighting and
textures, realistic 3D visuals and
stereoscopic imaging for depth
perception.
d.​ Spatial audio
-​ Spatial audio technology offers
realistic sound effects positioned
Higher Cognition and Interaction Styles physical counter parts, such
as buttons and sliders
Interaction Styles 2.​ Indirect Metaphors
-​ Refers to all the ways the user can -​ employ symbolic
communicate or otherwise interact representations, abstract
with the computer system. concepts, or gestures to
form associations and
Metaphor convey meaning.
-​ a design approach that involves
representing digital interfaces and Role of Cultural and Contextual
interactions using familiar Metaphors
concepts or elements from the a.​ Cultural Metaphors - draw upon
physical or real world shared cultural references to create
-​ elp users understand and interact a sense of familiarity and resonate
with technology by drawing with specific user groups
parallels between the digital and b.​ Contextual Metaphors - Adapt to
physical realms the users’ environment and
specific task, utilizing real-world
Common Interface of Metaphors scenarios to facilitate
a.​ Desktop Metaphor comprehension
-​ represents the virtual
workspace with Direct Manipulation
icons,folders, and files, -​ Themetaphor of direct
simulating a physical desk manipulation works well in
b.​ Trash Bin Metaphor computing environments and was
-​ Mirrors the action of introduced in the early days of
discarding unwanted items, Xerox PARC
providing a straight forward -​ Widely disseminated by
way to delete files Shneiderman (1983).
c.​ Newspaper Metaphor -​ Its designs can provide the
-​ Mimics the layout and capability for differing populations
navigation of traditional and easily stretch across
newspapers, delivering news international boundaries.
and articles in a familiar -​ In the early days, Keyboard
format. commands were used along with
inserting special commands to
Benefits of Metaphors in UI provide instructions for viewing
●​ Improved User Understanding and and printing the documents as a
Familiarity separate operation.
●​ Enhanced user engagement and
retention Three Key Principles of Direct
Manipulation
Types of Metaphors 1.​ Continuous Representation
1.​ Direct Metaphors ●​ Visual metaphors represent
-​ Use visual representations object and actions
that closely resemble their 2.​ Physical Actions
 ●​ user interact using clicks, -​ combines direct
taps, drags, and gestures manipulation with virtual
rather than typing reality
commands -​ users are inside the virtual
3.​ Rapid, Incremental, and Reversible space and interact naturally
Actions
●​ changes happen instantly, Roles of Visual Metaphors
and users can easily undo ●​ Visual metaphors make interfaces
actions intuitive and user-friendly.
●​ Using simple analogies like
Attributes and Benefits of Direct paintbrushes, pencils, folders, and
Manipulation ●​ trash bin.
●​ Easy to learn ●​ Mixing too many metaphors can
-​ beginners understand it creates confusion.
quickly, often through ○​ Example:
observation ■​ A trash bin icon
●​ Fast for Experts represents deleting
-​ supports rapid workflow and files.
customizations ■​ A magnifying glass
●​ Low Error Rate icon represents search.
-​ few error messages since
actions are clear and Problems with Direct Manipulation
reversible ●​ GUIs were a setback for
●​ User Confidence vision-impaired users, who
-​ user feel in control and appreciated the simplicity of
experience less anxiety linear-command languages
●​ Goal- oriented Feedback ●​ Direct manipulation designs may
-​ users immediately see the consume valuable screen space
effect of their actions and thus force valuable
information off-screen, requiring
Levels of Direct Manipulation scrolling or multiple actions.
1.​ Weak Direct Manipulation ●​ Another issue is that users must
-​ Uses devices like a mouse, learn the meaning of visual
joystick, or trackpad representations and graphic icons.
-​ Interaction is indirect; users ●​ The visual representation may
control objects via external sometimes be misleading. Users
device may grasp the analogical
2.​ Medium Direct Manipulation representation rapidly but then
-​ users touch screens for more may draw incorrect conclusions
natural interaction about permissible actions.
-​ intuitive actions like tapping ●​ For experienced typists, taking a
and swiping are easy, but hand off the keyboard to move a
advanced gesturesrequire mouse or point with a finger may
learning take more time than typing
3.​ Immersive Direct Manipulation relevant command.
Widget Survey Other Interaction Styles
-​ process of examining and a.​ Command Line Interface (CLI)
comparing different interface -​ means of interacting with
widgets to evaluate how well they software via commands –
support user interaction. each formatted as a line of
-​ It focuses on factors like text.
learnability, accessibility, -​ Oldest interaction style
aesthetics, feedback and -​ Not very user-friendly
suggestions, usability, user (requires memorizing
preferences, and efficiency. commands)
b.​ Graphical User Interface (GUI)
Widget -​ Which a user interacts with
-​ widgets (short for window gadget) graphical components such
are the basic building block of a as icons, buttons, and menus
user interface, it is an interactive -​ Most popular interaction
element that allows user to style today
perform specific actions or access -​ Easy to use
information. c.​ Natural Language Interface (NLI)
-​ Which the user and the
Command Languages system communicate via a
-​ Command language is the earliest natural language (human)
form of interaction style and is still -​ Interact using everyday
being used, though mainly on language
Linux/Unix operating systems -​ Uses voice assistant
d.​ Q and A (Q/A)
Types of Common Language -​ user is asked a series of
1.​ Bash - default shell for Linux questions (mainly with
and other Unix-based yes/no responses, multiple
systems, used for choice, or codes) and
interacting with the system so is led through the
and running scripts. interaction step by step.
2.​ Powershell - command-line shell -​ Chatbot-based interaction
and scripting language for -​ Domain-specific (not
Windows, designed for automation universal)
and IT operations.
3.​ Command Prompt - command line Choosing among Interaction Styles
interface for windows used for Factors in Choosing Interaction Styles
interacting with the operating 1.​ User Expertise
system -​ Novices: Menus, metaphors,
4.​ Batch - scripting language primarily direct manipulation
used in Microsoft Windows -​ Experts: Command
environments for automating tasks languages, shortcuts
through the command prompt 2.​ Task Complexity
-​ Simple tasks → menus or
direct manipulation
 -​ Complex tasks → commands
or advanced widgets
3.​ Frequency of Use
-​ Frequent tasks →
shortcuts/commands
-​ Infrequent tasks →
menus/forms
4.​ System Resources / Platform
5.​ Accessibility & Inclusivity
a.​ Elderly → large icons, direct
manipulation
b.​ Visually impaired → natural
language, screen readers
c.​ Physical impairments →
voice commands,
eye-tracking

●​ Interaction styles is not equivalent

to one size fits all
-​ Wrong choice = frustration
-​ Right choice = seamless interaction

Key Takeaways
1.​ No single best interaction style
2.​ Choice depends on context (user,
task, frequency, platform,
accessibility)
3.​ Often, multiple styles are
combined
4.​ Good design = right style for the
right context
Figma Interfaces Guide

Figma
-​ Collaborative, web-based designing
tool that is used by various
personalities like designers,
product managers, and developers
to create wireframes, prototypes,
or aesthetic designs. It provides
easy-to-use components for
sketching the graphics on its
workspace.

Tools Bar

●​ Move Tool
●​ Add Frame
●​ Shape Tool
●​ Pen Tools
●​ Text Tool
●​ Comment
●​ Action Tool

●​ Move Tools

Pages and Layers

●​ File / Assets Tabs
(switch between project
files and
assets/components)
●​ Pages Section
(Homepage, About Us,
Footer, Header, etc.)
●​ Layers Section
(shows artboards,
frames, and design
elements inside a page)