Saturday, November 17, 2012

AIGA The Lunch Box








The Lunch Box with AIGA Seattle. What a delight! Lunch at Deloitte Digital. Attendees were given a tour and munched on lunch while the presenters gave a PowerPoint overview of the company. The presentation introduced Designing for the Cross-Channel Experience, followed by Q&A that included a discussion of their agile scrum process.

Seattle Interactive Conference

The Seattle Interactive Conference (SIC) was held at The Conference Center in Seattle on Oct. 29-30, 2012. I attended on Oct. 30 as a volunteer, assisting the stage manager in one of the seminar rooms. Each seminar was 50 minutes presented by speakers in the industry.  It was the first time I've attended SIC and will definitely attend again.

Speakers in my room were: Cyrus Krohn of Crowdverb, Mel Carlson of Delightful Communications, Rob Salkowitz of MediaPlant, Ted Woodbery of UIEvolution, Susie Algard of OfficeSpace, and Kate Morris of Distilled. Each one of them shared their experiences, expertise and nuggets of knowledge of the industry. Many thanks to the speakers for their great performances and to organizers and people who made this conference happen.

BTW - the candy bar in the vendors' area was awesome!



Saturday, October 6, 2012

AIGA Into the Woods 2012

AIGA Seattle Into the Woods was held at Suncadia Resort in Cle Elum, WA. The resort area is in a beautiful, natural setting at the "heart of the Cascades." It ran from Friday, Sept. 28 until Sunday, Sept. 30. Workshops I attended included: "Bears Attack, "Info Visualization," and "Design Hike" - all quite relevant to my current education at The Art Institute program, Web Design & Interactive Media. There were some awesome, inspirational speakers: Scott Boylston, Thriving Through Sustainable Design; Karen Kurycki and Seth Johnson, Building and Running an Independent Creative Studio; David Sherwin, Design is Hacking How We Learn; Jeanette Abbink, From the Mind to the Eye to the Page; and, Howard Lichter from Nike, How Balance Nurtures Creativity. Below are my favorites photos from the event:

Monday, March 12, 2012

Linotype: The Film

I attended Lintotype: The Film in March 2012. The director did an outstanding job - first by explaining what linotype is and then introducing people who've worked on linotypes. I enjoyed hearing the word "typesetter" used, not only in the film, but among the people who attended. I started out as a typesetter doing Piggly Wiggly ads, Jacques Coustea booklets and much more.

The following Saturday I attended an open house that was mentioned at the filming. A fellow in Seattle has a Linotype in his garage and allowed us to view this marvelous machine in action. Such a delight! I did some typing on it, of course, and now have a line-of-lead type. Below are photos from the open house.









Slug of lead being melted.

Tuesday, March 6, 2012

Environmental Design

Arrows & Icons Magazine: Environmental Design is a field without borders, and is therefore commonly misunderstood. As a multidisciplinary profession merging so many different fields, it's easy to understand how anyone not directly involved would get confused. Environmental Graphic Design embraces many design disciplines including graphic, architectural, interior, landscape, and industrial design, all concerned with the visual aspects of way-finding, communicating identity and information and shaping the idea of place.


Society for Environmental Graphic Design
3M at Work (Sydney) Australian
The global community of people working at the intersection of communication design and the built environment. Building on 3M's collaborative work ethos, its technology innovations, and its leading scientists, THERE (Sydney) created an extensive environmental graphics program at the company's 8,000-sq.-meter Australian headquarters.


Microsoft CES Video Wall. Bryan Schaeffer, motion graphics instructor at AIS, was part of the design team of creating a marvelous interactive wall that people could walk through. In addition, multiple screens were built on a platform as a backdrop to Keynote speakers. The screens would display graphics related to the current discussion.


Microsoft CES Video Wall and Keynote in 43 seconds

Mural project for a garage at a private residence in Sydney, Australia. Design by Craig & Karl. Craig Redman and Karl Maier live on opposite sides of the world but collaborate daily to create bold work that is filled with simple messages executed in a thoughtful and often humorous way. They specialize in illustration and installation.

Tuesday, February 28, 2012

Infographic Hotlinks

Graphic Design Software and Skills:- beautiful Info-graphic2 thumbs up

Good Info-graphics: website dedicated to info-graphics. What works, what is sustainable, prosperous, productive, creative, and just. 

Data Driven Documents:  free JavaScript library for manipulating documents based on data.

Datavisualization.ch: showcases data visualization and is published by Interactive Things, a design and technology studio based in Zürich, Switzerland.

Four Ways to Slice Obama 2013 Budget Proposal: interactive info-graphic, published by the New York Times.

My preferred infographic software tools...
Stat Silk: free version available. Creates a Flash map but doesn't give access to Flash document, just swf file.
Tableau Public: Windows-only, worth taking a look at
Gapminder: interactive, motion chart. Free download, but must use their data sets.

Wednesday, February 22, 2012

Interactive Infographic Project Statement


Subject
The global decline of amphibians in relation to the world’s ecological footprint over the course of a specific time frame. The challenges confronting our global environment and the needs of the world’s human populations have never been greater; the future, quite literally, is in the balance. Every person on Earth deserves a healthy environment and the fundamental benefits that nature provides. But our planet is experiencing an unprecedented drawdown of these resources, and it is only by protecting nature and its gifts – a stable climate, fresh water, healthy oceans and reliable food – that we can ensure a better life for everyone, everywhere.

Objective: Activist
To relate to the public the impact of their lifestyle on a specific species. Your actions cause this to happen, make a change.

Client
Conservation International

Scope
Ecological Footprint encompasses carbon emissions as well as the consumption of food, fuel, wood, and fiber. It’s a measure of the area needed to support a population’s lifestyle. Land use for developments, crops, cattle grazing all create a loss of habitat as well as pollutants and carbon emissions. With our industrial evolution we’ve impacted the climate on other species. As earth stewards we must become activists to allow all species to cohabit the earth.

Content
Two graphs - ecological footprint and amphibian decline - are displayed interactively to show how the ecological footprint has impacted a specific species.

Destination and Format
Web/online; interactive piece (html or .swf)

Interactive Infographic Competitive Analysis

Visualizing.org had two examples that corresponds to the project I have in mind:
Our Planet in Ecological Debt by ChartsBin.com
Value of Nature - Ecological Footprint and Biocapacity by Jacob Houtman

Tuesday, February 21, 2012

Data Visualization Hotlinks

How to Make Information Graphics and Data Visualizationsthis is a really good site detailing the difference between information graphics and data visualization.How to create a visualizationData Visualization for non-programmers: Shows how to use Google docs spreadsheet to create a data-set and is a tutorial with downloadable files to follow along.Creating graphs in Illustratorhow to use the graph tool in Illustrator to create beautiful graphsCreate cool info-graphics: Digital Arts article by Wendy Ding, a freelance graphic designer. She details how she uses Illustrator to create an info-graphic.FlowingData: Visualization, Statistics, Design and Tutorials - three thumbs up!How to Create Outstanding Modern Info-graphics: - vector tuts +, a step-by-step tutorial using IllustratorInfo-graphic Designshas some beautiful examples10 Examples of Info-graphicsMetroBoston DataCommon: an example of government making use of data visualizationsVisualize This!: a book on data visualizationInformation is Beautiful: a site dedicated to data visualization

Environmental Design Hotlinks

Photos I've taken recently of way-finding in Seattle:





Wednesday, February 15, 2012

P2 Statement

Subject
Ecological Footprint (U.S. Totals, Washington state specific).
Objective: Activist/Advocacy
To educate the Washington state citizen on the impact of their lifestyle to the environment.
Ecological Footprint encompasses carbon emissions as well as the consumption of food, fuel, wood, and fiber. It’s a measure of the area needed to support a population’s lifestyle. When looking at data the U.S. has the highest ecological footprint so I’d like to focus on the U.S. and break in down to states and what elements are creating the high numbers.
Content
It will incorporate methods of transforming data into meaning found in The 48 design patterns: The Form of Facts and Figures. Ideally, you will frame these separate 'slices' of information in conjunction with each other, and in conjunction with images and illustrations germane to your topic.
Destination and Format: Web/online; interactive piece (html or .swf)


Unit 4 Hotlinks

The best tools for visualization
http://www.readwriteweb.com/archives/the_best_tools_for_visualization.php

Music map
http://www.turbulence.org/Works/song/gallery/gallery.html

Data mapping
http://www.exforsys.com/tutorials/data-mining/data-mining-stages.html

Unit 6 Hotlinks

Couldn't help but include this one!
http://www.mta.info/nyct/maps/submap.htm

Tokyo subway map, gulp, consider me overwhelmed
http://subway.umka.org/map-tokyo.html

Paris subway map, very easy to read
http://www.pixopark.com/paris_subway_map.php

A blog regarding data flow
http://www.brainpickings.org/index.php/2010/05/10/data-flow-2-book/

Unit 6 Reading Summary

Wow, this chapter was so much easier to read than Chapter 2! What a wonderful example to detail the thought process for a visualization model. I really appreciated the author's thoughtfulness and decision-making process on his Kickmap map of New York's subway. I've taken the subway in New York, but was fortunate enough to have a native New Yorker be my tour guide, no thinking on my part was necessary, thank goodness!

Include the essentials and Geography is about relationships: use easy references (like the Statue of Liberty) but don't include everything
Leave out the clutter: sometimes accurate depictions can be confusing, simplifying it can make for easier reference; i.e. crisscrossing of subway lines can be simplified to user routes
Color: good tool to use and helps user to easily identify
Prototype - try a version with everything on it and then eliminate
Different versions for different situations: airport maps come to mind with this - when in an airport's tram you don't need a whole map of the airport, just what concourse and main sections it stops at; conversely when navigating the concourses, an overview is good to get from one to the other, and a more detailed version when I get to that concourse.

Unit 4 Reading Summary

I found chapter two very difficult to read - style of writing was the problem I believe. However, I was able to gleam some information from it. The author's thought process, although lengthy, was a good review; as was the references to software - Excel and Photoshop. I especially liked the Excel formulas and anticipate using it at some point (most likely for the project 2).

Other information I took note of was:
  • Most visualization should have a goal or purpose and present data in a meaningful way - tell a story. Very few visualizations are just for show.
  • Question + Visual Data + Context = Story
  • Stacked time series
  • Good rule of thumb: to restrict a visualization to stating things that can be seen from the data alone and allow the users to draw their own conclusions (don't skew or mislead)
  • Maintain consistency when making data decisions and add a footnote to state said decisions
  • Visual hook: (I liked this term and analog) use something the users can relate to, i.e. continent maps, icons - makes it more likely that the audience will remember the visualization.
  • Reduce users comprehension time increases impact of the visualization (leave out the clutter)
  • Twist: (another good one) violating the norm (or expectations) of the users; i.e. making one continent smaller than actual size in comparison to another of unusual larger size
  • Maps: use .svg (usually found in Wikipedia commons) scalable vector graphic file
  • Map Visual Anchor: choose the largest measurement, open in Photoshop and use histogram to determine pixel size; and use that number in an Excel formula to accurately scale each element

Tuesday, January 31, 2012

P1 Progress

Unit 3 Hotlinks

Smashing Magazine Data visualization modern approaches
Web designer depot 50 great examples of data visualization

Examples of Data Visualization
GOOD water consumption infographic - one of many on their website.
GE Data Visualization

Unit 3 Reading Summary

Chapter 20: Beautiful Visualization
Visualization Indexed by Jessica Hagy

I really enjoyed the simplicity of this chapter. It contained simple graphics and easy to understand analogies. Interestingly enough, simplicity is one of the topics in this chapter that breaks down visualization.

There’s a difference between drawing and visualization. Drawing is the ability to translate scenes onto papers, like a still life or a bowl of fruit. Visualization, however, is the ability to put ideas onto paper – taking massive and/or complicated data and breaking it down to a concept that is recognized instantly. Ideas are concepts, theories, equations, opinions and processes.

The term “Visual Practitioners” struck a chord in me. In the years that I’ve done graphic design I’ve always felt that communication with the customer was important in order to “divine their message.” This is part of the progress via visualization, to think, show and share. An effective visualization may be impossible to describe but must be instantly recognizable. An image can set the tone of a visualization, when viewed the observer forms an instant idea based on their experiences. A good visualization enables and fosters connections and helps us communicate. A large amount of data presented to an audience will most likely not gain their attention, but a stunning visual can sell the idea. To this end a visual must be compelling - not only is it visually appealing but it has a message in it.

Visuals have been around from the early years of man starting with cave drawings. Humans communicate with visuals – body language, symbols to represent sounds. Certainly today we are a visual society, using emoticons and avatars and breaking information down to its simplest form to view on various media devices – smart phones, iPads, PowerPoint presentations, websites. Visuals connect, compel, and communicate. 

Wednesday, January 25, 2012

Tuesday, January 24, 2012

Unit 2 Reading Summary

Response to The Form of Facts and Figures thesis by Christian Behrens
Design Patterns for Interactive Information Visualization

Birth of Data Visualization Graphics
The reading began with the introduction of William Playfair, who was a pioneer of information design and data visualization. Playfair - like other pioneers of his time (Charles Minard, Harry Beck, Edward Tufte) - weren't artist but problem-solvers whose goals were to communicate complicated information to the general public. 

Introducing: Data-Ink Ratio
Edward Tufte introduced the concept of data-ink ratio. Data-ink ratio was used by Harry Beck when he created the London Underground tube map. Beck, an engineer, created electrical maps and used the philosophy, "reduce to the essential."

Design for All: Isotype Pictographs
Otto Neurath, an Austrian sociologist created Isotype pictograms. Neurath created a thematic map displaying the political situation in the U.S. in 1943. He used icons and color to simulate the number of senators in the United States. He wondered if images and graphic symbols could shape an international, intercultural graphic language that is understood regardless of origin or social class. Isotype, Neurath’s modular system of pictograms he developed together with his colleague and graphic artist Gert Arntz, became his greatest legacy and still represents the blueprint for pictogram systems all over the world. Otto provided the foundations for modern information design: the purpose to educate and to enlighten, to spread information among an audience as big as possible, to make information available, to make it accessible, to make information public.

Design Patterns
Design patterns was originally "coined" by Christopher Alexander, an architect and critic who envisioned a generic and modular “language.” In his book, “A Pattern Language: Towns, Buildings, Construction”, he provides 250 patterns that are self-contained brief descriptions of design problems and a possible solution that has been proven in the past. The graphic illustration and examples taken from practice becomes a collection termed "Pattern Language." All patterns are connected through hierarchical relationships, creating a higher order structure similar to single worlds of a language. Alexander created his theory for architectural reasons that tanked in the 1980s, but the theory has had a resurgence with the current use of web technology. Its a huge success with object-oriented programming languages such as Java, software development and engineering, and UI design. Martijn van Welie used the theory to create a collection for interaction design pattern library. I think its also evident in UX design, when surveys are done on topics such as the "Z" eye pattern.

Conclusion
Design patterns do not take charge of the look and feel of an application, or of the implementation of a specific corporate design. This is the job of a styleguide which is applied after the functional structure of the application has been determined.

Implementation
I found the reading helpful for our current project. It helped me to visualize how to present my information; for example, I had originally visualized having two maps to show the frog population - one map for the past and another map for the present population. Instead I'll use one map similar to Otto Neurath's U.S. political map - a frog icon to represent the frog populations and two colors, one for past populations and another color for current populations (see the last page of P1 sketches).

Unit 2 Reading Hotlinks

Design Pattern Libraries:
UI Patterns
Meaningful Transitions

Links related to Week 2 Reading:
50 examples of data visualization and infographics
Blog referring to Picasso and the data-ink ratio

Tuesday, January 17, 2012

Unit 1 Hotlinks

What is Beauty: Novel, Informative, Efficient and Aesthetic
Onextrapixel reiterates both the reading and the lecture from week 1. It includes:
  • A History of Infographics
  • Brief Description of Infographics
  • Designing an Effective Infographic
  • Great Examples of Infographics for Inspiration
  • Data Visualization Tools
  • Additional Resources

Learning from the Classics 
Chapter 1 has a paragraph that mentions two very well-known beautiful visualizations: Mendeleev's periodic table of the element and Harry Beck's map of the London Underground (tube map). Webdesigner Depot has two links that relate to these examples: Periodic Table of Typefaces and  Infographic Maps.

Unit 1 Hotlinks

Another cool info-graphic

 

Info-graphic example

P1 Competitive Analysis

P1 Information Sources

P1 Project Statement


COMPANY
Washington Department of Fish & Wildlife’s (WDFW) mission is to preserve, protect and perpetuate fish, wildlife and ecosystems while providing sustainable fish and wildlife recreational and commercial opportunities. Its vision is conservation of Washington’s fish and wildlife resources and ecosystems. WDFW defines “conservation” as: protection, preservation, management, or restoration of natural environments and the ecological communities that inhabit them; including management of human use for public benefit and sustainable social and economic needs.
(photo source: Oregon Zoo)

PROBLEM
As the state’s human population continues to grow, more fish and wildlife species have been put at risk by loss and fragmentation of critical habitat, disturbance and introduction of non-native species. The Oregon Spotted frog is a dying breed that once thrived in warm marsh waters from California to British Columbia, but has fallen prey to non-native bullfrogs, waterbirds, disease and development. Only one historically known population and two recently discovered populations are known to remain in Washington. An additional 20 extant populations are known in Oregon and one in British Columbia. Based on an assessment of presence at historical localities, the species is estimated to have been lost from 78% of its former range. However, considering the broad former range suggested by the historic data, it is likely the species has actually been lost from over 90% of its former range. Due to the limited number of extant populations and the inadequacy of existing protection for these populations, it is recommended that the Oregon spotted frog be listed as a State Endangered species.

OPPORTUNITY
To educate and involve the public in the conservation efforts for the Oregon Spotted frogs. Restoring native wetland species and protecting habitat over broad areas are examples of an ecosystem approach that WDFW and its partners are taking to help restore the state’s biodiversity.

SOLUTION
To promote conservation, engage the public and reach a broader audience with an interactive media presentation that outlines the need for conservation of Oregon Spotted frogs. The presentation can be accessed online; presented to WDFW’s potential partners; used by its partners; and, offered to schools for educational presentations.

The League of Moveable Type

"As designers on the web, we have a calling to raise the standards of the web-design world. We're not the only ones who value good design and it's time for the web world to catch up with it."

An Important Time for Design

Good article on the demand for web design.

Thursday, January 12, 2012

Font Alert

Calling all font lovers! Cool site for "old" fonts.