Topic: Images in design

This material covers weeks 8-9 of the course.

Note that this material is subject to ongoing refinements and updates!

Overview

This theme covers working with visuals in design.

Photography

A guide to cropping in photography:

Though the examples in these videos use Photoshop, cropping can be done in free software on your smartphone or on apps such as Photos on Mac.

Illustrations

Illustrations are particularly useful as a communication tool: “Because illustrations appear to mimic aspects of visual perception itself, they seem to be appropriate for a wider range of tasks than both very concrete or very abstracted imagery” (Medley, 2013, p. 5). They are frequently used in design (and other creative fields) for techniques such as brainstorming and storyboarding.
The great thing about sketching as a communication tool — and why it should be encouraged in creative fields — is that even the most basic sketches can be done by almost anyone. Even the simplest sketch can communicate more easily than words.
Like photos, illustrations can be expressive in a number of ways through several techniques. This is largely dictated by the skills and preferences of the illustrator.
Instructional materials rely on detailed technical drawings to communicate. Could you imagine how much more difficult IKEA instructions would be if it was using photos instead of illustrations?

Illustration with design software requires working with vector paths:

Important ways of using illustrations

Illustration gives form to the imaginary: “For hundreds of years, illustrators have been giving visual form to people, places and things found only in the imagination. Fiction (for both adults and children) is full of wonderful illustrations that bring everything from fairies to flying monkeys to life” (Hagen & Golombisky, 2017, p. 156).
Illustration for sensitive subject matter. Aside from the crime-related examples given in the textbook, caricatures of famous people (politicians especially) can be used to imply certain characteristics without stating them too overtly.
Illustration to show change over time. This technique can be used to show a particular chain of events, or provide specific instructions.
Illustration evokes history. By adopting the style of a particularly time or place, illustrations can create a particular feeling.

Consider these points if using illustrations in design:

“Illustrations, like photographs, are usually chosen or commissioned with output in mind.
The mood projected in an illustration is largely controlled and dictated by illustration technique as well as the medium.
Illustration allows flexibility of interpretation.
Illustrations also can help an audience visualise something that cannot be seen or help an audience better understand a complex concept” (Evans & Thomas, 2013, p. 100).

Symbols and logos

Symbols are at the more abstract end of images. Reducing a symbol to its simplest representation is referred to as graphic reduction. Symbols are often a component of logos, but also icons in websites and apps, as well as in way-finding situations.

Important terms

Within symbols we find ideograms or ideographs: symbols which represent ideas. The icons that we find in apps and on websites are examples of ideograms.
Pictograms or pictographs are a type of ideogram that rely solely on a pictorial representation of an idea. Such symbols need to be recognisable quickly and easily.
Logotype refers to “letters, words, or a name formed in a distinctive way and used symbolically to represent a product, brand, company, or group...
Mark refers to a symbol used to represent a product, brand, company, or group” (Evans & Thomas, 2013, p. 104).
A logo is a logotype, mark, or both combined. Logos can appear across a variety of media: business cards, brochures, websites and apps, clothes, billboards...

More about logos

A logo is a visual emblem that represents an organisation. They can include ideographs or pictographs, text, abstract forms, or some combination of all of these.
As printed materials became more common in the 19th century (such as the Coke logo, designed by Frank Mason Robinson in 1885), some of the first recognisable logos started to appear.
In the early 20th century, logos became more common in both Europe and the United States. One logo that remains unchanged from that time is the Olympics logo, designed by Pierre de Coubertin in 1914.

Some of these examples are from Lant, K. (2017). The history of logos. https://en.99designs.jp/blog/design-history-movements/the-history-of-logos/.

Paul Rand (1914-1996) - perhaps the most noteworthy logo designer, claimed:

“The principal role of a logo is to identify, and simplicity is its means... Its effectiveness depends on distinctiveness, visibility, adaptability, memorability, universality, and timelessness”.

Japanese graphic design

Much Japanese design draws on elements of traditional Japanese arts and culture. This trend has continued despite adopting aspects of modernist design from Europe and the Anglosphere.

Japanese logos often incorporate Japanese characters, although many logos also feature romanised text. Often, kanji is combined to create a logo, a technique known as a monogram. Japan has its own history of symbology in the form of hand-drawn seals, known as mon (紋). Several examples are shown here: http://www.kyogen-kamon.com/design-ah.

Imagery sources with open copyright licensing

Copyright matters. You can't just copy imagery from the web and use it freely - you need to consider who owns the rights to the image. For more on copyright, refer to the Golombisky and Hagen book (p. 155). However, there are many sources for images that have permissive licences. Aside from the photos available on Lunacy, there are several stock libraries online. For example:

https://commons.wikimedia.org - note also that the imagery on Wikipedia, including maps, often comes with a creative-commons license
https://unsplash.com/images/stock
https://www.pexels.com
https://www.pngwing.com - several PNG images with open copyright

In your final assignment, you should include credits of where your photos are from.

Practicing paths with the pen tool

Try tracing the shapes on this webpage using the pen tool in Lunacy:
https://laurenfernandezblog.wordpress.com/2016/06/09/pen-tool-practice/

Creating pie charts

Pie charts in Lunacy (or Sketch) are annoying to create (see this video, which isn't in English, if you really want to know how). I recommend that you can create one in other software such as Powerpoint, Keynote, or Excel, and copy it into your Lunacy design.