3 Environmental Design Links

http://www.wdwerks.com/portfolio/environmental/
http://jeremyvandermeij.com/category/environmental-design/ his senior project is sweet
http://www.studio7designs.com/

Week 7 Reading

Summary

Since the last set of reading was about wayfinding systems, this chapter about printed material and visual navigation, i felt there were many parallels between the two. When a reader is revisiting a magazine or referencing an archived paper, it makes it so much simpler if there are consistencies between them. The consistencies talked about were fonts, icons, sizes, grid systems, and other layout styles. These are the same issues and design problems that the wayfinding chapter sought to solve. The "Emotion + Information" graphic was sweet though, and presented an interesting approach to presenting information. But it's also just like a pretty wrapped present with coal inside, it looks good, but whats inside is still boring. Haha, i dont know if that worked like i meant it too, but it's funny to look back on.   

Links

Wayfinding Creative Brief

Wayfinding Good Practices

Week 6 Reading

Summary

This weeks reading was about wayfinding systems, designing for navigation, signage, and interactive spaces. The chapter examines specific companies and their roles in the creation of a wayfinding system for their clients. I was particularly drawn to the companies who did projects like my infographic final will be, which is a wayfinding system for Uwajimaya, a small shopping mall. Hunt Design did a wayfinding system for Fort Baker which will serve as important insporitation for the signage i plan to deploy to Uwajimaya. There are 2 pictures in particular: the map, and the vertical icon sign for trails. The vertical sign especially, since Uwajimaya is an Asian style market, the signage could read vertically. If done well, it would be instantly understood to all people. For the map, Mijksenaar designed a map for a public space in Amsterdam which has a similar shape and similar amount of stores inside of it, that it provides a great starting point template for information that i need to assemble.

Links

Wayfinding Comics: these were super funny!

Studio Hippy Wayfinding Portfolio Piece: their icons are sweet

class presentation link

click to view our project initial presentation

Week 5 Reading

Summary

I love reading about these preparatory methods for large application projects. I've referenced a site map, wireframe, and flowchart for a project tons of times! Seriously, if it's good and done right, it's a really quick way to answer a question about a feature, number of children, and other pieces of vital design and development information. These application revolve around content, and the content needs to be organized before it can be easily displayed and navigated. Taking these steps insures the proper delivery of the application.  

Links

Wireframes

Mindmap

Sitemap

Browser Engine Popularity - Info Graphic

http://argyleink.com/interactive/info-graphics/browser-engine-popularity.html

Week 4 Reading

1. Color - http://blog.urbanoutfitters.com/blog/category/berlin (visit different cities) also http://www.alaskansuntanning.com/
2. Type Styling - http://www.madebywater.com/
3. Weight and Scale - http://www.rehybrid.com/
4. Structure - http://www.plinestudios.com/
5. Grouping - http://www.atebits.com/
6. Graphic Elements - http://www.shoutdigital.com/
7. Imagery - http://www.gpacheco.fr/
8. Sound and Motion - http://www.scottpilgrimthemovie.com/avatarCreator/

8-Bit Adventure Time!

Collaborative Project 2 Statement

subject: farts!!


scope: Explain/Compare how foods affect or directly impact how much and the type of gas that your body produces. 


format: display different food groups and inform on how much they fart


resources: 



Create a fart: fart noises http://www.createfarts.com/
How to make your farts stink less http://www.ehow.com/how_2325192_make-farts-stink-less.html
Types of Farts: http://farts.typepad.com/farts/2006/11/fart_names_type_1.html



our other favorite ideas:
Brain Stats
Sleeping and Stress Stats
Video Game Bit Graphics History

Week 3 Reading

Summary - Chapter 2 of Information Design Workbook

The finish of this chapter was about creative briefs and imagining user personas. It provided a walkthrough of brainstorming content for creative briefs, which was awesome of course. A good picture was painted for who to assign certain tasks to, good places to start, and recommends that the client be there when conceptualizing all of this content. I have to make a special mention about an infographic on page 59, which showed a quick overview of the path and goals of a user. This totally changed my mind about any other ways i will ever consider conveying similar information. It was just so perfect. One of those first glances, 'i already understand where this is going' sort of thing. 

Super User Friendly

I stumbled on this while doing a little google searching around user personas, and thought that the huge amount of information it had collected was impressive and worth noting. I've got lots more reading to do, and this site will provide.

The Creative Brief

First off, the design for this site is totally awesome. The 3d paintbrush is money. Second off, i thought the 2 links below (which i've "borrowed" from his html) were pretty sweet, and i just may use these in the near future. 

Week 2 Reading

Summary - Chapter 2 of Information Design Workbook

I think I want to number out every bullet print from this chapter and make it my new questionnaire for a new client. It may be a little overkill, but if followed as outlined in this chapter, an amazing product could most certainly be achieved. I have a hunch this chapter is leading us into information architecture, because i feel it neglected wire-framing.

2 Things I've Experienced From The Chapter

"Organizing Content: The Alphanumeric Solution"

Comps can go through tons of revisions, and at a place i worked, they labeled folders with the flattened jpegs which were presented to clients, prefixing the revision number (which increments) with "r_". this helped when other designers were coming into a project and they needed the most recent layered version of a revision, they just found the folder with the highest number.

"Content Analysis"

I feel like most clients want an entertaining website, because they never seem ready to talk about their content. It's so hard to start a design about a company when all you have is a name and an email personality. Which is totally funny because all a website does is organize the companies purpose, goals and salespoints. These things should be known and already spelled out, maybe not in lingo and organized, but thought out.

Versioning on Wikipedia

Many people have started using Dropbox, some for a simple online thumb drive, and some because it has automatic version tracking. With subversion and other versioning programs, it allows designers and developers to backtrack to previous working files, not lose important work they may have done, and share their up to date files with other people involved in the project. While managing and maintaining a good versioned file structure, there are moments where it can be a life saver.

How I Structure Site Content

This guys entire huge post is all about how he brainstorms content, initially organizes it, and eventually refines it into a clean and navigate-able arrangement of content.  

Week 1 Reading

Summary - Chapter 1 of Information Design Workbook
I loved that freakin intro about all the job titles and how they integrate the term information graphic design! I wanted to have each of these jobs:Array("interaction designer", "user experience designer", "Human Computer Interaction Specialist"). This list of jobs unfortunately were not the ones highlighted later in the chapter. This book does an excellent job summarizing the importance of information organization, and points out all of the places that we interact with it on a daily basis. I also liked how it pointed out our craving for a tailored experience, where it's obvious someone has tried out the experience enough times to have it perfect.


2 Things I've Experienced From The Preface
"What Floor, Please?"
Definitely wondered why P and G are so popular and so vague in parking structures and buildings with parking. If a floor has multiple bottom floor exits, show a name of it clearly at the entrance and use the same name in the elevator, duh. Avoid separating them by parking and ground.


"Cursing In The Aisles"
Its very discouraging as a shopper to have to read fine print to find the information that is commonly needed to make a decision. When other big words about savings take up the label, and the fine print has the versions it works with and the parts it's compatible with, it makes you think theyre hiding what it can do. 


GDS Infographics
This guy is a huge collection of infographics all shared on flickr. it appears that they have done all of them, and they make it look like a ton of fun.


HTML5 Readiness
Totally awesome statistical infographic, with links a plenty for the even more curious viewer. This graphic is proof this person is in a user centered mindset. 

Project 1: Project Statement

Project Statement - public google doc (read-only foo)

v1 - design ideas (for the infographic)

landing state for the info graphic

those circles will fall to the bottom after a selection, and become the nav between engines

This is the popularity heat-map v1

Concept Sketches

---

research gathered

visited google.com from the 5 major browsers and tested their engines, check it out.

chrome developer tool 'timeline' view

firefox addon httpfox displaying the ins-and-outs

all i got get out of ie 8's developer toolbar for header information

opera's 'network' view was pretty sweet, very informative and nice to look at

safari's and chromes views look very similar, just a different in color bars reall

Project 1: Visual Explanation

goal: make a sweet infographic in fireworks and then animate (with purpose of course) in catalyst
topic: under the hood - requesting facebook.com from webkit, gecko, and trident
the destination: a webpage, my webpage, this blog, projectors, and android tablets
interface:

• var page_states:Array = new Array( "popularity heat map" , "webkit" , "gecko" , "trident" );
• var detail_states:Array = new Array( "sent" , "received" , "client-side" , "server-side" );
• navigation between states

inspiration:

• The Journey Of A Tweet (this will definitely be influential in my design)
• 20 Things I Learned
• Heat Map - Music Website Popularity (this will be the initial view, engines by popularity)

---

other sweet info graphics:

• Awesome Infographic Charts the Browser Wars
• HTML5 & CSS3 READINESS
• If Web Browsers Were Celebrities
• HTML 5 - How and Why We Should Care

CSS vs TABLES

i've been a year in the search for a simple 3-column layout creator or explanation for css. i constantly resort to a table because i can dev it up in seconds without testing or effort. for argyle ink, none of the projects have needed multiple style sheets for device screens, so it's never been an issue. but i'd like to think it's easier than it is. i like writing clean html code, and i feel i get judged for putting tables into my layouts. 

 

resources so far:
plugin: The Perfect 3 Column Liquid Layout (Percentage widths) - almost as easy as i want it
browser compatibility: sounds like you could set a dev on a 3-column layout task for a week
floats: tries to teach you a floated 3-column layout

anyone else have any better places to go?