Human-Computer Interaction (HCI)

Mario Čagalj

University of Split
Basic Visual Design Principles

Based on:
„Non-Designers Design Book” by Robin Williams
Visual design

Visual design means organizing the appearance of

something

Applies to anything visual:

• web page design
• displaying information (charts, graphs, reports)
• maps, brochures, birthday cards
• code formatting
• smartphone application
• etc.

3
Visual appearance matters

from cryptography.hazmat.backends import default_backend

from cryptography.hazmat.primitives import padding
from cryptography.hazmat.primitives.ciphers import (
Cipher,
algorithms,
modes
)

CIPHER = algorithms.AES
CIPHER_BLOCK_LENGTH = algorithms.AES.block_size
CIPHER_BLOCK_LENGTH_BYTES = CIPHER_BLOCK_LENGTH // 8

def encrypt_CBC(key, plaintext):

padder = padding.PKCS7(CIPHER_BLOCK_LENGTH).padder()
if not isinstance(plaintext, bytes):
plaintext = plaintext.encode()
padded_plaintext = padder.update(plaintext)
padded_plaintext += padder.finalize()
iv = os.urandom(CIPHER_BLOCK_LENGTH_BYTES)
ciphertext = iv
ciphertext += _encrypt(padded_plaintext, key=key, mode=modes.CBC(iv))

return ciphertext

4
Visual appearance matters

import React, { Component } from 'react'

import classnames from 'classnames'
import SubmitButton from 'components/SubmitButton.jsx'
import 'styles/LoginForm.css'

class LoginForm extends Component {

constructor(props) {
super(props)
this.state = {pass: '', passRepeated: ''}
this.handlePassChange = this.handlePassChange.bind(this)
}

componentDidMount() {
console.log('LoginForm did mount.')
}

componentWillUpdate = (nextProps, nextState) => {

console.log('LoginForm will update:', nextState)
}

componentDidUpdate = (prevProps, prevState) => {

console.log('LoginForm did update:', prevState)
}

5
Visual design principles
Excellent visual design requires some artistic ability, but a
reasonably good design can be achieved by following some basic
principles

For visual design, we have the following 4 principles:

• Contrast
• Repetition
• Alignment
• Proximilty

You can remember these by the acronym:

CRAP
6
CRAP principles
Contrast
• make different things different
• brings out dominant elements
• mutes lesser elements

Repetition
• repeat design throughout the interface
• consistency
• creates unity

Alignment
• visually connects elements
• creates a visual flow

Proximity
• groups related elements
• separates unrelated ones

7
Alignment

„Non-Designers Design Book” by Robin Williams

„Design Basics” by Steven Bradley
Introduction

Design principle alignment states:

• nothing should be placed on the page arbitrarily
• every item should have a visual connection with something
else on the page

Straight lines give a more organized appearance

Aligned items result is a stronger cohesive unit

• even when aligned elements are physically separated from
each other, there is an invisible line that connects them, both
in your eye and in your mind

9
Example: bad alignment

Steven Bradley @vanseodesign.com 10

Example: improved alignment

Steven Bradley @vanseodesign.com 11

Example: improved alignment

Steven Bradley @vanseodesign.com 12

Example: improved alignment

Before:

After:

Steven Bradley @vanseodesign.com 13

Alignment
As a general rule, left and right alignment work best –
particularly for paragraphs of text
Center alignment is terrible for paragraphs, but can work
for things other than text

14
Example: bussiness card

The invisible line connects

the separate pieces of text

15
Find a strong alignment and stick to it

Before: After:

16
Find a strong alignment and stick to it

Before: After:

17
Example: improved alignment

Before: After:

Steven Bradley @vanseodesign.com 18

Summary of alignment

Nothing should be placed on the page arbitrarily

• Every element should have some visual connection with another element
on the page

Unity
• To make all the elements on the page appear to be unified, connected, and
interrelated, there needs to be some visual tie between them
• Even if the separate elements are not physically close, they can appear
connected, related with the other information

How to get it
• Always find something elese on the page to aligne with, even if the
objects are far away from each other

19
Repetition

„Non-Designers Design Book” by Robin Williams

„Design Basics” by Steven Bradley
Introduction

Design principle repetition states:

• visual elements that have the same purpose or level of
importance should look the same

Repeat some aspect of the design throughout the piece

• With too many different-looking things on a web page, it will
not look like everything belongs on the same page - it will
not look cohesive
• The repetitive element may be font, a thick line, color, design
element,... anything that a reader will visually recognize

21
Example: previously we improved alignment

Steven Bradley @vanseodesign.com 22

Example: we next alter logo and header

We made a few changes:

• A new font in logo
• Centrally aligned header components
• Next, we will take the color and font from the logo and
reapeat it throughout the page

Steven Bradley @vanseodesign.com 23

Example: improved repetition

Steven Bradley @vanseodesign.com 24

Example: bussiness card

When you get to the end of the information, does your eye wander
off the card?

How about now?

Do you find it bounces back and forth between the bold elements?
That is the point of repetition – it ties a card together, repetition provides
unity

25
Example: improved repetition

Before: After:

Steven Bradley @vanseodesign.com 26

Summary of repetition

Repetition of visual elements throughout the design unifies and

strengthens a piece/design
• Repetition ties together otherwise separate parts

The purpose of repetition is to unify and to add visual interest

How to get it
• Think of repetition as being consistent (recall consistency design
principle)

27
Contrast

„Non-Designers Design Book” by Robin Williams

„Design Basics” by Steven Bradley
Introduction

Design principle contrast states:

• Visual elements with a different purpose or level of
importance should appear different
• More important elements should be more prominent (larger,
with stronger color) than less important elements

Contrast is one of the most effective ways

to create visual interest to your design

29
Example: previously we improved repetition

Steven Bradley @vanseodesign.com 30

Example: improving contrast

Steven Bradley @vanseodesign.com 31

Example: improving contrast

Steven Bradley @vanseodesign.com 32

Example: improving contrast

Steven Bradley @vanseodesign.com 33

Example: improving contrast

Steven Bradley @vanseodesign.com 34

Example: improved contrast

Before: After:

Steven Bradley @vanseodesign.com 35

More examples

Before: After:

36
Summary of contrast

Contrast on a page draws our eyes to it; our eyes like contrast

Visual elements with a different purpose or level of importance

should appear different
• two elements on the page that are not the same cannot be similar
• for contrast to be effective, the two elements must be very different

Contrast has two purposes

• create an interest
• to aid in the organization of the information; a reader should be able to
instantly understand the way the information is orgaized

37
Proximity

„Non-Designers Design Book” by Robin Williams

„Design Basics” by Steven Bradley
Proximity

Design principle proximity states:

• things that are related should be grouped close together
• things that are not related should be separated

When several items are in close proximity to each other, they

become one visual unit rather than several separate units

This helps organize information, reduces clutter, and gives

the content consumer a clear structure

39
Example: previously we improved contrast

Steven Bradley @vanseodesign.com 40

Example: improved proximity

Before: After:

Steven Bradley @vanseodesign.com 41

Example: improved proximity

Steven Bradley @vanseodesign.com 42

Example: improved proximity

Steven Bradley @vanseodesign.com 43

Example: improved proximity

Steven Bradley @vanseodesign.com 44

Example: improved proximity

Steven Bradley @vanseodesign.com 45

Example: improved proximity

Before: After:

Steven Bradley @vanseodesign.com 46

Example: the whole of the CRAP

Before: After:

Steven Bradley @vanseodesign.com 47

Bussiness card: too many separate items

How many times does your eye stop to look at something?

• Where do you begin reading?
• What do you read next—left to right?
• What happens when you get to the bottom-right corner,
where does your eye go?
• Do you wander around making sure you didn’t miss any corners?
48
Bussiness card: too many separate items

Now that there are two bold phrases, where do you begin?
• Do you start in the upper left? Do you start in the center?
• After you read those two items, where do you go? Perhaps your bounce
back and forth between the words in bold
• Do you know when you’re finished?

49
Bussiness card: too many separate items

By grouping similar elements into one unit, several things instantly

happen:
• The page becomes more organized
• You understand where to begin reading, and when you are finished
• And the white space (the space around letters) becomes more organized

50
More examples

Before: After:

51
Summary of proximity

When several items are in close proximity to each other, they

become one visual unit rather than several separate units

Items relating to each other should be grouped together

The basic purpose of proximity is to organize content

• More likely to be read

How to get it
• Count the number of visual elements (units) on the page by counting the
number of times you eye stops
• If more than some reasonable number, see which elements can be
grouped toghether into closer proximity to become one visual unit

52