UI Design Principles: Introduction and Basics

Comprehensive practice flashcards covering the introductory concepts of UI vs. UX, design mindset, object properties, and visual hierarchy as presented in Michael Filipiuk's UI Design Principles eBook.

Who is the author of the eBook 'UI Design Principles'?

Michael Filipiuk

How does the eBook define User Interface Design (UI Design)?

It refers to the visual elements of a digital product, focusing on looks and style.

How does User Experience Design (UX Design) differ from UI Design?

UX Design refers to the overall experience a user has while interacting with a product, including their emotions like satisfaction or frustration.

According to the transcript, why is it impossible to talk about UX without UI?

A badly designed interface (e.g., bad contrast or tiny fonts) will negatively impact the User Experience.

What is the primary role of a Brand Designer in relation to UI?

A Brand Designer conducts research on the target audience to decide on a logo, colors, typefaces, language, and visual appearance.

What mindset should a UI designer adopt regarding 'pretty' interfaces?

Design should be 'invisible' or non-intrusive, redirecting attention to the main purpose of the app rather than just looking good, because users care about completing tasks with minimal effort.

What is the 'salt analogy' used by the author to describe design?

Users only notice design when it is bad (like a meal that doesn't taste right), but they don't consciously notice great design while using it.

Complete the quote by Joe Sparano: 'Good design is obvious. Great design is ___________.'

transparent

What two crucial elements make a User Interface great?

It must be usable and delightful.

How does the Interaction Design Foundation define 'Usability'?

A measure of how well a specific user in a specific context can use a product to achieve a defined goal effectively, efficiently, and satisfactorily.

What was unique about the Domino's Zero Click app example?

It allowed users to order pizza automatically just by opening the app, demonstrating that usability is more important than complex visual elements like gradient buttons.

In UI Design, what unit of measurement is typically used instead of pixels ($px$) when designing for devices like an iPhone X?

Points ($pt$)

What are the common resolutions in points ($pt$) for an iPhone X and a MacBook Pro 13-inch according to the text?

iPhone X: $375 imes 812\,pt$; MacBook Pro 13-inch: $900 imes 1440\,pt$.

What are the two components of an object's size in UI design?

Width ($W$) and Height ($H$).

What do the $X$ and $Y$ position values represent for an element?

The $X$ value states the distance from the left edge of the screen, and the $Y$ value states the distance from the top edge.

What are the three types of borders (strokes) available in UI design?

Inner, centered, and outer.

Why is 'inner stroke' the most frequently used border type in UI Design?

Because it does not increase the physical size of the element, whereas centered or outer strokes do.

What does the 'Border radius' property define?

How rounded the edges of a shape will be.

What four values define a shadow in UI design?

$X$, $Y$, Blur, and Opacity.

What is the difference between Layer blur and Background blur?

Layer blur reduces the detail of the element itself, while Background blur makes the elements underneath the object blurred.

How can a designer create visual hierarchy using properties?

By manipulating Size (making more important things larger) and Color (using bold colors to draw attention).