Lesson 11: Visual Rhetorics and Argument
Texts to have read
- Improve Your Designs With The Principles Of Similarity And Proximity (Part 1), by Jon Hensley
- Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2), by Jon Hensley
- Design Principles: Compositional, Symmetrical And Asymmetrical Balance, by Steven Bradley
- Design Principles: Dominance, Focal Points And Hierarchy, by Steven Bradley
Work to have achieved
- Write a visual argument proposal
Plan for the day:
- Ways of seeing: a design vocabulary (~30 min)
- Q&A re: design (~10 min)
- HW preview + guiding thoughts for Studio (~5-15 min)
- Studio time!
- Exit note (5 min)
1. Ways of seeing: a design vocabulary (30 min)
Consider this both a test of reading comprehension and a chance to practice some essential GIMP (or Photoshop) skills, namely (a) navigating layers, (b) manipulating layers, (c) exporting a flat file, and (d) making good use of the undo history.
Because there are a lot of principles, and because hands-on practice is good, we'll work in pairs today.
Once you've done one cycle, revert the image so you can choose a different principle and do it again – this time with the other person "driving."
For each of the visual design principles below, I’d like you to use the student examples we’ve been working with to:
- Claim one principle by writing your name next to it in our shared notes doc.
- Identify one example of this principle at work
- Adjust the image so as to draw attention to the principle
- e.g. turn off the visibility to all other layers — OR, if that fails to draw the contrast you want (e.g. you need to show something relative to the rest of the image),
- instead set all other layers to 50% opacity
- Export as .png and .jpg and check out the differences in file size and quality
- Add the smaller of the two files to the notes doc, below your name.
- Write a brief note next to your image explaining what you hope the picture shows.
- e.g. “Similarity: The similar size and icon/outline style of the six items being sold emphasizes that they form a single group.”
- EXT: If you finish one, do another one. Once you’ve finished two, start looking at other people’s examples. Use comments to add any questions you have.
Principles of Visual Design
- Similarity: things that are alike and/or aligned are perceived as a group)
- Proximity: things that are close are perceived as a group; things that are separated are perceived as distinct
- Hierarchy of proximity > color > size > shape
- Contrast: one different thing draws the eye
- Figure-ground stability
- color: warm colors approach the viewer, cool colors recede
- size: large elements that fill their containers become figure
- size: small elements in a large container become figure
- position: lower elements become figure (read as close), higher elements become ground (read as far)
- Figure-ground ambiguity
- equally sized elements / containers
- high contrast of saturated colors
- negative space forming a recognizable shape
- Balance:
- symmetrical: equal weights on left and right
- asymmetrical: unequal weights implying equal/opposite gravitational forces
- radial: symmetry in all directions
- mosaic: asymmetrical balance of many small parts
- Dominance and subordination: contrast between (three) intended layers of attention
2. Q&A re: design (~10 min)
What was hard to demonstrate? What was hard to understand? Or, conversely, what worked especially well?
Let’s briefly look at some examples together.
3. Looking ahead
In a moment, I’m going to let you dive into your own projects; I’ll float, and when I’m not needed I’ll do my best to answer questions in the order of greatest interest. In some cases, I, too, would like to find a good tutorial: learning can be lifelong, especially with complex tasks and complex software!
For those diving in, I will ask that you begin by writing some goals and intentions in the google doc, and that you end by replying to those notes with how it actually went.
To help you think about possible goals, I want to preview the homework and share some advice that should apply broadly.
2. Guiding thoughts for Studio (5-15 min)
As in the past, I’m going to put these words of advice here for you to peruse at your own speed. Please do look at them before you get too far along.
Think about your canvas size
When you create a new project, you'll be given the option to select a width and height in pixels. But look just above that and you'll see a pull-down menu for Templates.
Depending on what you're making, you might want to select "HD" for a landscape digital poster, "US Letter" for an easy-to-print portrait poster, "CD" for a music thumbnail, and so on.
Tips on navigating GIMP
Finding your tools
- GIMP's toolbox is kinda crowded, but the tools are also helpfully indexed by category in the menu bar, under Tools.
- Every tool also has a keyboard shortcut, and it will save you time to memorize those for your go-to instruments. You can find the shortcuts under the menu.
- If your tools are hiding / nesting behind one another, but you'd prefer to see all the tools in the sidebar, you can change that setting in Preferences, under Interface > Toolbox: uncheck the Use Tool Groups checkbox.
- You'll find color preferences for your tool icons under Toolbox, too.
Customizing tool defaults
- Remember that there are often extra tips for the tool you're using under the editing window, in a tiny font; try holding shift, alt, control, command, etc while you click or drag to see what it says/does.
- Most of the time, these are temporary adjustments to the tool's behavior, but you can also change their long-term defaults in the Tool Settings pane.
- I particularly recommend changing the default behavior of the Move tool. When you first install GIMP, it's set to move whatever you click on – an exception to the usual rule that tools only apply to the active layer. For more consistent behavior, click on the "Move the active layer" toggle.
Working with layers
- You can rename your layers! In fact, I highly recommend it: filenames from sites like unsplash or flickr aren't known for emphasizing their content. Just double-click the layer name to highlight it and start typing. Hit Enter when you're done.
- A tool or effect not behaving as it should? First check that you're in the right layer.
- If you are, check that the layer is big enough; you might need to use Layer > Layer to Image Size. (Or give yourself more room overall with Image > Canvas Size.)
- If even that's not working, check the tool settings area (usually below the tools, but they're movable).
- Not only can layers be grouped so they move (and scale, and hide) together, but groups can also go inside other groups. Click the folder icon in the layers toolbox to create a new group, then drag or drop layers into it.
Don't forget to document permissions as you go
It's so much easier to grab that info while you already have the page open in your browser than to try to find it again later!
As I hope you saw on the site resources page, there are lots of tools to help you find images you're explicitly allowed to use, whether with Creative Commons or other permissive licenses. Don't forget about https://search.creativecommons.org and the Usage Rights options under Google's Image search (click the Tools link just above your search results).
You can also use copyrighted images if you can make a case for it being a Fair Use. That is, in either your README or your reflection (or both), you can argue that the balance of the four factors is in your favor:
- purpose and character of the use
- nature of the copyrighted work
- amount or substantiality of the portion used>
- market impact
Note that this is especially important to think about if you're explicitly naming a brand or person in your proposals or planning to use their trademarked properties or images!
Remember our strategies for building unity and drawing attention
To unify your project, i.e. to help give viewers a gestalt impression that your design is a single thing, consider using...
- repetition of shape, color, texture, etc;
- symmetry and alignment; and
- a limited number of common regions (to distinguish figure from ground)
To draw attention, draw contrast: break from the repeated elements above in terms of size, color, texture, value, alignment (including rotation), or implied movement (including gaze, if you have eyes).
Assume that you can reliably convey only about three levels of hierarchy; after that, it starts to get mushy. At some point as you work on your proposed visual argument / rhetorical collage, therefore, you might want to reflect in writing:
- What options do you have for your top three objects of attention? What's next in line?
- How would the layout need to change if you changed your ranking? That is, if you put one of your current tier-twos into the top slot, what rearrangements would that entail?
3. Studio Time!
Some preview of the project will be due before next class, just to make sure you’re all getting started on it.
Therefore, the rest of today’s class is all about working on your individual projects! Find source images or text, level up on layering, watch relevant tutorials on effects or on layout, and see what happens when you apply them to your own digital canvas.
As usual, please set a daily goal in the shared notes doc, for the usual reasons: to build accountability, to seed your later reflections, and to help me find teachable moments / chances to be helpful to you.
Don't forget to save as you go:
- the layered project file
- screenshots of your workspace
- meaningful commit messages, when you're satisfied with something you've made
4. Quick report back (with 5 min left)
Just as a way for me to check in, I’d like to hear more about what happened today: did you find images? Level up on a particular GIMP/Photoshop skill? Which ones? Decide something about your project (what was it)? Raise a question in a new way that you’d like some help with?
Homework for next time
-
optional now, required by next week: Read Midori Nediger’s blog post for Venngage (an infographics company), “How to Choose Fonts For Your Designs (With Examples)”. Notice how her advice aligns with the design principles you just read about over the weekend!
- By next class (but ideally by 10pm the night before), compose a Visual Argument Preview: an early snapshot of your progress, just to get the gears turning and make sure you’ve tested out the interface (and the feasibility of your proposed idea). To submit, please push to your repository the following:
- A layered GIMP project file (.xcf) (or Photoshop .psd), showing the arrangement of your images and text so far. This need not be a complete argument or collage yet, but you should have at least two layers.
- An update to your README.md file, introducing visitors to the current state of the project. Feel free also to ask questions or lay out next steps for yourself!
- An updated list of assets, now with the files you're actually obtained, with their full TASL information.
- An exported "flat" .png or .jpg file. As with Audacity, GIMP's default save mode is a complex / modular "project file," of type .xcf; should the project fail to load, it would be great to have a simple image file as a backup. We won't be able to see how you achieved your layout, but we will be able to see the image.
- Sweet bonus: if you keep the same filename for every export, you'll also be able to use GitHub history to compare one .png to another, side by side, or even slide to reveal the change. Pretty cool, no? (That said, I won't be mad if you want to give each exported draft its own name. Just: please don't do that for the .xcf, okay?)
- A static screenshot of your GIMP file in progress (for later use in your reflection). If you can capture a moment of success or stuckness, all the better.
- Where possible, bear in mind the guiding thoughts from above