here's a nice straightforward and interactive infographic

also relevant to our discussion of innovation..

http://www.newscientist.com/blogs/onepercent/2011/01/-innovation-in-america-dashboa.html

a new collection of infographics

I found this new list of interesting infographics. Take a look at them... are they efficient or not? what kind of visual elements are being used in a good or bad way?

http://psd.fanextra.com/articles/30-really-informative-and-beautiful-infographics/

Infographic -- Patterns of state of the union speech

Another great work by the NYTimes.

http://goo.gl/LD10o

Check it out!

Design Critique

Hello,

Please read this little article...

http://thinkvitamin.com/design/the-art-of-the-design-critique/

It talks about giving and receiving feedback in a design project. I think it is easy to read and the info also applies to us. :)

thinking on creating an infographic based on comparisons...

This is another good example of an infographic that deals with comparative data.

http://trulia.movity.com/rentvsbuy/

Enjoy!

Awesome presentation creator tool!

I was at a club meeting recently and noticed that the presenter had a really interesting presentation form. She said she used Prezi.com. I haven't personally used it yet, but she said it's relatively easy to use as well as fun (and free). I think these are much more effective than regular powerpoint presentations because they zoom in for detail, and always zoom back out so the audience can see the big picture. There are some nice examples on the home page, as well as tutorials for using the site.

Prezi.com

Lecture 3 Notes

Framing, Hierarchy, and Layers 1/24/11

Framing

• Picturing objects
• Some elements related: cropping, borders, margins, and captions
• Affects how we perceive information
• Contain an image or a piece of it
• Can divide its image from its background

Cropping

• Helps redraw borders and alters the shape of original picture
• Changes scale of the elements, direction or form, or focus of the picture

Margins and Bleeds

• Margins

-affect the way we perceive content by providing open spaces around text and images
-provide a protective frame around contents
-provide space for other info

Framing text and images

• Adding text to a picture changes its meaning
• Text could be subordinate or dominant to a picture
• Text can respect or ignore the borders of an image

Borders

• Frontier between inside and outside

Hierarchy

• Marks the order of importance of different elements in the same space
• Conveyed visually through variations in scale, value, color, etc.
• We want visual order!
• Uses clear marks of separation to signal a change from one level to another

Basic Typographic Hierarchy

• Example: table of contents
• Provides a structural picture
• Helps provide an image of how the book is organized
• Can use alignments, leading, indents, type sizes and colors

Layers

• Simultaneous overlapping components of an image or sequence
• Used in many media programs
• Maps use overlapping layers to associate and separate different levels of data
• Printing techniques use multiple layers of ink to build a single image

Transparency

• Used to create dense, layered imagery built from veils of color and texture
• Any surface in the physical world is transparent or opaque
• Photoshop allows you to adjust the opacity
• “Transparent” image or surface generally opaque to some degree
• Transparency and layers are related phenomena
• Viewer perceives the transparency of one plane in relation to a second one
• Builds complexity

Corporative infographic

Check this out!

http://mashable.com/2011/01/24/foursquare-6-million-infographic/

really interesting! nice use of color, hierarchy and scale.

Another cool infographic, check it out!

Hi!

Another nice infographic... Why do marriages fall apart?

http://www.fastcodesign.com/1663044/infographic-of-the-day-why-do-marriages-fall-apart

Enjoy! :)

Interesting infographic

Hello!

First of all, thanks for all the post!!! All of them are really interesting and useful!

I found this infographic. I think is visually interesting and fun.

http://grasshoppergroup.com/wp-content/uploads/2011/01/AwesomeEvolutionoftheInternet.jpg

Gaby

Lecture 2 Notes

LECTURE 2 01/19

TEXTURE, COLOR, FIGURE/GROUND

TEXTURE

- add richness to design

- tells a lot about the object – show don’t tell

- creates a mood

- can add contrast/detail/surface quality

- using opposites (contrast) amplifies each texture

PHYSICAL

- everything you touch has texture

- tactile sensation adds more to visuals

- different materials reflect different amounts of light (glossy/matte)

VIRTUAL

- optical effects of elements in graphic

- many ways to create texture (pictures, drawing, on the computer)

CONSIDER – carbonica website, Van Gogh, textual images, concrete

COLOR

- surfaces absorb certain light waves and reflect others

- color is pretty routine in our lives

- infinite amount of different colors

PERCEPTION

- color is relative to the viewer

- surrounding colors can influence look of other colors

- color depends on the amount of light

- hue/saturation/intensity/tint/shade/value (p. 74 in textbook)

COLOR PRODUCED BY LIGHT (RGB)

- red green blue mixed to white

- real life and on a screen – computer, tv

- additive – you add them together to get other colors

PIGMENTATION (CMYK)

- cyan, magenta, yellow mixed to black

- the colors you deal with when printing

- subtractive

COLOR WHEEL

- primary colors – red, yellow, blue

- secondary colors – orange, green, purple

- tertiary colors – blends of primary and secondary

- complimentary colors – opposites on wheel

- analogous colors – close by on wheel – similar

FIGURE/GROUND

- the relationship between figure and the background

- a.k.a negative and positive space

- separation and contrast

- background is active, consider it

3 MAIN STRUCTURES

- stable – figure stand clearly apart from background

- reversible – pos. and neg. elements attract equal attn.

- ambiguous – challenges viewer to find focal point

CONSIDER – optical illusions where the elements compete for your attention, maps

NOTE – begin thinking about first project, what kind of things interest you and what kind of things would be visually compelling, also DON'T FORGET letterform abstraction project due on Monday

50 Great Examples of Data Visualization

Interesting Website

Infographic from Video

I'm not sure if this is the exact same graphic mentioned in "Journalism in the Age of Data", but it is in the same style. I wanted to explore it further, due to the questions raised about it in the video.

http://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.html

Tutorials for Illustrator

The Adobe website has some cool tutorials, in case you're new to Illustrator like me! I also found this website that looks promising.

http://www.ndesign-studio.com/tutorials

Paint Sculptures

So..this isn't exactly an infographic or anything relating to data visualization, but it's so incredibly cool that I had to share it with someone :)

Paint Sculptures

Ted talk using infographics: Changing Education Paradigms

http://www.ted.com/talks/ken_robinson_changing_education_paradigms.html

funny graphic design

funny

Interesting Site With Infographics

http://www.mikewirthart.com/?cat=3

Mike Wirth is a designer, educator and artist, who specializes in information design and visualization. Mike holds a Master of Fine Arts degree in Design and Technology from Parsons School of Design and a Bachelor of Fine Arts degree from Long Island University in Digital Art and Design. Currently, Mike is an Assistant Professor of Art and directs the New Media Design major at Queens University of Charlotte, in North Carolina.

A few notable exhibition spaces include: Rockefeller Center and the Chelsea Art Gallery in New York, NY, Split New Media and Film Fest in Split, Croatia, The WRO Wroclaw Media Art Biennale in Wroclaw, Poland, and The Institute of History and Art in Albany, New York. In 2010 Mike was a featured artist at the inaugural TEDxCharlotte conference. Mike has won two awards for his historical documentary about the language of gesture, including “Best Short” and “Official Selection” at the Ed Wood film festival (2004 Albany, NY) as well as “Official Selection” at the DigIt New Media Fest (2005 Narrowsburg, NY).

Professionally, Mike has operated his own freelance design business since 2000, during which time he has worked on unique projects with notable clients, including: Mozilla, Lookout Mobile Security, Hubspot, Siemens Building Technologies, Anheuser Bush, John F. Kennedy Center, PBS via Interactive Knowledge, Pints for Prostates, York County Museum, Lightfactory Museum of Film and Photography, ESPN-Outdoors, Columbia University Teachers College.

In 2009 Mike was a part of a research project called Dance.Draw, that received a National Science Foundation Creative IT grant ($250K.)

In 2010 Mike and Dr. Suzanne Cooper-Guasco took home a $5K first prize in the Sunlight Foundation “Design for America Competition”. Their “How Our Laws Are Made” infographic took top honors and has been featured on HuffingtonPost.com, WashingtonPost.com, TheAtlantic.com, and Comedy Central.com.

Lecture One

Point, line & plane

• Kandinsky | A line is the track made by the moving point. It is created by movement-specifically through the destruction of the intense, self-contained repose of the point.
• Point, line & plane are the building blocks of design. From these elements, you can create images, icons, textures, patterns, diagrams, animations, and typographic systems.

Point

• Marks a position in space
• Pair of x and y coordinates.
• It has no mass at all. Graphically, however, a point takes form as a dot, a visible mark.
• A point can be an insignificant fleck of matter or a concentrated locus of power.
• A series of points forms a line. A mass of points becomes texture, shape, or plane. Tiny points of varying size create shades of gray.
• In typography, the point is the period- the definitive end of a line.

Line

• A line is an infinite series of points
• Geometrically, a line has length, but no breadth.
• Is the connection between two points.
• Is the path of a moving point.
• Can be a positive mark or a negative gap.
• Can appear at the edges of objects and where two planes meet.
• Can exist in many weights, thicknesses, and texture.
• When a line reaches a certain thickness, it becomes a PLANE.

Plane

• Flat surface, extending in height and width.
• A place is the path of a moving line or a line with breadth.
• A line closes to become a shape, a bounded plane. Shapes are planes with edges.
• In vector-based software, (Adobe Illustrator) every shape consists of line and fill.
• A plane can be parallel to the picture surface, or it can skew and recede into space.
• Ceilings, walls, floors, and windows are physical planes.

Space and Volume

• A graphic object that encloses 3D space has volume. It has height, width, and depth.
• A sheet of paper or a computer screen has no real depth, so volume is represented through graphic conventions.
• Linear perspective simulates optical distortions, making near objects appear large and far objects appear small.
• The angle at which elements recede reflects the position of the viewer (eye level)
• Axonometric Projection

o Depicts volume without making elements recede into space.
o Does not reflect the position of the viewer

Rhythm & balance

• Balance

o It is a fundamental human condition: we require physical balance to stand upright and walk; we seek balance among the many facets of our personal and professional lives; the world struggles for balance of power.
o In design, balance anchors and activates elements in space. Relationships among elements on the page or screen remind of physical relationships
o VISUAL BALANCE

• Occurs when the weight of one or more things is distributed evenly or proportionately in space.
• Like arranging furniture in a room, we move components around until the balance of form is suitable.

o Symmetrical design is inherently stable. (Taj Mahal)
o Asymmetrical designs are generally more active than symmetrical ones.
o Designers achieve balance by placing contrasting elements

• Repetition & change

o Famer’s fields, cars in a parking lot…repetition is an endless feature of the human environment.

• Rhythm & time

o Pacing

• Content can be distributed across the page or across many pages.
• In a one-page design, a sequential design must possess an overall coherence.
• All the design elements are places with an intention, to create focal points and create a visual pace.
• Underlying grid system helps bring order to a progression of pages.
• Key: an element of surprise and variation is important to keep interest.

Scale

• Scale is relative

o A graphic element can appear larger or smaller depending on the size, placements, and color of the elements around it.

• When elements are all the same size, the design feels flat. Contrast in size creates tension and depth/movement.
• Objective | literal dimensions
• Subjective | scale refers to one’s impression of an object’s size.

From Mashable... 19 best infographics of 2010

Hello!
Check out Mashable's list of the 19 best infographics of 2010.

http://mashable.com/2010/12/27/best-infographics-2010/

Gaby