Lecture 6: Visual focus and looping

1. COMP1610/DGC1330 Lecture 6: Visual focus and looping

2. Looping Visual Focus • Introduction • Contrast • Isolation • Absence of Visual Focus • Looping

3. Introduction: Create Focal point What is Focal point? A Focal Point focuses specifically on a point of interest which makes an object/element unique. How to create Focal point? In visual communication, there are some principles about creating a focal point for a layout. They are: Contrast, Isolation, Placement and absence of Focal Point A Create Visual Focus Looping

4. Contrast What is contrast? Contrast is the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and backgrounds. B Create Visual Focus Looping

5. Contrast How to create contrast? There are different ways to create contrast. Here are some common ways: Scale Color Shape Direction B Create Visual Focus Looping

6. Contrast: Scale What is contrast of scale? Contrast of scale means using relative sizes of different objects to draw attention. B Create Visual Focus Looping

7. Contrast: Scale B • Scale can imply meaning as in this image. • The larger circle dominates the smaller circle. • It imposes its will, exerting its influence on the smaller circle. • The smaller circle seems to be afraid or timid. Create Visual Focus Looping

8. Contrast: Scale B • Title on the left has the same word size. • The title on the right has applied the scale contrast. • The size of the “WORLD” is greater than others, which makes it become a focal point. Create Visual Focus Looping

9. Contrast: Scale B • Putting a big fish in a small container makes it even bigger. • Putting a little fish in a large container makes it look smaller. Create Visual Focus Looping

10. Contrast: Color What is contrast of color? Use the combination of colors to show unlikeness or differences. B Create Visual Focus Looping

11. Contrast: Color B • The dominant color is green. • The appearance of a yellow object brings unlikeness and becomes a focal point. Create Visual Focus Looping

12. Contrast: Color B • The dominant tone is a light tone: pale grey and white. • An object in deep color (deep grey) will draw attention. Create Visual Focus Looping

13. Contrast: Color B • Colorful object can easily stand out with a black and white background. • Contrast is made by the combination of the mono tone and color. Create Visual Focus Looping

14. Contrast: Color B • The dominant color of this layout is grayscale d • The block in red color is the focal point of this layout. Create Visual Focus Looping

15. Contrast: Color B • Light in the dark helps bring out the contrast • A burning candle shines in the dark Create Visual Focus Looping

16. Contrast: Shape What is contrast of shape? Use different types of shapes to emphasis the uniqueness. B Create Visual Focus Looping

17. Contrast: Shape B • Human legs are in organic form, the form of the fence is in regular and edgy form. • The curvature of the organic form stands out from the edgy form. http://ezakarau.wordpress.com/ Create Visual Focus Looping

18. Contrast: Shape B • The round shaped sculpture and the edgy window frames • The curvature of the organic form stands out from the edgy form. http://www.erco.com/projects/simula/square_and_4894/en/en_square_and_sim_1.php Create Visual Focus Looping

19. Contrast: Shape What is contrast of direction? Use opposite direction to break the rule of reading B Create Visual Focus Looping

20. Contrast: Direction B • Put an object you want to highlight in front of an arrow that shows different direction. http://www.erco.com/projects/simula/square_and_4894/en/en_square_and_sim_1.php Create Visual Focus Looping

21. Contrast: Direction B • All the fish face the same direction except the one in orange. • The orange fish caught the audience attention. Create Visual Focus Looping

22. Isolation What is isolation? Isolation means most of the elements on a layout are grouped closely, alongside an object by itself stands out as a focal point. C Create Visual Focus Looping

23. Contrast: Isolation C • The bird being isolated is the focal point. • The isolated bird forms a contrast to the crowded group. • This arouses the audiences’ interest by making them to think why the bird is alone. http://wrissentace.blogspot.com/2011/06/quotes-on-loneliness-in-life.html Create Visual Focus Looping

24. Contrast: Isolation C • This is a layout of a web site. • The single photo at the right corner stands out from the group of photos on top. • The photo is about the feature of this website, it draws attention by using the method of ‘isolation’. http://wrissentace.blogspot.com/2011/06/quotes-on-loneliness-in-life.html Create Visual Focus Looping

25. Contrast: Isolation C • The two options above formed a group of similar options. • “Cancel” is another option. • Users can quickly sort out an option other than the above by this isolation. Create Visual Focus Looping

26. Absence of Visual Focus Sometimes there is still a focal point even if no focal points are found. Focal point is not a necessity in a work of art. Sometimes there are works without focal point. An art work may not have a central character or shape bringing you to a point.  D Create Visual Focus Looping

27. Absence of Visual Focus D • This example illustrates how the absence of a focal point creates visual interest. • No specific element(s) stands out in this example. • Even with no focal point, the picture is still able to attract people’s attention. Create Visual Focus Looping

28. Absence of Visual Focus D • This example illustrates how the absence of a focal point creates visual interest. • The search results of albums or images make use of this principle. • The visual interest is shared to every element. • It creates visual interest. Create Visual Focus Looping

29. Absence of Visual Focus D • This example illustrates how the absence of a focal point creates visual interest. • Everyone in this photo has equal visualinterest. • It attracts the audience to read along the layout and seek for an interest point. Create Visual Focus Looping

30. Looping Visual Focus • Contrast • Isolation • Placement • Absence of Visual Focus • Looping Create Visual Focus Looping

31. Looping E An example on Looping: Peter loves doing exercise, and completes 10 rounds each time. He uses a method to record it. Create Visual Focus Looping

32. Looping E Demonstration of Looping: His method: Use a memo to record the number of rounds he finished. Starting from 0. He adds 1 after finishing a round Create Visual Focus Looping

33. Looping E Demonstration of Looping: In the beginning, it is 0. 0 START! Create Visual Focus Looping

34. Looping E Demonstration of Looping: After he finished the first round, he adds 1 to it. 1 Continue... Create Visual Focus Looping

35. Looping E Demonstration of Looping: After he finished the second round, he adds1 to it. 2 Continue... Create Visual Focus Looping

36. Looping E Demonstration of Looping: He continues… 3 4 5 Create Visual Focus Looping

37. Looping E Demonstration of Looping: He continues until it is 10. 10 Stop!!!! Create Visual Focus Looping

38. Looping E What is FOR loop? The statements in the for loop repeat continuously for a specific number of times. 10 Create Visual Focus Looping

39. Looping E What is FOR loop? Statement (action) Run a round Initialization (beginning status) Start from 0 0 10 +1 Terminating Condition (how to stop?) If it is 10, stop! Update (how to count?) Each round, add 1. Create Visual Focus Looping

40. Looping E Syntax of FOR loop: for( ; ; ) { } 0 10 +1 Create Visual Focus Looping

41. Looping E Syntax of FOR loop: for(inti=0 ; i<10 ; i=i+1 ) { print (i) ; } Output: Create Visual Focus Looping

42. Looping E Syntax of FOR loop: for(Initialization ; Condition ; Update ) { Statement(s) ; } Statement: The code between the braces, { and } , is called a block. This is the code that will be repeated on each iteration of the for loop. Create Visual Focus Looping

43. Looping E Syntax of FOR loop: for ( int i=0 ; i<10 ; i=i+1 ) { print(i) ; } Initialization : The variable name i is frequently used, but there’s really nothing special about it. We declare the variable i to be 0. Create Visual Focus Looping

44. Looping E Syntax of FOR loop: for ( int i=0 ; i<10 ; i=i+1 ) { print(i) ; } Condition : Test whether i is less than 10 or not. Create Visual Focus Looping

45. Looping E Syntax of FOR loop: for ( int i=0 ; i<10 ; i=i+1 ) { print(i) ; } Update : i will be increased 1 at each iteration. Create Visual Focus Looping

46. Looping E Notes on “Condition”: Always compares two values with a relational operator. • The most common relational operators are: • > Greater than • < Less than • >= Greater than or equal to • <= Less than or equal to • == Equal to • != Not equal to Create Visual Focus Looping

47. Looping E Notes on “Condition”: : The relational expression always evaluates to true or false. For example, the expression “5 > 3” is true. the expression “5 < 3” is false. When the evaluation is true, the code inside the block is run, and when itis false, the code inside the block is not run and the “for loop” ends. Create Visual Focus Looping

48. Looping E Note on “Update”: i= i+1; Meaning: “ increment i by 1 ” or “ add 1 to the current value of i ” for each iteration. Create Visual Focus Looping

49. Looping E Note on “Update”: 0 beginning i = 0 i = i + 1 ; Iteration 1 i = 0 + 1; now i = 1 Next iteration Create Visual Focus Looping

50. Looping E Note on “Update”: 1 beginning i = 1 i = i + 1 ; Iteration 2 i = 1 + 1; now i = 2 Next iteration Create Visual Focus Looping