TUTORIAL 5 VISUAL 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 20 min 5 min 6:16 PM

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: :16 PM “The whole is other than the sum of the parts” – Kurt Koffka

Additional web resources  Design Principles: Visual Perception And The Principles Of Gestalt Design Principles: Visual Perception And The Principles Of Gestalt  40 Beautiful Examples of Minimalism in Web Design 40 Beautiful Examples of Minimalism in Web Design  Five More Principles Of Effective Web Design Five More Principles Of Effective Web Design  9 Essential Principles for Good Web Design 9 Essential Principles for Good Web Design 6:16 PM

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 13Lecture 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 6:16 PM 2. Design challenge objectives and rules|time:

Sneak peek 2. Design challenge objectives and rules|time: :16 PM

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. 6:16 PM 2. Design challenge objectives and rules|time: “Under constraints, creativity thrives”

3. Setup for the challenge 1.Go to: Login (accept Beryl’s 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 Tutorial week 5’ 4.Click on this project 6:16 PM 3. Setup |time:

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 2 nd person to sign the attendance sheet, then choose ‘02 Rename to your upi’ 6:16 PM 3. Setup |time:

3. Setup for the challenge 6:16 PM 3. Setup |time: 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 6:16 PM 3. Setup |time:  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: 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. 6:16 PM

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’ 6:16 PM 4. Save completed work |time:

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 6:16 PM 5. Peer review |time:

Class discussion  Going through the reviews.  Vote on the best design  Consensus on  What works  What doesn’t  Original webpage comparison Original webpage 6:16 PM 6. Discussion|time:

Conclusion  What have you learned?  Think about what we have discussed today when designing for assignment 2. 6:16 PM 6. Conclusion|time: