midterms

Question 1

creating an early version of a product to test it’s functionality before full development

Answer 1

prototyping

Question 2

simplified layout of a webpage or app, focuses on structure

Answer 2

wireframing

Question 3

used in early stages, and it’s simple and handrawn representation of a UI

Answer 3

Low-Fidelity

Question 4

4 Characteristics of low-fi

Answer 4

-Sketchy and basic
-Static and non interactive
- quick and inexpensive
- focus on concept, not aesthetic

Question 5

common forms of lo-fi: hand-drawn screens and layouts

Answer 5

Paper Prototype

Question 6

common forms of lo-fi: basic digital, mockups with minimal details

Answer 6

Wireframes

Question 7

common forms of lo-fi: series of sketches showing user interaction

Answer 7

storyboard sequences

Question 8

closely resembles the actual UI and and it’s detailed and interactive and visually polished

Answer 8

high-fidelity

Question 9

4 characteristics of hi-fi

Answer 9

• visually detailed
• interactive
• more time-consuming to build
• usability testing ready

Question 10

common forms of hi-fi: interactive screens with links between pages

Answer 10

clickable wireframes

Question 11

common forms of hi-fi: simulating real user interaction

Answer 11

mockups with animations

Question 12

built-in tools like figma, Invision, or adobeXD with high detail interaction

Answer 12

functional prototypes

Question 13

help deskgners to create Low-Fidelity and high-fidelity prototypes for user testing feedback and design validation

Answer 13

prototyping tools

Question 14

low-fi prototyping tools

Question 15

low-fi prototyping tools: simplest way to sketch wireframes and concepts

Answer 15

pen and paper

Question 16

low-fi prototyping tools: digital wireframing tool that mimic hand-drawn sketches

Answer 16

balsamiq

Question 17

low-fi prototyping tools: simple online tool for wireframing and flowcharts

Answer 17

whimsical

Question 18

low-fi prototyping tools: collaborative whiteboard tools for brainstorming and sketching

Answer 18

miro/MURAL

Question 19

hi-fi prototyping tools: web-based tool for UI design, wireframing and interactive prototyping

Answer 19

figma

Question 20

hi-fi prototyping tools: powerful design tool for interactive and animated prototypes

Answer 20

adobeXD

Question 21

hi-fi prototyping tools: macOS-based tool for creating detailed UI/UX designs

Answer 21

sketch

Question 22

hi-fi prototyping tools: great for interactive prototypes, animations, and user testing

Answer 22

InVision

Question 23

hi-fi prototyping tools: advanced prototyping with dynamic content, logic, and conditions

Answer 23

axure RP

Question 24

code-based prototyping tools: mix of design and code for interactive prototypes using React

Answer 24

Framer

Question 25

code-based prototyping tools: a no code tool for designing and building live prototypes

Answer 25

webflow

Question 26

code-based prototyping tools: directly coding interactive prototypes for full control

Answer 26

HTML, CSS, JS

Question 27

CSS

Answer 27

Cascading Style Sheets

Question 28

a style language used to co trol the representation and layout of HTML documents

Answer 28

CSS

Question 29

the term "____" refers to how styles are applied in a priority order, different styles can override other based on hierarchy

Answer 29

Cascading

Question 30

override priority of CSS: highest priority

Answer 30

inline styles

Question 31

override priority of CSS:

Answer 31

1. inline styles (highest priority) 2. ID selectors (#id) 3. class selectors (.class) 4. element selectors (p, h1, div) 5. external stylesheets (lowest priority)

Question 32

T/F: css is a rule-based language

Answer 32

True

Question 33

a simple css structure consisting of:

Answer 33

selectors, properties, and values

Question 34

p {}

Answer 34

targets all

elements

Question 35

.highlight

Answer 35

targets all elements with class highlight

Question 36

| #header{}

Answer 36

targets all the elements with ID header

Question 37

h1, h2

Answer 37

a group selector that targets multiple elements (h1, h2)

Question 38

div p {}

Answer 38

a descendant selector that targets

inside

Question 39

3 common css properties

Answer 39

- text and font styling - box model (spacing and sizing) - background styling

Question 40

space outside the element

Answer 40

margin

Question 41

space inside the element

Answer 41

padding

Question 42

type of css: applied directly within an HTML element using the style attriburte

Answer 42

inline css

Question 43

type of css: written inside