INFORM AND ENLIGHTEN

Today, I’d like to talk about design and marketing. To do so, I’m going to use tree cookie art as an example.

What’s a tree cookie, you ask? Let me “inform and enlighten” you.

Tree cookies are made from fallen branches gathered from orchards and woods in various parts of the northeast.

Art by Nature brochure

Art by Nature is a small business run by two artists. As a CSBA (Certified Sustainable Building Advisor) and a master woodcraftsman they produce “artfully disguised noise control creations” using reclaimed tree branches sliced into “tree cookies” (Art by Nature, 2019).

Here’s an example of their eco-friendly work.

Stingray (8″ x 8″)

I created a brochure to help market their unique art that could be printed or made available for download from their website (see my recent blog MOBILE FIRST for a mockup of the design).

Why a brochure?

Even in today’s digital world, brochures are often used as part of a business’s marketing strategy.

A marketing brochure is a printed piece of marketing collateral that often includes a trifold layout with page inserts or a booklet format. Brochures are one of several print options companies can use as part of business or product promotion. This tool is especially important and useful for small businesses.

Neil Kokemuller

When designed as a part of a marketing kit, brochures can effectively provide an overview of a company. The popular 8 1/2″ x 11″ trifold design is broken down into six sections: assigned in the order they appear as the brochure is unfolded.

Five Goals

From a design perspective, I determined the brochure needed to accomplish the following goals:

  1. present the new Art by Nature (ABN) branding elements.
  2. establish the artists’ experience and expertise.
  3. define the term tree cookie.
  4. encourage potential customers to make a purchase, either from available stock pieces or by commissioning custom artwork.
  5. show the range of sizes available for purchase.

Let’s take a look at how a well-designed brochure can help ABN accomplish their marketing goals.

The Front Flap

Section 1, also called the front flap, starts with a transparent photo of tree cookies, ABN’s signature art. This close up serves as a background to ABN’s branding elements:

  1. tree image (overlapped for visual interest)
  2. tag lines
  3. web address
  4. telephone number

Notice that goal #1, presentation of ABN’s branding, is immediately addressed.

The Outside Flap

Upon opening the pamphlet you see section 5, which shows a photo of our artists. They’re standing in front of a four foot square work commissioned by an acupuncturist in New Jersey. The photo provides the viewer with a visual size reference, showcasing large scale art options available for purchase.

Details about the artists are listed below the photo. Goal #2: experience and expertise, check.

Just below that is a photo of ABN’s largest stock piece, The Big Kahuna. To reinforce the branding, contact information is repeated at the bottom of the panel.

The Interior

Interior sections 2, 3 and 4 are revealed when the outside flap is opened.

Knowing some will not read the two columns of text on sections 2 and 3, the third goal of defining tree cookies is taken care of at the top of section 3.

For those who appreciate the details, the artists’ story is gracefully delivered around the tree portion of the logo. This provides visual interest and breaks up the “grid” format of the brochure.

The two paragraphs at the bottom of the section 3 are highlighted with pale yellow, which draws the reader’s attention to popular gift ideas and ABN’s custom work (goal #4).

Section 4 on the far right shows two more stock pieces available for purchase, accompanied by the web address and phone contact information. This completes goal #5 by showing works on the smaller end of the size range (8″ x 8″ and 12″ x 12″).

The Outside Back Panel

Outside Back Panel

Finally we arrive at section 6. The back of the brochure uses white space to push the reader’s eyes to the bottom of the panel, once again reinforcing the brand by showing the ABN logo in its entirety.

Using Design as an Effective Tool

ABN’s artists create intricate works of natural art, designed to engage viewers with a pleasant experience that promotes mindfulness and serenity.

… psychologists are exploring nature’s impact on people’s mental functioning, social relationships and even physical well-being. Others are putting that research into practice by working with interior designers, architects and city planners to create psychologically healthy buildings and cities.

Rebecca A. Clay

Like our artists, graphic designers also work to provide an engaging experience, but have the added responsibility of providing the data necessary to make an informed choice.

… graphic designers are not simply artists; they are engineers whose job it is to create tools that both inform and enlighten.”

Alberto Cairo, author of The Functional Art

until nxt time …

If you’re interested, you can learn more about ABN’s tree cookie art by downloading their print-friendly brochure here.

References

Art by Nature (2019). Art by Nature [Brochure]. New Jersey, USA.

Cairo, A. (2013). The Functional Art: An introduction to information graphics and visualization. Berkeley, CA: New Riders.

Clay, R.A. (2001, April). Green is good for you. American Psychological Association 32(4), 40. Retrieved from: https://www.apa.org/monitor/apr01/greengood

Foster, H. (2019, June 30). MOBILE FIRST. Retrieved from: https://untilnxttime.com/2019/06/30/mobile-first/

Kokemuller, N. (n.d.). Why brochures are important for marketing. Retrieved from: https://smallbusiness.chron.com/brochures-important-marketing-66450.html

Layout of a Trifold Brochure. PrintPlace.com. (n.d.). Retrieved from: https://www.printplace.com/articles/layout-of-a-trifold-brochure

MOBILE FIRST

Let us be clear: If you plan on running a successful eCommerce website, or any website, you absolutely must cater to mobile users and consider mobile shopping. Not doing so is simply ignoring a majority of your potential customers. This has implications on how you consider the design of your eCommerce website …

Justin Smith, CEO Outerbox Design

It makes sense.

Consider how often you use your phone. Things you used to buy using a desktop are now just as easy to purchase on your tablet or mobile. And if they’re not, you’ll probably shop somewhere else.

My potential clients are two skilled artists in need of a website to market their reclaimed tree art. These unusual pieces have been purchased by local businesses and showcased in art shows and restaurants. Basically, it’s high-end upcycling using natural materials.

Upcycling is the process of converting old or discarded materials into something useful and often beautiful.

What is Upcycling?

Sizes span from six inches square to four feet square, and include a range of background colors. Custom works are often made to order for professional office spaces.

3 x 4 ft. Tree Cookie Art on display at Acupuncturist Office

Winning Website Design

In her blog, Lindsay Kolowich shares the ten “basics” needed to design a winning website.

  1. Responsive Design
  2. Branding
  3. Eye-catching Image
  4. Clear Navigation
  5. Prominent Phone Number & Contact Information
  6. Punchy Persuasive Headlines and Copy
  7. Important Information above the Fold
  8. Blog, Videos, Downloadables
  9. Strong Calls to Action
  10. Trust Indicators

Responsive Design

It’s not number one on the list for nothing — responsive design is a must.

A responsive website design will respond or adjust to the screen size of various different devices. Mobile internet browsing has officially overtaken desktop browsing: thus, having a responsive website has become a basic necessity for small business owners.

Lindsay Kolowich

Here’s a brief outline of the design process I used for “Art by Nature.”

Branding

Branding involves logos, fonts and colors. To reinforce the eco-friendly theme I chose three colors: two shades of brown and one shade of green.

Two typefaces were used — Impact for the title and Helvetica Neue for the tag line. The title “art by nature” can stand on its own or be combined with the two tagline sentences.

Eye-catching Image

Photos of the art speak for themselves; the work is amazing. Here’s a piece called “Hot Salsa.” Incredible.

Navigation, Phone Number, and Social Media

  • Best to handle mobile site navigation by using the conventional symbol of three stacked lines in the upper right hand corner.
  • We’ll definitely include the phone number right up top, especially since many of their pieces are made to order.
  • Links to their social media sites are also included in the top portion of the site.

Important Information above the Fold

Next I added four small images and one larger piece of the art work to include a variety of pieces. Visitors can click on the white shopping cart link at the lower right of an image to add the art to their shopping cart.

So far we’ve covered 1 through 7 on the list — not too bad for a new web presence. We’ll definitely add numbers 8 through 10 as they’re developed in the future.

An email subscription link is also included at the bottom of the site to help our artists generate a future mailing list.

And let’s not forget our desktop version, with a slightly different logo …

When designing websites — desktop, tablet, or mobile — remember:

  • People prefer visual content over text.
  • Include textual details but keep it brief.
  • Make the site easy to use.
  • Most of all, be sure you capture your visitors’ attention quickly.

And keep an eye out for artbynature.biz, coming soon to a cell phone near you!

until nxt time …

References

Color Name & Hue – Colblindor. (n.d.). Retrieved from https://www.color-blindness.com/color-name-hue/

Kolowich, L. (n.d.). The Anatomy of a Winning Website Design [Infographic]. Retrieved June 30, 2019, from https://blog.hubspot.com/marketing/anatomy-web-design Check out this comprehensive list of the basics of designing and building a great website.

Smith, J. (2019, April 22). Mobile eCommerce Statistics (Updated 2019) Percentage of Mobile mCommerce Shopping Trends. Retrieved from https://www.outerboxdesign.com/web-design-articles/mobile-ecommerce-statistics

What Is Upcycling? | Hipcycle. (n.d.). Retrieved from https://hipcycle.com/what-is-upcycling

CRAFTING YOUR STORY

At some point, I think it would be fun if I could deliver a seminar to give advice to people who need help starting a blog. And since I have a new logo (detailed in the post Branding a Storyteller) I decided I would mock up a test advertisement. No harm in being prepared ahead of time, yes?

I usually imagine myself speaking at my local library, predominantly because it’s free to use the space. But why not dream big? I love Manhattan, so the New York Public Library it is! If you haven’t visited, you should. They have a great tour that’s fascinating and absolutely free. But I digress — back to the ad.

Here’s what I included in my design:

  • Images and colors to attract attention.
  • A reprint of two of my best blogs to establish myself with those who aren’t familiar with my work.
  • A columnar format to make it easy to read.
  • My new logo.
  • My domain name.
  • Engagement details (name of seminar, place and time).

Using Adobe InDesign, here’s what I came up with.

“For text-heavy formats, such as publications, newsletters, government websites, and editorial websites, some designers rely on the Guttenberg Diagram to help guide the viewer” (Landa, 2019).

The Guttenberg diagram was developed by Edmund C. Arnold, who was considered to be the father of modern newspaper design. Arnold divides a page into four quadrants.

Lacey (n.d.)

In my design, the dominant element is my silhouette in the upper left hand corner, called the primary optical area. It’s the point of entry because we read from left to right — here in the West anyway. From there our eyes scan the rest of the document using a Z pattern, highlighted in the image above using turquoise arrows.

I placed my most popular blog, Run to the Rhino, in the strong fallow area. Blog number two, We Remember, lives in the weak fallow area. Finally I placed the event information, logo and website address in the terminal area to make sure I had a shot at enticing the reader to join me.

Each story has a different background color to differentiate them from each other. I also included images from the original blogs to make it more interesting.

Hopefully my design has enticed you to attend. I’d be honored if you’d join me. And don’t worry — if you get bored you can sneak out and take the library tour instead.

until nxt time …

References

Foster, H. (2019, February 2). Run to the rhino. Retrieved from: https://untilnxttime.com/2019/02/02/run-to-the-rhino/

Foster, H. (2019, May 26). We remember. Retrieved from: https://untilnxttime.com/2019/05/26/we-remember/

Lacey. (n.d.). Using design rules as a guide, not a law, with regards to visual weight. [Blog post]. Retrieved from: http://www.dirigodev.com/blog/preview/design-rules-as-guide-visual-weight/

Landa, R. (2019) Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

BRANDING A STORYTELLER

Creating a good logo requires intense creative thought and a lot of hard work. And let’s face it — it might be small but it needs to be powerful!

… a logo represents and embodies everything a brand, entity, or individual signifies.

Landa, 2019

That one little word – everything – is daunting. I didn’t know it at the time, but it’s probably the reason I’ve been avoiding the job for so long.

My blog has been developing (slowly). Updates have been made — I’ve changed the layout, added a favicon, and revised my posts in hopes of making it better for my readers. But I have avoided creating a logo because I just couldn’t come up with a concept I liked.

You see, I love my domain name. It’s exactly what I want to say at the end of each post, just spelled a little differently. “Until next time” without the “e” in next.

I see it as a thank you. Thank you for taking the time to read my musings. It’s also a promise — if you liked my story, I’ll be back with another one soon. It’s my version of “au revoir.”

But this week it was time to Run to the Rhino, and so began my brainstorm doodling. Over the course of three days I sketched on all kinds of things: notebook paper, post-it notes, envelopes, napkins — anything that was handy. I fashion myself a storyteller, so the sketches included a number of book designs — but that just seemed too cliché.

Unfortunately, I really didn’t like anything I came up with. They were all boring. I came up empty, except for two things:

  1. Time had to be a part of it.
  2. I had to send the message that “next” didn’t have an “e” so people could find me on the web.

Finally this sketch happened, and it started to feel right. Hallelujah!

And the iterations began … here’s a few of them.






I really liked this typeface, but the Roman lettering is a bit stiff — not my personality. As I scrolled through the list of font possibilities, it hit me. What about a typewriter font? A nod to my writing … yes, that just might work. And a short time later this happened.

That’s it!

It’s multi-layered and a bit of a puzzle, which makes it fun. It unfolds in three stages: first you see the word “until,” followed by “nxt,” and finally as a centerpiece, the “X” transforms into time.

In addition:

  • The American Typewriter typeface says “writer.”
  • The Noteworthy typeface used for the “X” is a great contrast to American Typewriter and delivers a modern feeling.
  • The tan color adds a human quality to the starkness of the black.
  • The tan also does double duty by representing the sand in the “X” hourglass.
  • Using two colors reinforces the domain name until nxt time.

Ultimately it works because it is a reflection of me — the writer, the creative, and the storyteller (no books necessary). It tells my story.

A logo is the smallest canvas for storytelling.

Gui Borchert, group creative director at 72andsunny

untilnxttime …

References

Foster, H. (2019, February 2). Run to the rhino. Retrieved from: https://untilnxttime.com/2019/02/02/run-to-the-rhino/

Landa, R. (2019). Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

PTXofficial. (2016, October 21). [OFFICIAL VIDEO] Hallelujah – Pentatonix. Retrieved from: https://www.youtube.com/watch?v=LRP8d7hhpoQ

je’taime plus haut que ciel

je t’aime plus haut que ciel!

In case you’re not fluent in French, the title means “I love you higher than the sky.” As the designer of this movie poster, my goal is to grab your attention and entice you to read the details described in the text at the bottom.

Interested in how it works? Keep reading to learn how I used design principles to try and get you — my potential audience — to buy tickets to go see my fictional film. To begin, let’s start with a little geometry to make sure the layout is aesthetically pleasing.

The Golden Ratio (a.k.a. the Golden Section)

Using the geometry in math, the golden section ratio is 1:1.618. This ratio is seen repeatedly in nature. The spiral connecting its points is found in galaxies, shells, and weather.

Using the golden section is a simple and easy way to define a pleasing composition.

(LinkedIn Learning, 2013)

With Adobe Illustrator, designers can easily create a golden rectangle to help them determine the placement of their compositional elements. I used this video to create the magenta version pictured below.

Just remember, the rectangle can be used in any direction. It can also be rotated or used multiple times in a single composition (LinkedIn Learning, 2013). Here’s the poster, shown with the golden rectangle overlay I created.

Let’s talk about how it works.

Three Levels of Dominance

The placement of a dominant element is critical to the balance of a painting or design. A dominant element in the center (horizontally or vertically) creates symmetry, producing a formal, static design.

 A dominant element close to the edge creates an out of balance tension. There is no right or wrong position for a dominant element, but the different tensions created by it should be understood and used to advantage.

(Lovett, n.d.)
  1. At first glance, you enter the poster at the young women’s eye level.
  2. Next your eye follows the spiral shape up and to the left, which takes you to the title and the photo of the Eiffel tower. These two elements combine with each other to become the secondary element of the piece.
  3. Finally your eye lands at the textual information on the bottom of the poster, the tertiary element.

Clearly, the dominant element is the young woman, our main character. Her photograph is placed off-center and channels the intrigue of a possible love affair. Even though we don’t know what the movie is about, one thing is certain — we instantly connect with her.

Is she sad? Is she discouraged? Has she gone through a difficult breakup? We need to know her story.

Balance

The placement of the woman’s image in the upper right section of the composition is balanced by the Eiffel Tower image on the lower left hand side. The film title, which runs parallel to the tower, also helps balance the photograph of the main character.

In traditional fashion, details about the film are placed at the bottom of the poster. The text includes the names of the production companies, actors, release date, and the film’s rating. The information is chunked at the bottom, which creates a kind of “base” for the art.

Contrast and Depth

Take notice of the oil painting effect applied to the woman and the tower. This texture is informational (a nod to Paris with its street painters in Montmartre) and provides a soft contrast to the modernity of the rectangles placed below it. Depth was created by using drop shadows on lettering wherever possible.

Rhythm

The vertical repetition of the primary and secondary dominant elements (character and tower/title) provide a strong rhythm, softened ever so slightly by the waves in the woman’s hair. Rhythm is also created by having the tower’s golden color mirrored in the titles and the five gold stars that shout “great film!”

Typography

I chose Zapfino for the dominant movie title that runs vertically along the left hand side of the poster. A script typeface simulates handwriting, which helps give the poster the romantic feeling I wanted. I considered putting the title in English, but in the end I decided to leave it as is. That being said, here’s what the alternative looks like.

© 2019 Holly Foster

I wanted (and needed) a narrow condensed text for the movie information at the bottom of the poster. I also wanted something with an elegant feel, so after a bit of searching I chose the WAVES typeface. Using different sizes and weights worked well for all the remaining elements. The rating and film festival logos were used in their original format.

It’s a wrap!

Posters are marketing tools meant to grab your attention. In my case, I focused on the strength of my photograph to entice you to buy a ticket. The golden rectangle aided me in the placement of my objects, helping to ensure the composition was attractive. I also left the description of the film out intentionally, to keep you guessing as to what the movie is about.

So tell me, did it work?

until nxt time …

Special thanks to my daughter (for allowing me to use her image) and her fiancé for their advice on this project 🙂 je t’aime plus haut que ciel!

References

Asafti, S. (2017, September 1). How to draw the Golden Ratio SUPER FAST in Illustrator CC [Video file]. Retrieved from https://www.youtube.com/watch?time_continue=311&v=ujLh5ZB3Uls

Landa, R. (2019). Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

LinkedIn Learning. (2013). Layout and composition tutorial: The golden section | lynda.com. Retrieved from: https://www.youtube.com/watch?v=wH32LujS9Yg

Lovett, J. (n.d.). Design Principle Dominance | John Lovett Design. Retrieved from: https://www.johnlovett.com/dominance

COLORS (SEEM TO FADE)

After Bob Dylan’s serious motorcycle accident in 1966, CBS records commissioned artist Milton Glaser to design a poster for Dylan’s Greatest Hits album. The goal? To quell the rumors that Dylan was either bedridden or dead. To bring life to the poster (no pun intended), Glaser depicted the musician’s curly hair using rich colors, presumably a nod to the popular use of psychedelic drugs at that time.

Fast forward to early 2005. Amos Lee, a singer-songwriter from Philadelphia, was the opening act during the first leg of Dylan’s North American “Never Ending Tour”. He wasn’t discovered by Dylan, but the exposure was a great opportunity for Lee (Renee Graham, 2015).

Fast forward again to 2011. I’m not exactly sure how I stumbled upon it, but I discovered Amos Lee’s music and have been following him ever since.

According to Wikipedia, Amos Lee’s music ” … is said to utilize the ‘supple funk of his vocals and arid strum of his guitar’ while recalling ‘the low-volume, early-’70s acoustic soul of stars like Bill Withers and Minnie Ripperton’. A New York Times music critic described Lee as having a ‘honeyed singing voice – light amber, mildly sweet, a touch of grain’ which he features ‘squarely, without much fuss or undue strain’ in his ‘1970s folk rock and rustic soul’ musical song craft” (Amos Lee, 2019).

That’s lovely, but you can’t fully appreciate it until you hear his music. The description is, however, dead on accurate. It’s easy to see why I chose him as the subject of my latest visual design project, a composition that (hopefully) embodies the essence of a talented, authentic, and eclectic musician.

The Photograph

To begin, I created a silhouette based on an image I found using a Google search.

Shapes and Colors

When I think of James Taylor, blue comes to mind. For Prince, I see purple. It was hard to choose a single color for Amos, but I thought an earth tone would be a good start — I just wasn’t sure how well it would work on the black silhouette.

I thought it would be interesting to use a guitar pick shape for his hair, but when I tried it, it just looked clunky. I decided to sleep on it, and when I woke up the next day I realized that I had never seen him use a guitar pick in concert — so I scratched that idea. As an alternative I used Adobe Illustrator to create a curly, free-form shape. I replicated it and then scattered the shape randomly across the top of the silhouette.

I filled each of the shapes with one of two shades, red or violet, but I hated it because the shapes reminded me of the skinny little hair permanent rods hairdressers use (my dislike may be associated with a bad perm I once suffered, but that’s another story). It just looked bizarre, especially considering Amos Lee has naturally curly hair.

On the other hand, I loved the blue-gray color I chose for the facial hair. I was also very happy with the typeface I chose and the guitar I created using Illustrator’s bevel effect. Most importantly, despite the nights I spent wrestling with it, I finally felt like Illustrator was becoming my friend.

Hexadecimal Color Codes

To assign colors, designers often use hexadecimal codes (also known as the RGB Color System). It’s an additive color system — meaning the base is black and additional colors are added to produce the desired color result.

A hexadecimal color is specified with: #RRGGBB, where RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

Baker, 2017

If you’re not familiar with hexadecimal notation, take a closer look at the numbers. The hex code for the blue-gray color I used is #262936 — red has a value of 26, green is next at 29, and blue is the predominant value coming in at 36.

Color Hex Color Codes (n.d)

Using the blue-gray hex code, I went to the online Sessions College Color Calculator to generate additional colors. In step two, this tool allows you to choose from six different harmonies, outlined below (Color Wheel – Color Calculator (n.d.).

  • Complementary – hues that are opposite each other on the color wheel
  • Monochromatic – color schemes that only use one hue
  • Analogous – three colors that are adjacent to each other
  • Split complementary – one color plus the two colors adjacent to its complement on the opposite side of the wheel
  • Triadic – three colors that are equidistant from each other on the wheel
  • Tetradic – a combination of four colors, which consists of two sets of complementary colors.

I loved the tetradic results — but I was afraid they were all too dark.

Kill the Darling

Eventually I realized that using a single object for the hair might be more palatable. I tried different colors, each time applying different opacity levels to get the effect I wanted. I liked the result a lot better — but it still didn’t feel quite right.

© 2019 Holly Foster

Finally, I had to kill the darling. My love affair with the blue-gray had to end. And so, I found a new color to love — #4D4D4D (a.k.a. Gray30).

Color Hex Color Codes (n.d)

Shades vs. Tints

I used three sets of earth tone colors for the major components (hair, eyebrows, beard, mustache and collar). It took a considerable amount of time, but I was able to capture the subdued effect I wanted by using Adobe’s opacity setting. This effect allows the designer to control the amount of transparency in an object.

Shades are hues created when black is added to a color (as opposed to adding white, which creates a tint (Baker, 2017). In my final composition, different shades were naturally produced by using colors with various transparency levels and layering them on top of the black silhouette.

© 2019 Holly Foster

Here’s a link to the full size image.

Color evokes feelings

Color is a visual emotion. You can use it to tell stories and condition people to act, feel, and behave a certain way.

Baker (2017)

You’ve seen all three, but this is my favorite. I guess you could say I see Amos Lee in shades of brown.

© 2019 Holly Foster

The brown color says stability, reliability, dependability, and approachability. It is the color of our soil, growth, fertility, and earth, and it is associated with the concepts of “all natural” and “organic.” Brown is the color of the Earth and is comforting and nurturing.

Bourne, 2010

About Amos

If you’d like to get to know Amos Lee a little better, you may want to listen to this recent podcast (skip to 10:52 to get to the beginning of the interview).

I highly recommend it, but if you don’t have time to listen here’s a summary of the podcast.

Lee knows what it’s like to face personal hardships, so he views his music “as a service,” a way to reach out and comfort people who may also be suffering. He talks about how working on his new album, “My New Moon,” was therapeutic for him, writing about some very personal experiences. Finally, Lee performs a song he wrote after witnessing his grandmothers passing, in this touching episode.

(Harris, 2018)

Finally and appropriately, here’s a fan video of Amos performing his song Colors.

Colors by Amos Lee

I don’t like when people feel alone in their suffering … I want to reach out to people through music.

Amos Lee

If you’re interested, you can follow Amos Lee on Instagram at am0slee (use a zero instead of an “o”).

until nxt time …

References

Amos Lee. (2019). In Wikipedia. Retrieved from https://en.wikipedia.org/w/index.php?title=Amos_Lee&oldid=882399270

Baker, J. (2017, December 4). The Ultimate UX Guide to Color Design. Retrieved from: https://medium.muz.li/the-ultimate-ux-guide-to-color-design-4d0a18a706ed

Bourne, J. (2010, November 25). Meaning of The Color Brown |. Retrieved from: https://www.bourncreative.com/meaning-of-the-color-brown/

Color Hex Color Codes. (n.d.). Retrieved from https://www.color-hex.com/

Color Wheel – Color Calculator. (n.d.). Retrieved from: https://www.sessions.edu/color-calculator/

Graham, R. (2005, February 27). Former teach gets a lesson in the big time: Amos Lee lands Dylan opening gig. The Boston Globe.

Harris, D. (2018, November 11). 10% Happier with Dan Harris – Amos Lee, Reaching Out Through Music – 55:19. Retrieved from: https://radiopublic.com/10-happier-with-dan-harris-WwE9m8/ep/s1!5f823

Junod, K., & Schlanger. (2018, August 30). Amos Lee rinds mighty inspiration on his new album. Retrieved from: https://www.npr.org/sections/world-cafe/2018/08/30/642950645/amos-lee-finds-mighty-inspiration-on-his-new-album

Landa, R. (2019). Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

Milton Glaser. Dylan. 1966 | MoMA. (n.d.). Retrieved from: https://www.moma.org/collection/works/8108

MishaRW. (n.d.). Amos Lee – Colors. Retrieved from https://www.youtube.com/watch?v=yegT-Av7djQ

TYPOGRAPHY TALKS

Typography is one of those things most people don’t think much about, yet it is a powerful tool designers use to deliver their message.

The word “empathy” is shown above in a typeface named Helvetica. Helvetica was created in 1957 by Max Miedinger and has been used extensively across the globe. Why? Because it’s considered a neutral typeface, which makes it compatible with many types of content.

Helvetica, by design, conveys no additional meaning.

This week my assignment was to express a word’s definition by creating an artistic expression of the word. Because it is important to me (and I like a challenge), I chose the word empathy.

Before I explain my design, let’s take a look at the definition.

People often confuse empathy with sympathy, but they are vastly different. If I sympathize with someone, I retain my own point of view. When I empathize, I step outside of myself to experience the other person’s point of view.

“You’re experiencing a fraction of their emotions and feelings because you see things from their perspective” (Kramer, 2018).

According to psychologists Daniel Goleman and Paul Ekman, there are three types of empathy: cognitive, emotional, and compassionate (Bariso, 2018).

  • Cognitive empathy is the ability to understand how a person feels.
  • Emotional empathy happens when you share the feelings of another person.
  • Compassionate empathy moves us to take action.

As I said, I like a challenge.

To begin, I wanted to use a typeface with lots of curves to make it feel personal. I also wanted it to look handwritten. When I found the Noteworthy typeface, I felt like I found a winner.

Here’s my first pass.

Empathy requires compassion, a form of love, so the color had to include red.

Since I wanted my letters to appear closer together, I used Adobe Illustrator’s tracking tool to illustrate the emotional connection I wanted to convey (notice how the “t” and “h” are touching each other).

Empathic people are good listeners, so I decided to replace the “a” with an ear. The shape of the “y” said “heart” to me, so the emotional element was taken care of. To incorporate the cognitive aspect, I created a silhouette of myself.

The marriage of the visual elements of thinking, listening, and feeling with the Noteworthy font in black and red resulted in this final product:

© 2019 Holly Foster

When designed strategically, the combination of graphical and typographical elements can help you deliver your message effectively. Just make sure you do your research first.

until nxt time …

References

Bariso, J. (2018, September 19). There are actually 3 types of empathy. Here’s how they differ–and how you can develop them all. Retrieved from:  https://www.inc.com/justin-bariso/there-are-actually-3-types-of-empathy-heres-how-they-differ-and-how-you-can-develop-them-all.html

Hagen, R., & Golombisky, K. (2017). White space is not your enemy: a beginner’s guide to communicating visually through graphic, web & multimedia design (3rd ed). Boca Raton: CRC Press, Taylor & Francis Group, CRC Press is an imprint of the Taylor & Francis Group, an Informa business.

Kramer, B. (2018, August 13.). The critical difference between sympathy and empathy. Retrieved from: https://www.forbes.com/sites/forbescoachescouncil/2018/08/13/the-critical-difference-between-sympathy-and-empathy/

Noteworthy font free download – FreeFontsPro.com. (n.d.). Retrieved from https://www.freefontspro.com/13692/noteworthy.ttf

Rube, T. (n.d.). How to show empathy. Retrieved from wikiHow website: https://www.wikihow.com/Show-Empathy

The history of Helvetica. (2018, September 6). Retrieved from: http://imagine-express.com/the-history-of-helvetica/

SUBTLE REMINDERS

The unconditional love I receive from each of my adopted animals enriches my life daily. When I spend time with them, the affection they show me is a reminder that I am valued; that’s a message we humans need and appreciate.

Every day, twice a day they remind me it’s time to eat. My white cat Lily usually shows up first, positioning herself strategically beside the bowl. One by one the other cats join her and begin to mill around, meow, and sometimes even reward me with a loving headbutt to ensure they’re being heard.

I recently found myself thinking “Wouldn’t it be nice if they just lined up and sat perfectly still in anticipation of their food?” And as that thought entered my mind, the design for my project was born.

The Design

I was convinced that I could successfully place each cat around an empty pet bowl. The concept was simple: take individual photos and combine them into a single composition. If possible, I also wanted to capture images that showed a glimpse of each cat’s personality.

Ultimately, I wanted the message “Where’s the food” to be loud and clear so the viewer could almost hear their mental voices. Ask any cat owner and they’ll confirm the intensity you experience at feeding time.

Concept — simple: execution — not so simple. You know what they say about working with children and animals … well it’s absolutely true. This endeavor required a lot of picture taking and a ton of patience.

To design is
to devise courses of action aimed at
changing existing situations
into preferred ones (Hardt, 2006).

Herbert Simon, Nobel laureate

This quote by Herbert Simon describes the ability of a good design to produce change, but (for me) it’s also a metaphor that mirrors my wish for well behaved cats!

Taking the Photos

To begin I took a picture of my kitchen counter, which serves as the cats’ feeding area. Next I shot NUMEROUS photos of each of my sweethearts, always aiming to capture their image in full-face view.

I started with my gray cat Charlotte, who was a perfect model. My tiger Meg was the total opposite; she wasn’t particularly interested in looking straight at the camera, so I had to move around quite a bit to get a usable shot. Lily completely ignored my directions and insisted on lying down, while my Siamese cat Roddy absolutely refused to sit (he’s my ADHD kitty). I was disappointed at first, but ultimately the non-sitting shots actually worked to make the composition more interesting. This is what Dr. Robert D. Austin, professor of Information Systems at Ivey Business School describes as “serendipitous opportunities” (he teaches Design and Technology Management in their MBA program).

Knowing too clearly where you are going, focusing too hard on a predefined objective, can cause you to miss value that might lie in a different direction (Gilbert, 2006).

Prof. Robert D. Austin

I wanted to include all my cats (I have five) but one of them is … well let’s just say she’s camera-shy. I actually prefer asymmetrical compositions, but with only four cats this one was destined to be symmetrical.

After spending a considerable amount of time looking at the photographs, I brought my final pictures into Photoshop. I carefully made my selections and used masks to isolate each cat and make the backgrounds transparent. And yes, I can assure you that whiskers are definitely a challenge.

Sizing and Composition

MENT is an acronym that stands for midline, edges, negative space, and transitions. Robin Landa, author and professor at the Robert Busch School of Design at Kean University, reminds us to “thoughtfully position each graphic element in relation to others and to the overall format” (2019).

Comparing each cat’s head size helped me get the proportions correct, or at least believable. I also had to make adjustments based on the actual size of each cat (Lily is very large but her head is actually quite small). Overlapping the images created the spatial depth required to make the picture pleasing to the eye.

It took a lot of trial and error to get a balanced composition. I rearranged the elements A LOT, taking frequent breaks so I could let the project incubate for periods of time.

Two cats are in the foreground with the bowl, which lies directly on the midline. The remaining two cats are placed in the middle ground, with the rest of the kitchen residing in the background of the composition. Two of the cats bleed off the edge of the page. There’s also plenty of negative space between the two center cats to allow for a pleasant transition among the animals.

The background needed a bit of adjustment, which gave me an opportunity to use Photoshop’s perspective crop tool (check out the video by PromoAmbitions under references to see a short but effective lesson on how to use it).

One Last Reminder

Ultimately I was happy with the results, but those who know me well know I don’t like to leave anyone out. My dear puppy Savannah (who is not young at all) should also be remembered. She too reminds me when it’s feeding time, and she’s not particularly fussy about the differences between cat food and dog food.

A couple of quick photos, one more set of selection/masking and voilà, she was in! It changed the dynamics of the composition but still works well, although I don’t think it delivers the same emotional punch of the cats-only version.

And so, this photo will always be a reminder of my four-legged children. Their not-so-subtle reminders not only ensure that they are well fed, but also help me remember how blessed I am to have them in my life 🙂

© 2019 Holly Foster

until nxt time …

References

Gilbert, S. J. (2006, July 5). The Accidental Innovator. Retrieved from: http://hbswk.hbs.edu/item/the-accidental-innovator

Hardt, M. (2006). Design Definition Lecture [PDF]. Retrived from: http://www.michael-hardt.com/PDF/lectures/design-definition.pdf

Landa, R. (2019). Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

PromoAmbitions. (2018, May 19). Perspective Crop Tool – Photoshop CC Tutorial 2018 (Photography). Retrieved from https://www.youtube.com/watch?v=4q_4Xdt8Ic0

WE REMEMBER

Dutch-born artist Piet Mondrian is considered a pioneer of abstract art. After a lifetime of painting in the Netherlands and France, he left Paris in 1938 in response to Hitler’s invasion of Czechoslovakia. He was sixty-six when he arrived in his new home in a suburb of London.

By September of 1940, Nazi bombing raids known as the Blitz drove Mondrian to flee the U.K. and begin a new life in New York City. That same year he created his masterpiece Broadway Boogie Woogie.

Broadway Boogie Woogie is an example of neo-plasticism, a type of abstract painting that uses only geometric shapes, primary colors and horizontal lines.

Although I am not generally a fan of abstract art, I am drawn to the visual movement created by the artist. It’s compelling how these simple geometric shapes convey the excitement of Times Square, a feeling I have experienced in person many times myself.

“The title of the painting, Broadway Boogie-Woogie, is a nice collision of two delighted references to things that made Mondrian so enthusiastic about his new life in New York City: Broadway, a very busy, broad thoroughfare full of interesting stores, but also full of theaters representing the novelty and the liveliness of the American musical tradition, and boogie-woogie, the jazz music that Mondrian discovered here and loved so much. That combination of references in the title is really a tribute to New York City at that moment.”

Ann Temkin, American Art Curator

Take note of how Mondrian adeptly uses passive white space to give balance to the movement created by his geometric shapes.

“Choices in placement, proportions and relationships between shapes all drastically help shape the meaning of a graphic (Madsen, n.d.).

Like Mondrian, I love New York. Within the energy of the city I experience a feeling of freedom each time I visit. And as I do with my freedom, I often take art for granted. In actuality, good design takes planning.

In her book Graphic Design Solutions, Robin Landa describes the steps necessary to create a strong design (2019).

Research | Analysis | Concepts | Design | Implement

My research focused on looking at Mondrian’s work and how it evolved over the course of his life. His early work consisted of landscapes in a naturalistic or impressionist style. Later he was influenced by the Cubist style. Ultimately he became an important part of the group of artists who embraced abstract art.

For my analysis, I knew I was limited to using primary colors and geometric shapes. While working, the proximity of Memorial day and the abundance of red and blue in Broadway Boogie Woogie brought the American flag to mind. I sketched a few concepts on paper to get a rough idea as to whether my ideas would work.

At first my design consisted of a flat flag, which seemed a bit dull. To make it more exciting I decided to stagger my geometric shapes to give the perception of movement. The white background between the blue boxes would serve as the white stripes of the flag and allow some visual breathing space for the viewer.

Unlike Mondrian, I was working towards a more uncontrolled look that would accentuate the waving of the flag. The red rectangles are all unique and help achieve the perception of movement. In contrast, the blue rectangles are almost all identical.

I wanted the flag pole to flow vertically but resisted the urge to make each rectangle uniform, hoping to make the art more interesting. The words “we remember” were also added as a nod to our current troops and their families.

When Mondrian came to the U.S. in 1940, he found the same freedom we cherish today. This Memorial Day weekend, I am moved to remember those who died in active military service to protect our freedom. My final implementation is a digital tribute to those who never got out of uniform.

© 2019 Holly Foster

Graphic design uses images and text to convey a message, and my message is this — let us never forget those who made it possible to live in freedom, and may we always provide a space for those who wish to pursue their dreams in safety.

until nxt time …

References

Boulton, M. (2007, January 9). Whitespace. Retrieved from: https://alistapart.com/article/whitespace/

Chapman, S. [Steven Curtis Chapman]. (2017, May 29). “We Remember” – Official Music Video [Video file]. Retrieved from: https://www.youtube.com/watch?v=lbiaN54hn-U

Landa, R. (2019). Graphic Design Solutions, Sixth Edition. Boston, MA: Cengage.

Madsen, R. (n.d.). Programming Design Systems. Retrieved from http://printingcode.runemadsen.com/lecture-form

Neo-plasticism – Art Term. (n.d.). Retrieved from: https://www.tate.org.uk/art/art-terms/n/neo-plasticism

Piet Mondrian. In Wikipedia, The Free Encyclopedia. Retrieved from https://en.wikipedia.org/w/index.php?title=Piet_Mondrian&oldid=892934155

Temkin, A. (n.d.). Piet Mondrian. Broadway Boogie Woogie. 1942-43 | MoMA. Retrieved from: https://www.moma.org/audio/playlist/1/196