TED talks and Design

Stefan Sagmeister: Happiness by design

Stefan Sagmeister: 7 rules for making more happiness

Rory Sutherland: Life lessons from an ad man

 

Butterfly Effect Logo

Assignment: Design a logo to represent the Butterfly Effect Program at LFAS. 

Current Butterfly Effect Logo

First consider why it should be changed. What parts of the current logo works? And what parts don't represent the program? What does it communicate? What could this stand for? What would work for the logo, what sort of image would better communicate the Butterfly Effect program?

Some information about the program:

Butterfly Effect is a global, cross- curricular community where students work collaboratively to guide their own learning and support the learning of others.

The name, and philosophy of Butterfly Effect, comes from chaos theory, which states that a small change in one system can result in large differences in a later state. Butterfly Effect students move beyond school curriculum to discover and research areas about which they are passionate.

Students share inquiry based projects online with the support of mentors and peers from other schools, and countries. We enlist engineers, historians, physicians, chefs, artists, and other global professionals to support and guide student learning. This provides students in Canada and Kenya the rare opportunity to exchange ideas with students and professionals in other countries.

The Butterfly Effect Website:

http://butterflyeffect.hoop.la/pages/welcome

The Butterfly Effect Definition:

Butterfly Effect

The scientific theory that a single occurence, no matter how small, can change the course of the universe forever.

1. A man travelled back in time to prehistoric ages and stepped on a butterfly, and the universe was entirely different when he got back.

2. The flap of a butterfly's wings changed the air around it so much that a tornado broke out two continents away. 

Step 1: Research the butterfly effect theory and the program. Truly understand the essence of the Butterfly Effect. Make some notes in your journal/blog.

Step 2: Find visual examples and ideas that may work for the concept- Butterfly Effect.

Step 3: Re-imagine/combine visuals to create something new and appropriate. Make some quick sketches of ideas either on paper or digitally.

Step 4: Bring your ideas to computer. Take your sketch and simplify your idea and break it down to the simplest components. Try 10-20 different variations of your idea and try a few different ideas. Step 5: Post your ideas to your blog and to the share folder.

Evolution of a Logo

Logo Development
Before you further develop your logo, read through the following websites:

Logo Definition
In your blog, briefly define what a logo is.

How to Design a Logo
Then list and define the #2- 5 Principals of Effective logo design.
Compare the three logos and their effectiveness in section #3- Successes and Mistakes.

View the following links and take note particularly the note the evolution of Olympic logos. Notice how they continue to be simplified; the lines, shapes, colours are reduced to the most simple possible. Logos are like poetry, they say the most with the least amount of marks made.

Evolution of Pepsi and Coca-Cola Logos
Olympic Logos

Post the definition and logo design tips to your blog.

The % below identifies the percentage of these 50 brands that hold to this view:

• The name does not describe the product sold (94%) (ie. in most cases a logo is used to identify a company, not describe what it does.)
• The by-line tag is not included in the logo (90%)
• The font style is clean and clear (84%)
• The logo design uses one colour only (74%) (white & black not counted as a colour)
• The logo design uses letters only without the symbol (74%)
• The logo design is a made-up name or ACRONYM (72%)
• The logo design is rectangular in shape (66%)
• The logo design is one word only (62%)
• The logo design includes the trademark symbol (54%) and is placed in the top right (48%)
• The name is 6 letters or less (52%)
• The name uses upper & lower case (44%) (excluding ACRONYMS)
• The background is filled and solid. (52%)
• The pronunciation includes three sounds/syllables (44%)
• The predominant colour base is blue (40%)

.

Logo Research

Logo research assignment: Find 5 symbolic logos (not with text) and post them to your blog.

• Describe the image/logo and any visual clues. 
• Explain what the company does/produces/sells. 
• Identify how the image represents the company. 
• Then evaluate the logo and it's effectiveness in representing the company and the products.

 

Personal Logo 2- Simple Symbol

Simple Symbol Logo Design to Represent You:

1. Write a list of your attributes/personal qualities.
2. Find visual examples that represent you to get some ideas.
3. Choose one or two that works for you.
4. Trace or draw, scribble, and simplify the image.
5. You could form your letters from previous assignment into something that visually represents you, or create a simple line drawing.  
6. Simplify-minimize-develop ideas-add-subtract-design and redesign... Your logo should be the simplest rendering of the image, could be just about energy or your attitude.
7. Try 10 or more different variations of your personal logo. Try to simplify each with design, but make sure you communicate the basic essence of who you are somehow and keep it simple. When you finish your 10 logo variations, post them on your blog.
8. Try 10+ different variations.

Abstracting a Letter in Illustrator

Explore the physical shapes of letters by abstracting a letter (basically blow up a type face).

• First set-up your page 8.5" x 8.5" square.
• Then select the "T" tool,
• Adjust the font to something Sans Serif, or a simple serif.
• Set the colour to black (it is the default).
• Adjust the size to fit whole page or beyond (each font responds differently in size).Use the scale tool to enlarge the font to extend beyond the print borders, size and the rotate to turn it, but don't flip or reflect it or stretch, or skew. 
• If it doesn't get large enough, then try to object>create outlines and then scale your letter.
• Abstract the letter so that you can barely recognize the letter, but retain the basic qualities of the letter to be able to identify it (with work). It sounds easy, but it is quite challenging to keep 'em guessing.
• Save As "AbstractLetter1.ai" 
• Then File> Save for Web and Devices- Select jpg and maximum quality.

Reverse your text and background so it is white text and background is black and letter is mirrored.

• Add another layer for the background
• Use the square tool and draw a background across the whole doc
• Select black for the fill.
• Select the letter using the "T" tool to  
• Then turn the fill to white and stroke to black.
• Use the reflect tool
• Flipped so it could be read in the mirror (if it wasn't abstracted).
• Save As "AbstractLetter2.ai" 
• Then File> Save for Web and Devices- Select jpg and maximum quality.
•  Post both Abstract Letters to your blog.
• Then print out each letter. We will tack them on the board and have a guessing game.

Self-Evaluate your Font

Post your font to your blog and answer the following questions:

1. What sort of personality does your font have?
2. How does this font represent you?
3. Where could your font be used? What sort of document? What will it say? What audience?
4. Title your font in a descriptive way,  what would you call it? Type your font title using the font and post it to your blog. Post Your whole font family.

Evaluate your font:

1. Does your font family have a familial resemblance [ie. a-c-e-o have similar bowl sizes, b-d-p-q, have similar bowl sizes and stem sizes, the stems connect to the bowls in a similar way, h-m-n the shoulders are similar, stem sizes are the same through out]. Use some of the terminology to describe and analyze. /10 marks
2. Is your font original? Does it have a resemblance to another font?    /5 marks
3. Does it reflect you?   /5 marks
4. Lower, uppercase, special characters are included in your font family.    /10 marks
5. Each letter/glyph has been placed on a glyph grid and converted to a type-able font. /5 marks

Total /35

Your Personalized Font

Once you have sketched out the basic outline of your font idea,

• Scanned your font and placed it into Adobe Illustrator.
• Form your font family in Illustrator- using the pen tool. 
• Make sure to include Upper and Lower case letters, punctuation and special characters too.
• Group letters if there are disconnected parts- You will need to Shift select all parts to each letter and then Object>Group your letters to connect all parts to each glyph. 
• We are going to use this font editor/creator: http://www.myscriptfont.com/

Here are other font creators/editors- some cost money, some don't:
http://fontforge.org/
http://www.fontlab.com/

Post your finished font alphabet onto your blog. Create a name for your font.
Due Friday, Oct, 16

A Visit from the Art Institute of Vancouver

The Arts Institute came to visit today
https://www.artinstitutes.edu/vancouver/

Typography: How to Design Your own Font

1. First doodle out ideas on paper. Experiment with ideas.
2. Designing certain characters first can help set the style of your typeface and may be used to bring the other characters into harmony. Often called 'control characters', in a lowercase Latin typeface these would be the n and o, and in the uppercase, H and O are often used. 
3. Designing a sans serif typeface can be more challenging for beginners, because the features that provide these typefaces with their identity are much more subtle.
4. Sketch out your full font family- complete alphabet including numbers, commas, period, semi-colon, colon,  &@ $, exclamations etc. 
5. We will be scanning fonts next class and then redrawing them in Adobe Illustrator. Good luck.
    

Creating your Self-Portrait Font

Now it is time to create your own font. You are the Font Designer:

Font related You Tube videos:
Font Design
Interview with Font Designer Steve Matteson

Some fonts to inspire:
Da Fonts
Urban Fonts

Create a font that has something about you; a self-portrait font.

1. First write a few things about you maybe use your ideas from your banner exercise that could inform your self-portrait font. 
2. Then doodle: pick up a piece of paper and a pencil and sketch out an alphabet, or doodle using Illustrator. 
3. You can start by typing out an alphabet and morph it into something that resembles you somehow. or scan your sketches and trace your font. 
4. Make sure your font is legible, you must be able to recognize the letter forms so that you can write with it.

Introduction to Illustrator

Pen Tool Basics

Basic Pen Tool Tutorial 
This tutorial is about drawing with the Pen tool. The Pen tool is Illustrator’s workhorse. It takes time to learn how to use, but is one of the key drawing tools in Illustrator. The best way to learn the Pen Tool is to trace over sketches. Before we get to that, this is a basic overview of the pen tool.

Before you start using the Pen tool, you’ll want to set your colors. Illustrator has two color options the Fill color (the color inside a shape) and the Stroke color (or the outline color). I like to draw with a Stroke color and no Fill color. You can change the colors of the Fill and Stroke on the Toolbar using the Swatch palette. To get the Swatch palette, go to Window > Swatches.

After your Swatch palette is open, click on the color you want. I chose black. Notice you are editing either the Stroke or the Fill based on which one is on top on the Toolbar. To edit the other one , click on the one underneath (either the fill or the stroke). It will move to the front, then click on a swatch in the Swatch palette for that one. The white swatch with the red line through it is no color.

The pen tool works by placing anchor points down and drawing lines in between them. Click on the artboard (the area of the file you draw on) with the pen tool selected. You’ll notice a little blue point appears.

Now click on another place on the artboard. Another point appears and a line is drawn between the two points.

Next, make a third point.

Finally, conect the third point to the first. To do this you’ll need to click on the original point. Hover your tool tip or mouse pointer over the original point. You’ll know you’re over the point when a small circle appears next to your pen tool, then click on the point. Your line or path is closed. Congratulations, you have just made a shape with the Pen tool. Look out Picasso! You’ve created a lopsided triangle.

Let’s make a curved line now. Make your first point. Then, make your second point, but don’t release the mouse. Instead, drag the mouse downward or upward slowly. You’ll notice the line starts to curve. When you get the curve you want, release the mouse button.

Now make another point. You’ll notice Illustrator makes a reciprocal curve.

Let’s say you aren’t happy with that curve. You can go to Edit > Undo Pen to delete the last step. Or maybe you change your mind, go to Edit > Redo Pen and it is back.

That curve still doesn’t look right to you, so let’s manually adjust it. Go to Toolbar and select the Direct Selection tool (it’s the white arrow).

You’ll notice that whenever you make a curved line it has a little blue handle (or other layer color) that comes off of it. You can use this to adjust the curve. Click and grab the point at the end of the handle and move your mouse around to adjust the curve. Once you get the curve right release the mouse button.

After all that, you still hate your curved line, so let’s delete it. Select the Selection tool, the black arrow on the Toolbar and click on your curved line. Then hit Delete on the keyboard. It should be gone. You can always Undo it if you want it back. To make your life easier, I have a list of keyboard shortcuts for the Toolbar tools here.

Finally, let’s make a line that curves then goes straight. Make a curved line like you did before.

Instead of making another point, click on the Direct Selection or the Selection tool and deselect your line. To deselect your line, just click on a blank spot on the artboard using one of the Selection tools. A good trick to switching between the Pen tool and your last used Selection tool is to hold down the Command (Apple) key on a Mac or the Control key on a PC. Try it out. Select the Pen tool on the Toolbar. Now hold down the Command/Control key. You’ll notice the tool tip change from the Pen to the Selection tool.

Back to your curved line. To restart drawing on the same line, hover your mouse over the end point like you did when you were closing a shape or path. This time instead of a circle beside the Pen tool tip, you’ll see a slash mark. This means you’re over the point. Click on it and then make your next point and your line will continue. You should have a line that curves then goes straight.

Pen Tool Assignment:
Try a tutorial on how to draw curves in the "Share" folder on the school network. Save it to the share folder with your name.

Morphing a Letter

Direct Selection Tool

1. Choose a letter simple sans serif font first Letter of your first name, or last name.
2. Then make the letter a graphic object by:
3. SELECT the letter with the SELECTION TOOL.
4. Then go to OBJECT> CREATE OUTLINES, ~or EXPAND.
5. Use the DIRECT SELECTION TOOL to reform the letter style. Click on points to re-shape10 times to create another shape/image.
6. With each reformation, save the change and then select the form, 
7. COPY and PASTE the new shape to make the next change 
8. Make 10+ variations of the letter. 
9. This is a doodling exercise; be creative, and remember to save each different steps.
10. To upload your morphed letter to your blog, FILE>EXPORT> as a jpeg. 
11. Then go to Google Chrome or FireFox (not Internet Explorer) and 
12. Begin a new post 
13. Upload your morphed letter as an image to your blog.

Typography- Decorative/Ornamental Typefaces

In typography, a typeface (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts). (e.i. "ITC Garamond Bold Condensed Italic" is a different font from "ITC Garamond Condensed Italic" and "ITC Garamond Bold Condensed," but all are fonts within the same typeface, "ITC Garamond." However, ITC Garamond is a different typeface than "Adobe Garamond" or "Monotype Garamond.") There are thousands of different typefaces in existence, with new ones being developed constantly.

Script typefaces

Script typefaces imitate handwriting or calligraphy. They do not lend themselves to quantities of body text, as people find them harder to read than many serif and sans-serif typefaces; they are typically used for logos or invitations. Examples include Coronet and Zapfino.

 

Ornamental typefaces

Ornamental (also known as novelty or sometimes display) typefaces are used exclusively for decorative purposes, and are not suitable for body text. They have the most distinctive designs of all fonts, and may even incorporate pictures of objects, animals, etc. into the character designs. They usually have very specific characteristics (e.g., evoking the Wild West, Christmas, horror films, etc.) and hence very limited uses..

 

 

Mimicry typefaces

A group of decorative typefaces, sometimes called simulation typefaces, have been designed that represent the characters of the Roman alphabet but evoke another writing system. This group includes typefaces designed to appear as Arabic, Chinese characters, Cyrillic, Indic scripts, Greek, Hebrew, Kana, or Thai. These are used largely for the purpose of novelty to make something appear foreign.

Blackletter typefaces

Blackletter fonts, the earliest typefaces used with the invention of the printing press, resemble the blackletter calligraphy of that time. Many people refer to them as gothic script.

 

Gaelic typefaces

Gaelic fonts were first used for the Irish language in 1571, and were used regularly for Irish until the early 1960s, though they continue to be used in display type and type for signage. Their use was effectively confined to Ireland, though Gaelic typefaces were designed and produced in France, Belgium, and Italy. Gaelic typefaces make use of insular letterforms, and early fonts made use of a variety of abbreviations deriving from the manuscript tradition. Early fonts used for the Anglo-Saxon language, also using insular letterforms, can be classified as Gaelic typefaces, distinct from Roman or Antiqua typefaces. Various forms exist, including manuscript, traditional, and modern styles, chiefly

The art and craft of designing typefaces is called type design. Designers of typefaces are called type designers and are often employed by type foundries. In digital typography, type designers are sometimes also called font developers or font designers.
Every typeface is a collection of glyphs, each of which represents an individual letter, number, punctuation mark, or other symbol. The same glyph may be used for characters from different scripts, e.g. Roman uppercase A looks the same as Cyrillic uppercase А and Greek uppercase alpha. There are typefaces tailored for special applications, such as map-making or astrology and mathematics.

Typography Assignment 5- Find 5 examples of decorative fonts for your "Font Library"

• Type out the font with the title of the font, then describe the qualities of the font, identify the decorative category, and explain where it would be most useful.
• Organize each font by category, you can design your font card however you wish.
• Post to your blog.

Typography- Serif

Learning just a little about the terminology will help you to have a greater appreciation for type; it will also help you to identify different typefaces and fonts — and that in turn will help you make better, more informed choices about the fonts you use.
Font Conference

One of the terms of type that most are familiar with is “Serif”. It is easily distinguishable from Sheriff — John Wayne has shot and killed several sheriffs; to the best of my knowledge, he has never out-gunned a serif. Serifs are often small, but they’re tough.

“What is a Serif?” 
it’s the curly bits at the ends of letters.

The origin of the serif can be traced back to ancient Rome. Before an Inscription was carved into stone, the letters were first painted on. Slightly wider sections form at the ends of brush-strokes. The stone carvers would faithfully carve out letters including the flares at the end of the strokes — so was born the serif.

The Latin alphabet that we still use today was created by the Etruscans and the Romans, and derived from the Greek. It had only 23 letters: the J, U and W were missing. The J was represented by the I, the U was written as V and there was no need for a W. The story of the Z is particularly interesting.
In the third century BC, the letter G (a variant of C) was added; Z was borrowed from the Greek, then dropped as Latin had no need for it — perhaps at the behest of the Roman censor Appius Claudius; G took its place in the line-up, until the first century BC, when the Romans decided they needed the Z for borrowed Greek words (when Greek literature became the vogue), they re-introduced it, and placed it at the end of the alphabet, where it remains to this day.

Trajan, the Movie Font

The word "serif" comes from the Dutch schreef, meaning “wrote”, the term “sanserif” pre-dates serif, so sanserif simply meant without serif. Japanese, uruko, means fish scales, and in Chinese the term, translated literally into English, comes out as “forms with/made with legs”.

There are numerous kinds of serif. The two main types are Adnate and Abrupt.
The Adnate serif is more organic. Notice how the serifs join the the stems via a curve;

the Abrupt Serif — as its name suggests — is squarer and more rigid, and doesn’t flow into the base letterform; the slab serif is a good example of an abrupt serif. It’s square.

More Serif Types

Typography Assignment 4- Find 5 examples  of serif fonts for your "Font Library". Type out the font with the title of the font, then describe the qualities of the font and where it would be most useful.

Typography Blog

Publish your Banner

After you create a textured text, and you are happy with the overlapping texture, we are going to experiment with the text tool and positive - negative space on your banner.

First you have to flatten the image. LAYER>FLATTEN

Select an area with the TYPE TOOL, select the font, size, alignment, etc.  Type your name or the title of your blog with the Horizontal Type Mask, or the Horizontal Type Tool.

Crop your banner.

When you are satisfied with your design, SAVE AS your file as a  PSD (Photoshop Document).

Use the CROP TOOL to crop the banner to a size that works in Google. WIDTH: 1000px HEIGHT: 180px RESOLUTION: 72dpi in the option bar at the top of the file.

LAYER> FLATTEN your file and then SAVE AS a JPG. (Joint Photographic Experts Group). You cannot post PSDs to your blog. 

Once you are finished, add your banner to your blog. In Settings>Layout>Heading (Edit)> Browse for your file.

Typography- Sans Serif Helvetica vs. Arial

The term Sans comes from the French word sans, meaning "without". Sans-serif fonts tend to have less line width variation than serif fonts.

In print, sans-serif fonts are used for headlines rather than for body text. The conventional wisdom holds that serifs help guide the eye along the lines in large blocks of text. Sans-serifs have recently acquired considerable acceptance for body text.

Sans-serif fonts have become the most prevalent for display of text on computer screens. This is partly because interlaced screens have shown twittering on the fine details of the horizontal serifs. Additionally, on lower-resolution digital displays, fine details like serifs may disappear or appear too large.

Arial and Helvetica — these two faces are often confused, and often the subjects of mistaken identity.

Helvetica

Designed in 1957 by Max Miedinger, Helvetica’s design is based on Akzidenz Grotesk (1896), and classified as a Grotesque or Transitional san serif face. Originally it was called Neue Haas Grotesque; in 1960 it was revised and renamed Helvetica (Latin for Switzerland “Swiss”).

Helvetica

Arial

Designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype. It’s classified as Neo Grotesque, was originally called Sonoran San Serif, and was designed for IBM’s bitmap font laser printers. It was first supplied with Windows 3.1 (1992) and was one of the core fonts in all subsequent versions of Windows until Vista, when to all intents and purposes, it was replaced with Calibri.

If Arial is a rip-off of Helvetica, then Helvetica is a rip-off of Akzidenz Grotesk; or we could simply say that they are both rip-offs of earlier Grotesque faces.

Typography Assignment 1- Create a "Font Library" in a blog post. Find 5 examples of sans serif fonts to add to your "Font Library. Name, annotate [compare and analyze the similarities and differences], then consider list 2-3 graphic designs where the font could be used [be specific]. [Due Wednesday].

More Photoshop Tricks [Adding Filters to your Banner]

So we have created the Wordle with the 100 words about yourself to create your banner. Now we are going to experiment with some filters that may emphasize something important.
> SELECT a LAYER where the image that you want to effect is on.
> Use the MARQUEE TOOL [top of your tool bar] to SELECT a part of your image.

> FILTER try a few
Blur-Gaussian Blur
Stylize- Find Edges
Brush Stroke- Accented Edges

Photoshop/Wordle Banner

• We are going to personalize your blog some more. 
• Using Internet Explorer
• Open Wordle: http://www.wordle.net/ 
• Type or copy/paste the write-up about you into the "CREATE".
• Try different colours, fonts, layouts, arrangements.

[There are other free programs that create a shapes from a word group: http://www.tagxedo.com/ BUT you need a Silverlight for it to run and it won't work for the banner, but it is good to know about. A fun, quick and easy graphic idea organizer. And https://tagul.com/ that you can use a photo for the shape, but you need  to sign in with an account.]
For this assignment, I would rather you start simple with WORDLE.

• Once you have your Wordle the way you want it, then Save as "PNG" into your file.
• Then open your Wordle it in Photoshop.
• Open the >WINDOW menu, click on >LAYER to open layer pallet.
• Open the >LAYER pop down menu on the top of the window> DUPLICATE LAYER.

Lower the opacity of the new layer copy.

Then use the "MOVE" tool on the tool bar to shift, spin:

• 

You can play with layer styles, colour and filters