Caged Bird

When Kelita Haverland invited me to scribe the words to her popular song “Caged Bird”, she generously gave complete freedom—both exciting and daunting for an artist! The poignant lyrics deserved special treatment, so I immediately got to work choosing lettering styles and images.

WillowLetteringWhat was the inspiration?

Lettering. I’ve always admired the classic work of Charles Rennie Mackintosh (1868-1928), a Scottish architect, designer, and water colourist. His projects were inspired by the flourish of Art Nouveau and the simplicity of Japanese forms. He was known for designing a simple and elegant letterform called “Willow”.

A graduate of the Glasgow School of Art, Mackintosh was commissioned to design the School’s new building, but also the furniture, artwork, and stained glass windows—unusual scope granted an architect.

Images. While researching song birds, I was intrigued by the Merops apiaster species—a richly coloured, wild, migratory bird with a mellow song. Its name is Greek and Latin for “bee-eater”. Merops feed on flying insects—but not before removing their stinger and venom. What resilient birds. As resilient as the subjects in Kelita’s song.

In the final design, “Caged Bird” combines the influence of stained glass with watercolour and the “Willow” letterform. I am imagining that the letter “o” resembles a birdhouse entrance with a perch! It was tempting to refine the lines of the birdcage with pen and ruler, but leaving it rustic gives the impression of forged iron, which provides a counterpoint to the soft colours.

IMG_1832

“Caged Bird” features watercolour, gouache, and ink on Arches 140 lb. watercolour paper. The piece was designed at the kitchen counter during studio renovation when supplies were in storage—a test of resiliency!

Have you been given freedom to design a project? What was your approach?

Advertisements

Final Quest

As my Visual Design and Display of Information course draws to a conclusion, I reflect on learning outcomes.

  1. Design is as much about the presentation of text as the inclusion of quality and relevant graphics to complement the text.
  2. Design is not about decoration or ornamentation. Design is about making communication easy and clear for the reader.
  3. Learning the psychology behind the principles of design informs design choices and strengthens the impact of visual materials. It also helps me to articulate why a particular design choice might be successful.
  4. Use alignment as a simple, effective, and vital design principle to create a cohesive and unified page.
  5. Blogging is an effective way to share ideas, articulate a position, gain feedback, and connect with others interested in similar topics. Sharing ideas using both words and images, including photos, videos, and slides, facilitates communication.
  6. Lots more to learn!

I present my final assignment, the design blog DesignQuest, and answer a few questions posed in my earlier post.

Who is the audience for DesignQuest? This blog appeals to anyone who is curious about the concepts and issues related to visual design and display of information.

What is the purpose of this blog? As a student of visual design, I present design development concepts and best practices. As a newbie to blogging, I explore the reasons and basics of blogging. Since a blog is a personal journal, I share my thoughts on various topics.

What tone is used? Because I am curious and still learning, the posts reflect the tone of a writer who is learning, asking questions, and wanting to find out more. I do not present as an expert (yet!), but as a conduit of the information that I am gleaning and have uncovered in the process of searching.

Will this blog have an after-life following the class? Maybe. I could turn it into a forum for design techniques and artwork. Who knows?

Regardless, this has been a fabulous learning adventure!

Moraine Lake, Alberta

Moraine Lake, Alberta (photo: Gordon Sloan)

To close the chapter on my design blog, I attempted to find a relevant image. But none surfaced.

Sometimes life is like that. What you are looking for is not ready to be found.

However, I do have a favourite photo captured by my brother-in-law as he navigated the Canadian Rockies. (I enjoy the scenery’s calming biophilia effect.)

Thank you for joining me on the course of this  journey! Or the journey of this course!

Maybe our paths will lead us to meet here again.

Related articles

Got Gridlock? Webpage Grids

Creating an eye-catching page layout takes an artistic touch.

Joshua Johnson is a web designer with some well-tested tricks in his toolkit. If you encounter designer’s block, consider Joshua’s 10 Rock Solid Website Layouts. Keep these alignments on your drawing board when you are stuck. Or before you get stuck.

  1. Three Boxes
  2. 3D Screenshots
  3. Advanced Grid
  4. Featured Graphic
  5. Five Boxes
  6. Fixed Sidebar
  7. Headline and Gallery
  8. Featured Photo
  9. Power Grid
  10. Full Screen Photo

Basic principles:

  1. Choose an alignment
  2. Design to include whitespace
  3. Highlight important elements through sizing and positioning

To familiarize myself with his layout concepts, I searched the web for samples of my own to share with you.

Three Boxes

The three boxes layout features one main graphic area followed by two smaller boxes underneath. Each box can be filled with a graphic, a block of text, or a combination of the two.

3Boxes

3D Screenshots

Provide a headline and descriptive text, then add stylized previews of your application using 3D effects.

3D Screen Shots

Advanced Grid

Similar to the three boxes layout, use one primary graphic heading followed by a uniform grid of thumbnails. To add interest, merge some of the thumbnails to create areas of differing shapes. These areas can contain graphics, blocks of text, or a mix of both.

Advanced Grid

Featured Graphic

Sometimes you don’t have enough images or you want to highlight one icon, photo or symbol. An effective solution is to feature one strong graphic.

Featured Graphic

Five Boxes

The five boxes layout expands on the idea of the three boxes layout to accommodate the inclusion of more distinct content. Of course, the secondary boxes become smaller.

5 Boxes

Fixed Sidebar

Fixed vertical navigation features a strong vertical column on the left or right side of the page. The fixed element stays in place so that navigation is accessible from any point on the site. Design the rest of the page incorporating any of the other layout options.

Fixed Sidebar

Headline and Gallery

A gallery page is very visual. Use a headline, an optional sub-head, and then showcase a solid, uniform grid of images. Make the headline big and bold.

Headline and Gallery

Featured Photo

Feature one large image showcasing your design, artwork, or photography, then add a navigation system.

Featured Photo

Power Grid

For pages that contain a variety of related content, the power grid may be an effective solution. Define a large container to hold a series of shapes formatted in a strong but varied grid. In the example below, a defined container holds columns of variously-sized content boxes.

Power Grid

Full Screen Photo

Use one large, attractive graphic as a background to display a limited amount of content. Content laid over a background image can be difficult to read, so ensure that navigation is clear. Perhaps use an opaque horizontal bar to hold navigational elements.

Full Screen Photo

Hope these layouts inspire your next design project!

Related articles

Snake Oil over Ramen Noodles

My colleague Helen is a data analyst and researcher at the University of Toronto. Daily, she mines volumes of data about graduate education.

Most of her reports feature black and white charts with texts and numbers. The reports are robust with comparative data. Whenever I need to check a graduate program’s data set, her reliable annual report is my ultimate go-to resource.

However, we both agree that traditional statistical reports can use a shot of pizzazz!

Helen is also a foodie, so I love dining with her. Today we find ourselves lunching at Kenzo Ramen.

We are discussing a Ted Talk by data journalist David McCandless titled “The Beauty of Data Visualization” (July 10, 2010). An information designer, McCandless talks about visualizing the connections between data so that relational concepts are better understood when presented graphically.

With the emergence of data visualization and infographics, the future is beautiful. Information is beautiful. His recent project, Snake Oil?, presents comparative scientific data on popular health supplements.

SnakeOil1

By presenting research in such an engaging way, information is accessible to the public. Scientific data is not languishing on dusty shelves or in rusty filing cabinets. (OK, maybe no one but me files paper in physical cabinets any more…)

In fact, consumers are flocking to buy infographic posters as much for their informational significance as for their visual appeal.

McCandless explains, “The eye is exquisitely sensitive to patterns in variations in color, shape, and pattern. It loves them, and it calls them beautiful. It’s the language of the eye. If you combine the language of the eye with the language of the mind, which is about words and numbers and concepts, you start speaking two languages simultaneously, each enhancing the other. So, you have the eye, and then you drop in the concepts. And that is the whole thing – it is two languages both working at the same time.”

SnakeOil2

Indeed, information is beautiful!

Data visualization empowers us to readily examine complex data to develop our own interpretations. When data is understood, it can be better analyzed which, in turn, can lead to informed change. We no longer depend on someone else to parse the patterns. We can visualize it for ourselves. Secondary bias is eliminated. We can comprehend concepts unfiltered – on two cognitive levels – the eye and the mind.

Not into supplements? How about a serving of vegetables from Over 400 Vegetables on One Incredibly Healthy Poster (Pop Chart Lab).

400veggies

Add a little ramen to the mix, and now we’re cooking! Or noodling…

Related articles

Hello visual design class! (Anyone out there?)

I am extroverted.

I enjoy relating to people face to face, and I am energized through human interaction and external stimuli. So I never pictured myself sitting at home alone taking an online class about communication. I much prefer to sit in an actual classroom with real people – talking in real time. You know, communicating about communication. However, here I am, registered in my second e-learning course.

Extroversion aside, I admit that learning online has its advantages. During the course, I can tune in and out on my own schedule. Because students connect virtually, I am studying with learners from abroad with global perspectives.  And no one is judging me when I show up on a bad hair day wearing pajamas.

This semester, I am studying Visual Design and Display of Information. Instructor Julian Hunt writes, “This course will allow students to think about online delivery with an emphasis on visual and non-visual communications.”

I am excited to unearth more about the strategy of visual communications, so I ventured online to investigate.

Hewlett-Packard offers a four-page PDF titled The Power of Visual Communication.

Formal research studies indicate that communication comprising a visual component is far more effective than oral or non-visual communication. However, visual combined with non-visual communication (oral and action) is even more effective.

“Psychologist Jerome Bruner of New York University has described studies that show that people only remember 10% of what they hear and 20% of what they read, but about 80% of what they see and do.

Interestingly, while purely visual communication is more effective than solely verbal communication, the most compelling communication combines both visual and non-visual content. “

Presentation designer Chiara Ojeda explores visual thinking. She presents a thought-provoking slideshow and YouTube video that inspires presenters to rethink the approach of their next visual presentation.

So why am I telling you all this?

The final assignment for the Visual Design class is a design blog that captures my learning activity over the eight-week course. I have always wanted to blog. Here’s the perfect opportunity. In fact, you are reading my very first blog post!

During the course, through active research and learning activities, reading, and “listening”, I am hoping to retain much of that estimated 80% to which Bruner refers.

I invite you to audit Visual Design and Display of Information through the headset of my mindset. Listen in over the next several weeks. I’ll be blogging. Communicating. Maybe you will communicate back.

Related articles