==> picture [97 x 41] intentionally omitted <==

GUI DESIGN ITPDP’26, L12

Dr. Minna Pakanen Department of Digital Design and Information Studies mpakanen @cc.au.dk

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [717 x 404] intentionally omitted <==

==> picture [243 x 404] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

CONTENTS

• Visual perception

• Gestalt principles

• UI design guidelines

• Interaction patterns

• Break

• UI design process

• Layout of GUIs

• Aesthetic styles

• Color on screen

22[ND] APRIL 2026

MINNA PAKANEN

VISUAL PERCEPTION

==> picture [275 x 155] intentionally omitted <==

Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines

22[ND] APRIL 2026

MINNA PAKANEN

4

WE PERCEIVE WHAT WE EXPECT

Our expectations & perceptions—are biased by three factors:

• The past: our experience

• The present: the current context

• The future: our goals

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our experience

==> picture [640 x 202] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

BIASED PERCEPTION

By our experience Design implication: Be consistent!

• Place information and controls in consistent locations

• Controls and data displays that serve the same function on different pages should be placed in the same position on each page, and have the same colour, text fonts, shading, and so on

Jeff Johnson (2013)

==> picture [247 x 452] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By current context

==> picture [565 x 132] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By current context

==> picture [366 x 160] intentionally omitted <==

Jeff Johnson (2013)

==> picture [245 x 139] intentionally omitted <==

==> picture [276 x 157] intentionally omitted <==

MINNA PAKANEN

22[ND] APRIL 2026

BIASED PERCEPTION

By our goals

Is there a screwdriver in the next picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

==> picture [683 x 249] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

Was there a screwdriver in the prior picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

Was there a tape roll in the picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

==> picture [683 x 249] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

DESIGN IMPLICATIONS

Avoid ambiguity

• Test your design to verify that all users interpret the display in the same way

• Where ambiguity is unavoidable, either rely on standards or conventions to resolve it, or prime users to resolve the ambiguity in the intended way

• For example, computer displays often shade buttons and text fields to make them look raised in relation to the background surface.

==> picture [256 x 94] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGN IMPLICATIONS

Understand user goals!

• Users come to a system with goals they want to achieve

• Goals may vary, and goals strongly influence what users perceive

• Ensure that at every point in an interaction, the information users need is available, prominent, and maps clearly to a possible user goal, so users will notice and use the information

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

Gordon, I. E. (2004). Theories of visual perception. Psychology press.

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT

==> picture [272 x 326] intentionally omitted <==

==> picture [260 x 326] intentionally omitted <==

==> picture [154 x 155] intentionally omitted <==

==> picture [165 x 161] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

“The whole of something is more important to our understanding than the individual parts.”

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

• Describe how the human eye perceives visual elements

• Aim to:

• show how complex scenes can be reduced to more simple shapes

• explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

1) Similarity

2) Proximity

• 3) Common region

• 4) Closure

• 5) Continuation

6) Figure-ground

• 7) Focal point

22[ND] APRIL 2026

MINNA PAKANEN

1) SIMILARITY

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

When things appear to be similar to each other we group them together. And we also tend to think they have the same function.

==> picture [80 x 79] intentionally omitted <==

==> picture [299 x 178] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [288 x 82] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2) PROXIMITY

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 177] intentionally omitted <==

==> picture [80 x 276] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 177] intentionally omitted <==

==> picture [80 x 275] intentionally omitted <==

==> picture [79 x 275] intentionally omitted <==

==> picture [80 x 80] intentionally omitted <==

==> picture [80 x 177] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: PROXIMITY

When elements are close together, appear to be more related to each other than objects with more proximity to each other

• separate or build relationship using empty space between objects

==> picture [716 x 187] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

3) COMMON REGION

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 178] intentionally omitted <==

==> picture [80 x 276] intentionally omitted <==

==> picture [398 x 301] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: COMMON REGION

The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together.

Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, color, etc.

==> picture [294 x 455] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

4) CLOSURE

==> picture [111 x 129] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CLOSURE

==> picture [272 x 155] intentionally omitted <==

==> picture [131 x 129] intentionally omitted <==

gizmodo.com

www.worldwildlife.org

https://commons.wikimedia. org/wiki/File:NBC_logo.svg

==> picture [129 x 129] intentionally omitted <==

==> picture [353 x 129] intentionally omitted <==

==> picture [235 x 330] intentionally omitted <==

https://www.fairtrade.net

22[ND] APRIL 2026

MINNA PAKANEN

5) CONTINUATION

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CONTINUATION

==> picture [431 x 272] intentionally omitted <==

https://juliankay.com/development/principles-and-actions-for-metro-app/

==> picture [268 x 268] intentionally omitted <==

https://en.wikipedia.org/wiki/The_Dark_Side_of_the_Moon#/ media/File:Dark_Side_of_the_Moon.png

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CONTINUATION

==> picture [352 x 453] intentionally omitted <==

----- Start of picture text -----
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

6) FIGURE-GROUND

==> picture [196 x 219] intentionally omitted <==

People perceive objects as either being in the foreground (figures) or the background (grounds)

==> picture [272 x 236] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: FIGURE-GROUND

==> picture [239 x 347] intentionally omitted <==

==> picture [239 x 347] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

EXAMPLE: FIGURE-GROUND

==> picture [960 x 301] intentionally omitted <==

https://www.usertesting.com/blog/gestalt-principles

22[ND] APRIL 2026

MINNA PAKANEN

7) FOCAL POINT

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [80 x 80] intentionally omitted <==

==> picture [77 x 77] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: FOCAL POINT

==> picture [585 x 296] intentionally omitted <==

https://www.instagram.com

==> picture [340 x 296] intentionally omitted <==

https://dribbble.com/shots/10003996-focal-pointlogotype/attachments/2021673?mode=media

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN GUIDELINES Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines. W3C Web Accessibility Initiative WAI (n.d.) Accessibity guidelines. https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards

22[ND] APRIL 2026 MINNA PAKANEN

CHALLENGES WITH UI DESIGN GUIDELINES

Following guidelines is not as straightforward as following cooking recipes

• › Design rules often describe goals rather than actions › Very general to make them broadly applicable

• › Open to interpretation › Design rules often contradict, i.e., they suggest different designs

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN GUIDELINES

Conflicts & tradeoffs

Bright screen & Lightweight & Multifunctional & Powerful & High resolution & WYSIWYG &

Long battery life Sturdy Easy to learn Simple Fast loading Usable by blind people

22[ND] APRIL 2026

MINNA PAKANEN

2 BEST KNOWN UI DESIGN GUIDELINES

22[ND] APRIL 2026 MINNA PAKANEN

OTHER UI DESIGN GUIDELINES STONE ET AL. (2005)

• › Visibility : First step to goal should be clear

• › Affordance : Control suggests how to use it

• › Feedback : Should be clear what happened or is happening

• › Simplicity : As simple as possible and task-focused

• › Structure : Content organized sensibly

• › Consistency : Similarity for predictability

• › Tolerance : Prevent errors, help recovery

• › Accessibility : Usable by all intended users, despite handicap, access

• device, or environmental conditions

22[ND] APRIL 2026

MINNA PAKANEN

ACCESSIBILITY GUIDELINES

W3C WEB ACCESSIBILITY INITIATIVE WAI

› Focus on

• Perceivable information and user interface

• Text alternatives for non-text content

• Captions and other alternatives for multimedia

• Content can be presented in different ways

• Content is easier to see and hear

• Operable user interface and navigation

• Functionality is available from a keyboard

• Users have enough time to read and use the content

• Content does not cause seizures and physical reactions

• Users can easily navigate, find content, and determine where they are

• Users can use different input modalities beyond keyboard

• Understandable information and user interface

• Text is readable and understandable

• Content appears and operates in predictable ways

• Users are helped to avoid and correct mistakes

• Robust content and reliable interpretation

• Content is compatible with current and future user tools

https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards

22[ND] APRIL 2026

MINNA PAKANEN

OTHER UI DESIGN GUIDELINES JOHNSON (2007)

• › Focus on the users and their tasks, not on the technology

• Consider function first (conceptual model), presentation later

• Conform to the users’ view of the task

• Design for the common case

• Don’t complicate the users’ task

• Facilitate learning: consistency!

• Deliver information, not just data

• Design for responsiveness

Johnson, J. (2007). GUI bloopers 2.0: Common user interface design don’ts and dos

22[ND] APRIL 2026

MINNA PAKANEN

INTERACTION PATTERNS Jenifer Tidwell (2010) Designing Interfaces: Patterns for Effective Interaction Design

22[ND] APRIL 2026

MINNA PAKANEN

12 INTERACTION PATTERNS

1. Safe exploration

2. Instant gratfication

3. Satisficing

4. Changes in midstream

5. Deferred choices

6. Incremental construction

7. Habituation

8. Spatial memory

9. Prospective memory

10. Streamlined repetition

11. Keyboard only

12. Other people’s advice

22[ND] APRIL 2026

MINNA PAKANEN

1. SAFE EXPLORATION

”let me explore without getting lost or in trouble”

==> picture [92 x 115] intentionally omitted <==

==> picture [267 x 114] intentionally omitted <==

==> picture [364 x 317] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2. INSTANT GRATIFICATION

”I wan’t to accomplish something NOW, not later”

==> picture [491 x 274] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2. INSTANT GRATIFICATION

”I wan’t to accomplish something NOW, not later”

==> picture [348 x 212] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

3. SATISFICING (SATISFYING + SUFFICE)

”this is good ennough, I dont want to spend time learning it better”

==> picture [668 x 376] intentionally omitted <==

----- Start of picture text -----
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

3. SATISFICING (SATISFYING + SUFFICE)

This means several things that interaction designers should consider:

• Use “calls to action” in the interface: give the user directions what to do first, type here or drag things here, and tap the button to begin…

• Make labels short, plainly worded, and quick to read (includes menu buttons)

• Use the layout of the interface to communicate the meaning

• Make it easy to move around the interface, the back button!

• Avoid visual complexity, as novice users look for the first thing that might work

22[ND] APRIL 2026

MINNA PAKANEN

4. CHANGES IN MIDSTREAM

”I changed my mind about what I was doing”

==> picture [567 x 341] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

5. DEFERRED CHOICES

”I don’t want to

answer that now, let me finish later”

==> picture [560 x 356] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

6. INCREMENTAL CONSTRUCTION

”let me change this. No that doesn’t look right; let me change it again. That looks better”

==> picture [473 x 370] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

7. HABITUATION

”that gesture works everywhere else, why doesn’t it work here?”

Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+S, Ctrl+A, Ctrl+Z

==> picture [273 x 435] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

8. SPATIAL MEMORY

”I swear that button was here a minute ago. Where did it go?”

==> picture [372 x 331] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

8. SPATIAL MEMORY

”I swear that button was here a minute ago. Where did it go?”

==> picture [960 x 140] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

9. PROSPECTIVE MEMORY

”I am putting this here to remind myself to deal with this later”

==> picture [510 x 311] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

9. PROSPECTIVE MEMORY

”I am putting this here to remind myself to deal with this later”

==> picture [280 x 271] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

10. STREAMLINED REPETITION

”I have to repeat this how many times?”

==> picture [202 x 486] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

10. STREAMLINED REPETITION

”I have to repeat this how many times?”

==> picture [449 x 163] intentionally omitted <==

==> picture [324 x 269] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

11. KEYBOARD ONLY

”Please don’t make me use a mouse”

==> picture [579 x 234] intentionally omitted <==

==> picture [239 x 239] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

12. OTHER PEOPLE’S ADVICE

”What did everyone else say about this”

==> picture [329 x 372] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

A LITTLE ABOUT THE UI DESIGN PROCESS…

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN PROCESS

1. Strategy

2. Scope

3. Structure

4. Skeleton

5. Surface

22[ND] APRIL 2026

MINNA PAKANEN

1. STRATEGY

• › What is the problem you are trying to solve?

• › What are your user needs?

• › How is problem best solved?

==> picture [283 x 307] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

2. SCOPE

• › Specification: what should it do? And in what way?

• › Prioritised features: the most important elements (and why)?

==> picture [231 x 251] intentionally omitted <==

==> picture [444 x 251] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

3. STRUCTURE

• › User flow: what are the most logical steps for your users to take, to gratify their needs

• › Information architecture: how to structure your system

==> picture [138 x 43] intentionally omitted <==

==> picture [125 x 83] intentionally omitted <==

==> picture [125 x 84] intentionally omitted <==

==> picture [125 x 129] intentionally omitted <==

https://careerfoundry.com/en/blog/ux-design/what-are-user-flows/22[[ND]]

22[[ND]] APRIL 2026

MINNA PAKANEN

4. SKELETON

==> picture [619 x 354] intentionally omitted <==

On the structure: › Placing elements in relation to one another › Presentation of the information –> facilitates understanding

==> picture [156 x 13] intentionally omitted <==

----- Start of picture text -----
https://www.above.se/shft
----- End of picture text -----

22[ND] APRIL 2026

==> picture [56 x 7] intentionally omitted <==

----- Start of picture text -----
MINNA PAKANEN
----- End of picture text -----

WIREFRAMING TOOLS

Wireframe.cc

==> picture [566 x 361] intentionally omitted <==

https://wireframe.cc

22[ND] APRIL 2026

MINNA PAKANEN

WIREFRAMING TOOLS

Balsamic

==> picture [602 x 349] intentionally omitted <==

https://balsamiq.com/wireframes/

22[ND] APRIL 2026

MINNA PAKANEN

5. SURFACE

• › What should the interface look like?

• › How can the visual support the desired interaction?

• › How can it best communicate the brand, product, value, and functionality in one cohesive image?

• › What is the sensory experience desired?

22[ND] APRIL 2026

MINNA PAKANEN

SURFACE

==> picture [413 x 346] intentionally omitted <==

==> picture [169 x 290] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

LAYOUT OF GUIS

==> picture [456 x 361] intentionally omitted <==

To avoid the common mistakes …

• Uxplanet

https://uxplanet.org/common-webpage-design-mistakes-59eed9831bd7

• Material design

https://material.io/design/

22[ND] APRIL 2026

MINNA PAKANEN

RESPONSIVE LAYOUT

Columns, gutters, and margins

==> picture [631 x 271] intentionally omitted <==

----- Start of picture text -----
2. Gutters:
Spaces between
columns
3. Margins:
Space between
content and left
and right edges of
the screen
----- End of picture text -----

==> picture [134 x 52] intentionally omitted <==

----- Start of picture text -----
1. Columns:
where the content
is placed
----- End of picture text -----

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

Larger gutter

RESPONSIVE LAYOUT

Gutters and margins

Gutter & margins width can be different from each other

==> picture [478 x 231] intentionally omitted <==

==> picture [311 x 178] intentionally omitted <==

Gutter and margins for horizontal scroll

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

EVEN SPACING

Gutters and margins

Gutter & margins width can be different from each other

Gutter and margins for horizontal scroll

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

RULE OF THIRDS

==> picture [574 x 414] intentionally omitted <==

----- Start of picture text -----
41% 20%
25% 14%
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

WHITE SPACE

Negative space

==> picture [404 x 157] intentionally omitted <==

https://medium.muz.li/the-effective-utilization-of-white-space-in-ui-design-c944009b2540

==> picture [405 x 305] intentionally omitted <==

https://designwoop.com/minimalist-app-design

https://www.w3.org/WAI/tips/designing/ 22[ND] APRIL 2026 MINNA PAKANEN

ORGANIZE AND PRIORITIZE THE CONTENTS

Size: The more important a headline is, the larger its font size should be Prominence: The more important the headline or content, the higher up the page it should be Content Relationships: Group similar content types by displaying the content in a similar visual style, or in a clearly defined area.

==> picture [505 x 168] intentionally omitted <==

==> picture [368 x 175] intentionally omitted <==

(Jeff Johnson, 2013)

https://m2.material.io/design/layout/applying-density.html#layout

22[ND] APRIL 2026 MINNA PAKANEN

ORGANIZE THE CONTENTS PROPERLY

Locate important things in predictable locations:

• Display the company name and logo prominently in the top left corner of the homepage

• Remember to enable users using logo as going back to landing page

• The most important content should be above the fold (i.e. the area of the page visible without scrolling, the landing site) , and lead users down the page when there is more content to see.

• Primary navigation in a highly noticeable place

  • Menu, language selection, search fields should be in the header area

  • The most crucial tasks should be visually prominent on the page

• Describe actions in a way that resonates with your target audience's goals. What are they hoping to achieve on your homepage?

• Links should be named descriptively

• Keep it simple and make sure your design scales to different GUIs (mobile, tablet and computer)

https://www.nngroup.com/articles/homepage-design-principles/

22[ND] APRIL 2026

MINNA PAKANEN

ORGANIZE THE CONTENTS PROPERLY

Examples: vr.fi and dsb.dk

==> picture [477 x 251] intentionally omitted <==

==> picture [450 x 251] intentionally omitted <==

• Where are the logo, menu, language selection, search field, and the most important contents for the user’s task completion?

• What is in the header, main area, and footer?

• Is the most priority content prominently presented?

• How is the navigation designed, does it work well both in mobile and computer?

22[ND] APRIL 2026

MINNA PAKANEN

TYPOGRAPHY

Note that print and screen need different kind of typography!

==> picture [73 x 73] intentionally omitted <==

==> picture [83 x 83] intentionally omitted <==

==> picture [47 x 32] intentionally omitted <==

==> picture [301 x 151] intentionally omitted <==

----- Start of picture text -----
S S
Sans serif
Serif
----- End of picture text -----

==> picture [47 x 32] intentionally omitted <==

==> picture [74 x 73] intentionally omitted <==

==> picture [73 x 73] intentionally omitted <==

==> picture [38 x 39] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

TYPOGRAPHY ON SCREEN

• Avoid hard to read and decorative fonts

• Consider font size

• Avoid text on noisy background

• Avoid long sections of bold, italic, or uppercase text.

• Avoid centered text in text blocks

How about this?

Or this?

• Left-aligned text for large sections, as this gives readers a consistent starting point for each line of text.

• Centered, right-aligned, or justified text .

• can be used for headings or short sections

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

ACCESSIBILITY OF SCREEN FONTS

› Focus on size, spacing, contrast, font

==> picture [450 x 237] intentionally omitted <==

==> picture [449 x 237] intentionally omitted <==

https://www.audioeye.com/ultimate-guide-to-accessible-web-design/

22[ND] APRIL 2026

MINNA PAKANEN

MINIMIZE THE NEED FOR READING

==> picture [295 x 214] intentionally omitted <==

==> picture [333 x 221] intentionally omitted <==

==> picture [228 x 52] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

STATES OF AN INTERACTIVE ELEMENT

Distinct, additive & consistent visual representations

==> picture [374 x 227] intentionally omitted <==

==> picture [184 x 223] intentionally omitted <==

==> picture [379 x 227] intentionally omitted <==

https://material.io/design/interaction/states.html#usage

22[ND] APRIL 2026

MINNA PAKANEN

STATES OF AN INTERACTIVE ELEMENT

Distinct, additive & consistent visual representations

==> picture [443 x 279] intentionally omitted <==

==> picture [443 x 273] intentionally omitted <==

https://material.io/design/interaction/states.html#usage

22[ND] APRIL 2026

MINNA PAKANEN

ERROR MESSAGES

==> picture [231 x 59] intentionally omitted <==

Sorry!

Put it in where users are looking

• People focus in predictable places when interacting with graphical user interfaces

• Mark the error

• indicate clearly what is wrong

Reserve red for errors

• Using red for any other information on a computer display invites misinterpretation

• Use another color for errors or mark them with an error symbol if designing for cultures where red is positive color (Chinese)

Your password was not correct. Please try again. OK

==> picture [231 x 123] intentionally omitted <==

==> picture [230 x 107] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

GUI DESIGN & PROTOTYPING

Figma

==> picture [601 x 357] intentionally omitted <==

https://www.figma.com

22[ND] APRIL 2026

MINNA PAKANEN

AESTHETIC STYLES

==> picture [382 x 194] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

==> picture [501 x 376] intentionally omitted <==

http://www.originalgreen.org/blog/2013/skeuomorphism---how-steve.html

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

Benefits

Skeuomorphism may be used in many different ways to help familiarise users to a new product and technology

• For example, if an object casts a shadow, our brains automatically visualise that as a 3D shape that has volume

==> picture [263 x 94] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

Challenges

• The problem is when borrowing features from the original design, you often also bring its limitations with it, even when these limitations have no reason to exist anymore • There is also the problem of getting skeuomorphism wrong: making something look like a physical object but not work like it

http://www.originalgreen.org/blog/2013/skeuomorphism---how-steve.html

22[ND] APRIL 2026

MINNA PAKANEN

FLAT

==> picture [531 x 345] intentionally omitted <==

https://mspoweruser.com/developers-31-days-of-windows-phone-metro-design-from-microsoft-ux-designer/

==> picture [353 x 220] intentionally omitted <==

==> picture [330 x 186] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

FLAT

Challenges

• Taking the approach too far to minimalism can have serious consequences on usability because when all the affordances of the design are removed it is harder for the user to know how to interact with the interface

==> picture [268 x 195] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

FROM SKEUOMORPHISM TO FLAT DESIGN

==> picture [388 x 291] intentionally omitted <==

==> picture [399 x 290] intentionally omitted <==

skeuomorphic

flat

22[ND] APRIL 2026 MINNA PAKANEN

FROM SKEUOMORPHISM TO FLAT DESIGN

==> picture [190 x 336] intentionally omitted <==

==> picture [189 x 336] intentionally omitted <==

skeuomorphic

flat

22[ND] APRIL 2026 MINNA PAKANEN

WHAT IS NEXT?

==> picture [598 x 203] intentionally omitted <==

https://smithhousedesign.com/new-logo-instagram-marks-beginning-end-flat-design/

22[ND] APRIL 2026

MINNA PAKANEN

NEUOMORPHISM

==> picture [426 x 320] intentionally omitted <==

https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking

22[ND] APRIL 2026

MINNA PAKANEN

NEUOMORPHISM

==> picture [401 x 301] intentionally omitted <==

==> picture [401 x 301] intentionally omitted <==

https://envato.com/blog/skeuomorphism-is-back/

22[ND] APRIL 2026

MINNA PAKANEN

STYLE: WHICH PATH TO CHOOSE?

Good designers design for context, picking the best option for the specific case

• Take all the good things from flat design and skeuomorphism/realism and apply them in a way that is still usable. (e.g. Skeuominimalistic or neumorphism)

• Consider implications when using realism

• Simplification should not affect usability, and maximize skeuomorphic affordances to the point where it does not affect the simple beauty of minimalism

==> picture [236 x 418] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

ANIMATION ON WEBPAGES

==> picture [601 x 337] intentionally omitted <==

https://www.handwrytten.com

22[ND] APRIL 2026 MINNA PAKANEN

ANIMATION EASTER EGGS

==> picture [614 x 343] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

COLOR IN GUI

How to use colours in GUI design

22[ND] APRIL 2026

MINNA PAKANEN

112

COLOR

==> picture [291 x 258] intentionally omitted <==

Primary colors

Johannes Itten, 1961

https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR

==> picture [291 x 258] intentionally omitted <==

Secondary colors

Johannes Itten, 1961 https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR

==> picture [292 x 258] intentionally omitted <==

Full color wheel

Johannes Itten, 1961 https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR SPACE

RGB

For any kind of screen:

• computers, smartphones, tablets, TVs, cameras, etc.

• For digital images and elements

• Web & app design

RGB

• Icons

• Buttons

• Graphics

• File formats: JPG, PNG, GIF

• Web: HEX#(RRGGBB)

https://99designs.dk/blog/tips/correct-file-formats-rgb-and-cmyk/

MINNA PAKANEN

22[ND] APRIL 2026

Warm

==> picture [75 x 33] intentionally omitted <==

----- Start of picture text -----
Energizing
Happiness
----- End of picture text -----

MEANINGS

==> picture [689 x 375] intentionally omitted <==

----- Start of picture text -----
Cheerful
Energetic
Harmony
Natural Change/movement
Renewal GREEN Vitality
ORANGE
BLUE RED Bold
Calm
Aggression/danger
Refreshing
Love
Reliability/ strength
Hot
PURPLE
Wisdom
Luxury
----- End of picture text -----

Note the cultural differences:

https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/22[ND] APRIL 2026 MINNA PAKANEN

COLOR HARMONY

==> picture [152 x 153] intentionally omitted <==

==> picture [152 x 152] intentionally omitted <==

==> picture [152 x 152] intentionally omitted <==

==> picture [832 x 202] intentionally omitted <==

----- Start of picture text -----
Complimentary
Monochromatic Analogous
Split-complimentary Triadic Rectangle Square
----- End of picture text -----

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [105 x 105] intentionally omitted <==

COLOR HARMONY: COMPLIMENTARY

==> picture [196 x 83] intentionally omitted <==

==> picture [137 x 239] intentionally omitted <==

==> picture [466 x 313] intentionally omitted <==

==> picture [98 x 98] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [105 x 105] intentionally omitted <==

COLOR HARMONY: ANALOGOUS

==> picture [154 x 131] intentionally omitted <==

==> picture [412 x 331] intentionally omitted <==

==> picture [179 x 195] intentionally omitted <==

==> picture [114 x 104] intentionally omitted <==

https://www.mastercard.dk/da-dk.html

22[ND] APRIL 2026

MINNA PAKANEN

COLOR HARMONY: TRIADIC

==> picture [137 x 140] intentionally omitted <==

==> picture [132 x 176] intentionally omitted <==

==> picture [125 x 174] intentionally omitted <==

==> picture [112 x 114] intentionally omitted <==

==> picture [105 x 105] intentionally omitted <==

==> picture [327 x 296] intentionally omitted <==

https://www.burgerking.dk/menu

22[ND] APRIL 2026

MINNA PAKANEN

COLOR HARMONY: TRIADIC

==> picture [105 x 105] intentionally omitted <==

==> picture [237 x 157] intentionally omitted <==

==> picture [250 x 151] intentionally omitted <==

==> picture [482 x 291] intentionally omitted <==

https://indicius.com

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

by saturation and brightness as well as hue

• Avoid subtle color differences

• Make sure the contrast between colors is high

==> picture [241 x 125] intentionally omitted <==

Paleness of the color >

Patch size <

==> picture [46 x 126] intentionally omitted <==

==> picture [47 x 126] intentionally omitted <==

==> picture [46 x 126] intentionally omitted <==

Separation >

==> picture [47 x 126] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [385 x 293] intentionally omitted <==

==> picture [384 x 292] intentionally omitted <==

Jeff Johnson (2013)

https://colorbrewer2.org

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [387 x 293] intentionally omitted <==

==> picture [384 x 292] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [388 x 178] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SEPARATE STRONG OPPONENT COLORS

==> picture [182 x 291] intentionally omitted <==

==> picture [182 x 291] intentionally omitted <==

==> picture [182 x 291] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

ACCESSIBLE COLORS

Avoid color pairs that color-blind people cannot distinguish

• Red – green

• Blue - yellow

==> picture [68 x 62] intentionally omitted <==

==> picture [381 x 137] intentionally omitted <==

• Accessible colors: https://color.adobe.com/create/color-accessibility

• Check images to see how people with various color vision deficiencies would see them: https://www.color-blindness.com/coblis-color-blindnesssimulator/

• Find predefined suitable themes for infographics from: Jeff Johnson (2013)

• https://colorbrewer2.org

22[ND] APRIL 2026 MINNA PAKANEN

DESIGNING WITH COLOURS

The basic rules

• Remember that colors evoke feelings and moods (e.g., red = love, passion, strength, and aggression), note also cultural differences

• Try to match the color to the overall tone and feel of the brand or product

• One color only might work, some brands are recognizable by their distinct color (e.g., McDonalds, Ferrari)

• :

• Consider using color harmony

• Colors near to each other on the color wheel (e.g. for a “warm” palette: red, orange, and yellow hues or a cold palette…)

• Complementary colors (e.g., other sides of the color wheel)

• Don’t use colors that are so bright that they are hurting eyes (chock colors)

• Remember color blind users!

22[ND] APRIL 2026

MINNA PAKANEN

TEXT COLOR

Text on colored backgrounds

• Black text on light backgrounds

• White text on dark backgrounds

• Color backgrounds or typography change the rules regarding text opacity and different states of the text

• Avoid long color text on color backgrounds!

https://material.io/design/

==> picture [208 x 371] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGNING WITH COLORS

GUIs

• Start with neutrals

• Grey tones, white, black

==> picture [409 x 45] intentionally omitted <==

• Add 1-3 colors that fits with the brand

• Use colors wisely!

• Remember the white space!

==> picture [409 x 148] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGNING WITH COLORS

GUIs

• https://m2.material.io/design/color/ the-color-system.html#color-themecreation

==> picture [375 x 378] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

ADOBE COLOR

==> picture [487 x 368] intentionally omitted <==

https://color.adobe.com/

22[ND] APRIL 2026

MINNA PAKANEN

ADOBE COLOR

==> picture [518 x 362] intentionally omitted <==

https://color.adobe.com/trends/Interaction

22[ND] APRIL 2026

MINNA PAKANEN

FIGMA TUTORIAL MONDAY 27[TH] APRIL (12:00-15:00)

https://www.figma.com

• Maja will visit to teach you Figma prototyping with Julia

• Before Monday:

• Watch Julia’s Figma Intro (in Bs today afternoon)

• Make a Figma account and try it to get familiar with the basic functions!

==> picture [523 x 313] intentionally omitted <==

https://brightspace.au.dk/d2l/le/lessons/202542/topics/2569575

22[ND] APRIL 2026

MINNA PAKANEN

BACKGROUND LITERATURE

• › Löwgren & Stolterman (2007) Thoughtful Interaction Design

• › Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines

• › Johnson, J. (2007). GUI bloopers 2.0: Common user interface design don’ts and dos

• › Jenifer Tidwell (2010) Designing Interfaces: Patterns for Effective Interaction Design

• › https://www.usertesting.com/blog/gestalt-principles/

• › https://medium.com/hh-design/crash- course-ui-design-25d13ff60962

› https://webdesign.tutsplus.com/articles/a- beginners-guide-to-wireframing-- webdesign 7399

• › https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-

• connectedness-and-continuation-gestalt-principles-2

• › https://www.nngroup.com/articles/homepage-design-principles/

22[ND] APRIL 2026

MINNA PAKANEN

Thank you for today! Questions?

22[ND] APRIL 2026

MINNA PAKANEN