TUTORIAL 5VISUAL AESTHETICS 1

Design Principles and visual grouping

Quick recap from lecture

UI Design Challenge:

Design challenge objectives and rules

Setup

Complete design Challenge

Save completed challenge

Peer assessment of completed design

Discussion

Conclusion and end of session

Today’s agenda

5 min

5 min

5 min

20 min

5 min

5 min

5 min

5 min

11:00 AM

Recap

Design Principles: Balance – Symmetry and asymmetry

Emphasis – Contrast, Placement and Isolation

Unity – wholeness + variety

Grouping based on Gestalt Principles of Perception: Proximity - Objects that are close to each

Similarity - Objects that have similar visual characteristics, such as size, shape or color

Common Fate - Objects that ‘move’ together

Closure - See things as complete objects

Symmetry – See symmetrical areas as complete figures that form around their middle

Good Continuity – See things as smooth, continuous representations vs abrupt changes

Area/Smallness - Objects with small area tend to be seen as the figure, not the ground

Surroundedness – See surrounded area as the figure, the area that surrounds as the ground

Prägnanz - Perceive things based on the simplest and most stable or complete interpretation

1. Recap|time: 00 - 0511:00 AM

“The whole is other than the sum of the parts” – Kurt Koffka

Additional web resources

Design Principles: Visual Perception And The Principles Of Gestalt

40 Beautiful Examples of Minimalism in Web Design

Five More Principles Of Effective Web Design

9 Essential Principles for Good Web Design

11:00 AM

What we will be doing today

A lo-fi UI design challenge: The exercise: Design a low-fidelity webpage prototype

using the content provided. The objectives:

Apply the design principles and Gestalt principles of perception covered in Lecture 12 & Lecture 13

Focus on the use visual cues to support the logical structure of a web interface and maintain the aesthetic aspect of the design.

The challenge: You will need to: complete the design individually within 20 minutes follow the given rules

11:00 AM 2. Design challenge objectives and rules|time: 05 - 10

Sneak peek

2. Design challenge objectives and rules|time: 05 - 1011:00 AM

Rules for this design challenge

You CAN: Change the text/font styles: size, bold/underline/italics, alignment Add boxes/geometric shapes (Containers > Geometric shapes). Use only ONE other colour besides black and white/greyscale. This

rule also apply to fonts. Put the content anywhere you want within the canvas.

E.g. ‘sidebar menu’ does not need to be at the ‘side’. View existing websites for inspiration – as long as you do it within the

20 minutes duration.

You CANNOT: Change the text content. This includes separating one content into

two. Change the canvas (the picture of a browser) size. Leave any of the contents out. All contents given must be in the

browser window by the end of the challenge.

11:00 AM 2. Design challenge objectives and rules|time: 05 - 10

“Under constraints, creativity thrives”

3. Setup for the challenge

1. Go to: https://uoa.mybalsamiq.com/

2. Login (accept Beryl’s email invite to Balsamiq if you haven’t already)

3. I will add you to the tutorial session’s project. Once you are added, you should see a project with your tutorial group number e.g. ‘Group 2 – Tuesday 11-12 Tutorial week 5’

4. Click on this project

11:00 AM 3. Setup |time: 10 - 15

3. Setup for the challenge

4. You will see a set of mockups pre-populated with the template for today’s challenge.

5. Click a mockup with based on your number when you sign up in today’s attendance sheet.

Example: if you are the 2nd person to sign the attendance sheet, then choose ‘02 Rename to your upi’

11:00 AM 3. Setup |time: 10 - 15

3. Setup for the challenge

11:00 AM 3. Setup |time: 10 - 15

6. Rename the mockup Click on the small arrow at the bottom right of your

selection The arrow will appear when you hover over it

Select ‘Rename’ Rename the mockup to your upi

7. Once you have renamed your mockup, select ‘Edit’

8. Double-click on the ‘url address bar’ on the canvas (the browser window image) and type in your upi.

Before we start: Shortcut keys

11:00 AM 3. Setup |time: 10 - 15

Ctrl + to Zoom in

Ctrl – to Zoom out

Press and hold space bar to pan

Ctrl 0 (Zero) to view all

To adjust layering of objects (bring to front and back)

Ctrl Shift Up to Bring to front

Ctrl Up to bring forward

Ctrl down to send backward

Note: DO NOT Send to back (Ctrl Shift down) as it will go behind the canvas which is locked.

Start the challenge!

4. Complete the challenge in 20 minutes |time: 15 - 35

20 minutes

End

Stop when the digital sand timer shows ‘End’

Rules reference:

You CAN: Change the text/font styles: size, bold / underline /

italics, alignment Add boxes/geometric shapes (Containers > Geometric

shapes). Use only ONE other colour besides black and

white/greyscale. This rule also apply to fonts. Put the content anywhere you want within the canvas.

E.g. ‘sidebar menu’ does not need to be at the ‘side’.

View existing websites for inspiration – as long as you do it within the 20 minutes duration.

You CANNOT: Change the text content. This includes separating one

content into two. Leave any of the contents out. All contents given must

be in the browser window by the end of the challenge.

11:01 AM

Once you’re done:

Click save (top right)

Make sure you check your upi only

Provide some rationale for your design under the ‘Add a note to describe your changes’, e.g.: What were you trying to

achieve? What do you like most about

your design? If you have extra time, what

changes would you make?

Click ‘Save’

11:01 AM 4. Save completed work |time: 35 - 40

Peer review

Each person will be randomly assigned another person’s completed design challenge.

Look at the completed work that is assigned to you.

Add your comment on : What works? What doesn’t? Suggestions for improvement

11:01 AM 5. Peer review |time: 40 - 45

Class discussion

Going through the reviews.

Vote on the best design

Consensus on What works What doesn’t

Original webpage comparison

11:01 AM 6. Discussion|time: 45 - 50

Conclusion

What have you learned?

Think about what we have discussed today when designing for assignment 2.

11:01 AM 6. Conclusion|time: 50 - 55