Kismet Arts Tangent

Drawing Thumbnails

October 9, 2012
Drawing Club activities: Today, after our Guest Speaker, we practiced Blind contour and negative space drawing.

We had a guest speaker. Our very own Tom Lenon. Today’s topic: Thumbnailing. (A lot of this post is Tom’s instruction paraphrased… all the witticisms are his.)

Tom lamented that thumbnailing is a technique being lost because of technology. He explained that thumbnailing is a quick way to get concepts down on paper. Making them efficiently comes with practice, drawing a lot, being able to almost intuitively draw the human figure and capture facial expressions.

Materials needed:

Tracing Pad and soft pencils, like B or softer. HB is okay.

How to do a thumbnail:

Step 1. Prepare your proportionate sketch box. Work in the correct context. (If you are thumbnailing a page-sized advertisement, make sure the proportions are correct. ) For your thumbnail to be efficient, make sure it is no larger than half the size of your final. (Thumbnailing is not about being bogged down with the details.)

Step 2. Indicate where the shadows are. We are working with a pencil here. It’s about applying dark on light, so getting a gist of something with a pencil means that shadows, dark areas should be drawn.

Step 3. Many of your projects will require a layout including type. Draw your type. Don’t let your handwriting represent the type you are interested in executing. Is it serif, sans-serif? All caps, lowercase, small caps? You do not need to perfectly render type on your thumbnail, but make your thumbnail informative.

Step 4. Do another one. Thumbnails come in large groups. If your boss, teacher or client say that they don’t know how many thumbnails they want, do at least ten. More is better. It shows you have ideas. Do each one on a separate sheet. They are separate ideas after all. Waste paper. It’s okay.

Do not

Do not trace. It’s a terrible idea. It’s a crutch, a drug you shouldn’t take. Tracing is something that you should do to your own work to tweak it after having drawn it out in the first place. You need to take every opportunity to draw, make decisions. Each drawing is an analysis, deciding what’s important enough to include.

Do not use mechanical pencils. Your medium inspires your work. Drawing with a mechanical pencil makes the user draw delicate conservative lines. Drawing thumbnails is about being quick and messy if it gets the job done. Mechanical pencils are not made for sketching, they are made to draw eyelashes on gnat’s eyeballs.

Do not use pens. For the same reason as mechanical pencils, mostly, but also that pens are for finishing work.
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
Ravenna Gardens: Phase 2/ Critique and Rebuild

October 9, 2012
Katsite Project 1
Today’s critique <nutshell> Built fine, bad design. </nutshell>

Erik Fadiman said that it was boxy, the typography needs work, and use the empty space in the second column. I’m throwing away that style sheet and building a new one. One using something modified by Fadiman, roughly based on the grid at 1140px. And I’m throwing away my crappy google fonts. And I’m now using Adobe Edge Fonts. Which is surprisingly so badly designed that there is a helper Adobe Edge Fonts that allows you to see the different fonts in action.

(Earlier Post Relating to This Project)
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
Ravenna Gardens: Phase 2

October 8, 2012
Katsite Project 1 Today I’ve finished the first iteration of this website. I made a few adjustments from my wire frame. I extended the footer to span the width of the page to anchor the design. I made the js slideshow a photographic decoration of the second column instead of the entire second column to skim some bytes. The images are the exact size as shown and in the smallest format I could make them while keeping quality. The client decided that he wanted the website to be under 200 K. I am still finessing it. It’s at 196 K now. I’m still working on the buttons. I’m considering ditching the CSS sprites to keep down file size.

(Earlier Post Relating to This Project)
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
Be an Inceptor

October 6, 2012
Today, Tom played the TED talk by Rory Sutherland, Life lessons from an ad man. In many of his other genius observations, he noted that Shreddies was able to change perception of their product through this humorous campaign.

“The interface fundamentally determines the behavior.” -Rory Sutherland

in·ter·face [n. in-ter-feys; v. in-ter-feys, in-ter-feys] noun, verb, in·ter·faced, in·ter·fac·ing.

1. a surface regarded as the common boundary of two bodies,spaces, or phases.

2. the facts, problems, considerations, theories, practices,etc., shared by two or more disciplines, procedures, or fields of study: the interface between chemistry and physics.

3. a common boundary or interconnection between systems,equipment, concepts, or human beings.

4. communication or interaction: Interface between the parent company and its subsidiaries has never been better.

5. a thing or circumstance that enables separate and sometimes incompatible elements to coordinate effectively:The organization serves as an interface between the stategovernment and the public.

Interface is a fancy word. I daresay, I might have never known it unless I was in graphic design, specifically interested in Interactive (lately, anyways). I am happy to see the definition reflecting what I think is profound about the word: its relation to systems. Interface is the way we communicate to each other. I type in this blog to communicate my ideas to you. From my system of thought, to yours. The blog is the interface. Interface determines when a thing is accessible or confusing.

One of my favorite movies is Inception. The main character, Leonardo DiCaprio, leads a team of specialists to plant an idea in an heir’s mind. They affect that person’s behavior. The heir ultimately divides his inheritance and benefits the Inceptor’s client. As advertisers, or designers for advertisers (is there a difference?), we are also Inceptors. Our interface is not a dream, but a poster, or a billboard or a pop-up ad (ew… gross). And our ideas vary. Sometimes, they are “buy this” or “check out this” but as Tom Lenon (and Leo DiCaprio) says, the best ideas resonate emotionally.

That’s why there are so many funny ads. Sometimes things don’t have to be jokes to be funny. Sometimes, they just have to be a little incongruous, a little surreal to perk our heads up. Tom Lenon showed the class Chocolate Rain. Why is this youtube video so funny? Is it the repeating refrain or is it that Erkel-look-alike Tay Zonday has such a deep and polished singing voice?

There’s a few websites devoted to understanding the underlying reasons for why these things, memes, are so strong that they get passed from one person to another, infecting the culture. See Richard Dawkin’s book, The Selfish Gene for more information on what exactly a meme is. My favorite website for meme info is Know Your Meme. It’s our job as Inceptors to understand what is the best approach to appealing to an audience. It’s not enough for us to by advertising space, billboards and commercials. We have to get our ideas to stick.

By knowing your audience, taking the right approach, finding the right exposure, being sharable, you can be an unstoppable force in the meme pool. For good or for evil, it’s hard to say. Sometimes memes that were once helpful become harmful. As in Christopher Hitchen’s book, God is Not Great, he describes how being Kosher was just a way to check with authority if your food was good to eat. (Their ideas of nutrition were a little uninformed, but you get the idea.) The religion wraps good lessons in myth to reinforce itself. But, you betchya, the fear of God made society cooperate.

You might not be the next Joseph Smith, but you can influence people by inventing larger than life endorsers of your ideas. Tony, the Tiger may not have started any wars, but it sold sugar-covered corn. Yum.
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
An Afternoon Painting

October 5, 2012
An afternoon of painting with Mike O. He made a self portrait. I think he has a talent for rendering fabric. That’s not easy to do.
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
Advertising Analysis: Pop Chips as endorsed by Katy Perry

October 4, 2012
Advertising Analysis #1 Using Tom Lenon’s Advertising Concept Word List

Summary: (medium, typeface, etc.) Describe the thing.

Billboard in Capitol Hill, Seattle, last seen Monday, October 1st, 2012. Bold colors, sans-serif white font. Photographic approach.

visual method:
Language-pun
Type Plus Image
Celebrity endorsement
Alignment
Symmetry
Space

Analysis: What approaches? Audience?

Audience: young, culture-driven food product purchasers. Young women who are watching their weight, eating baked chips and are influenced by Katy Perry’s endorsement; PopChips is using the “glittering personality” appeal. A nod to the “pop” in the brand’s name, the brand using the popstar to seem hip and fun. The use of space, the bright red, the use of a geometric font, the styling is also nodding to the mod 60’s and vampire movie culture. The billboard is also using contextualism. A vampire billboard in the month of October is intentional, reminding the viewer of Halloween, a holiday specifically fun for the young crowd, involving dressing up and partying (perhaps at parties that serve chips?).

emotional/social/personal appeal

Identification
Sexual Attraction
Social Aspiration
Envy
Beauty
Personal Improvement
Fantasy Fulfillment

cultural resonance
Visual/ Verbal Cliche
TV/ Movie culture
Pop Music Culture
Age group culture
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
The Next Ten Years Poster

October 3, 2012
the next 10 years poster

For Self-Directed Project class, the first (not self-directed) project was to make a poster reflecting my next ten years. My initial idea was to make a bunch of origami fortune tellers, but I didn’t know how I’d glue them to a poster, so then I thought more about having the same kind of system, but as a flow chart. It was a lot easier than I thought. Flow charts are complicated. Don’t get me wrong. But, if you approach it a little bit at a time, it’s okay. I decided a pick A, B or C style would be ambitious but doable. I started by making the progression for “what if I answered all a’s.” And went on until a fantastic and glorious story about my future unraveled (I restore democracy). Then, I took care of the loose ends. The rest of the B or C lead to some okay or unsavory demise.

I wanted to illustrate each text box. I thought some of them would have very funny cartoons hidden like chocolates in an advent calendar (I was planning on making doors), but frankly, I ran out of time. I used InDesign to create the text. Creating linked frames so I could note which events were connected. Chris S. noted I could have used tables or cell styles. (I don’t know about that, but I am excited to learn them later in his class.) I used a simple square-ish grid 7 units by 4 units. I took a screenshot and made the map portion in PhotoShop. (For the different colored paths, I used color overlay which is a lot easier than switching the actual brush color— if you don’t know Ps, this isn’t for you.) I added some hand-drawn doodle things and a picture of me with my amazon smile. I don’t think the contrast is high enough on the image to notice the smile at first.

Screen Shot of poster in progress
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…
RG Phase 1: Wireframe Critique

October 3, 2012
Today’s critiques of html, wireframes and style tiles went fair enough. Minus points for me because I didn’t expand out my wireframes. I am so used to doing wireframes as device frames because everything leads out from links on the desktop wireframe. With mobile wireframes, it’s impossible and ill-advised to make everything “above the fold” (within the available screen). Here’s the mobile website expanded. Yes, it will be difficult to code the transition of the map rising to the top of the page for mobile, but I think it’s a critical consideration for user-centered design. The only time see a smart phone being critical is when driving ( I know, scary but unavoidable).

Phase 1 of Web ReDesign: (with *additions)

1. restructure information with user-centered considerations (e.g. if the user is using their mobile device to find the store or look up the store’s hours, I don’t want them to look any further than the homepage.) *Research the competitors What is the industry doing? What are the local guys down the street doing? Get user stories. Understand what they want from the site.

2. communicate style and function Create style tile this is a great way to contain the brand’s essence (colors, fonts, logos) but feel free to explore different layouts. *Annotate wireframes Pretend like you’re not going to be at the presentation. Have clear reasons and content. Consider what the call to action is. Is it reflected in your design?

3.wire-framing explore more efficient (and mobile friendly) layouts: *mobile should correlate with desktop You should see how the boxes flow into a (probably single column) mobile layout, leaving no div unaccounted for. For advanced coders: have good reasons for disappearing divs. mobile should be a smaller file size Though mobile should correlate with desktop, you should have mobile counterparts whether it’s smaller crops of desktop pictures or taking out the CSS sprites to decrease loading time.

5. understand mobile strategy this is important to know what your client wants/willing to pay for. More site options will cost more money. (e.g. this “client” Ravenna Gardens just wants two options: mobile and desktop) *Sometimes, the “lazy cheater” way is the best way. Each website project has different needs, budget, priorities and it’s up to you as the designer as to which corners to cut. Do you want an easy to maintain site? Do you want all content to be SEO-ized (Search Engine Optimized)?

(Earlier Post Relating to This Project)
sharing options:
Share
Tumblr
Print
LinkedIn
X
Reddit
Pinterest
Facebook
Email
Like Loading…