Category

information architecture

One World Observatory lobby projection

One World Observatory Process Post

By | after effects, design, gergwerk, graphic user interface, gui, information architecture, photoshop, portfolio, process, Stimulant, Uncategorized | No Comments

Now that the One World Trade Center is officially open, I can talk a little about my process for creating the designs! This project marks the first time I used Cinema 4D to create the visuals. The look of the water, map, globe, lighting, and pins were all created in C4D, while the typography and stat designs were created in Photoshop. Below is the breakdown of my process.
one world observatory, one world trade center, dataviz, infographic, design, nyc_
Process Design:
Experimenting using Cinema 4D to create a quick topography. cinema 4d pin test_
Depth Maps:
Once narrowing down a good thickness and spacing for the pins, I used two depth maps to create the continents and ripples. A depth map is an informational image that changes the height between planes, all based on black, white, and grey values. White areas indicate where sections of the image will be raised up and black areas will remain lower. The ‘depth map for continents’ raises areas to create continents and the ‘depth map for pin ripples’ lifts elevations around Brazil, Europe, and Japan. Pro Tip: any area that is not 100% black or 100% white will cause the elevation in that area to be somewhere in between the highest and lowest point. In this case, our ‘pin ripple’ depth map is smooth gradient so the elevation falls off smoothly, causing cone-like shapes. depth map explination examples_
Visual Design:
Starting to add color, creating a low poly texture for the faceted oceans, and testing out placement of lights. In this rendering I’m using powerful lighting techniques called global illumination and ambient occlusion. This brings me to a very important point. If your graphics are going to be built to run in real time by a developer, work with them early in the project to make sure designs can be replicated in code. Cinema 4D is capable of very complex lighting, but there are a lot of cases when you can’t replicate it in code due to hardware and software constraints. In some instances, these effects can be replicated but it will drastically cut the frame rate in the build. Always consult your developers! After making these renders and talking with our developer Joel, I learned some of these lighting techniques aren’t practical for apps that are generated in real time. cinema 4d render of the worldcinema 4d render detail cropLighting and camera setup. High school photography classes for the win!gergwerk-One World Observatory process lightingGlobe view. The mountainous areas represent where most guests are visiting from since the opening of One World Observatory. To get this effect, I went back to using our good ol’ depth map technique.globe depth mapLastly, I created a nebula-like background using Trapcode Form in After Effects. This will be tweaked and placed behind the globe for the big transition reveal.nebula test after effects using trapcode form_
Final Design (black space represents a hallway). Graphics were created in Cinema 4d, After Effects, and composited in Photoshop. Click images for larger detail:
01-oww-map-render-full-r403 gergwerk-oneWorld-06_
Motion Graphic studies: Now that the designs are signed off from the client, it’s time to give the visuals some movement.

These first animations are tests for the stat ribbon. Stats update in real time based on live data being collected when tickets are scanned. While creating motion studies, I like to produce one direction with lots of complex movement and a second that is much more restrained. This allows our developers to start building the simpler version and add in additional flair if there is time.

Once tickets are scanned, country of origin labels will populate on the map. Some of these animations transition on at a harsh angle as a way to continue the faceted design language.

This is the Welcome Wall animation (area above the hallway) that greets visitors in a variety of foreign languages. These languages update in real time based on where people are visiting from. To continue with the OWO faceted design language, angular shapes and sharp shines reveal and hide images as a transitional approach.

_
And that’s it! I feel honored to have been a part of such a grand experience. I will leave you with an image taken by a visitor of the One World Observatory.  To see the portfolio page for this project visit: http://gergwerk.com/portfolio/one-world-observatory/. Au revoir!One World Observatory data wall by Edward BlakeImage by Edward Blake
__
Client:  Hettama Group // Legends
Agency: Stimulant

Stimulant credit list:
Design Director: Nathan Moody
Art Director: Jules Konig
Design Lead // Motion Designer: Gregory Kaufman
Technical Lead: Joel Pryde

Project Manager: Julie Yamato
Quality Assurance Lead: Aron Schoppert

MX_design directions

By | design, information architecture, multimedia expereince, MX, website | One Comment
process post so you people know i ain’t slackin’ foo! the goal is to come up with three variations of navigation, wire framing, and informational architecture that is unique but effective. i’d say we hit the nail on the head.
this wireframe depicts the way the recording device would work on the seed website. simple controls are used to start, stop, add tags, and publish your recording to your profile as well as the advice section of the site. what i was thinking could happen is the other users on the site could download the advice to their computer, or stream it straight to their smart phone (iphone for example) so they can hear the advice as they work in the garden. this saves you many trips to your computer and back outside. it is also a way for the content to be accessed to more than one platform (computer to phone).
wireframe for an ‘amount calculator’ for a smart phone. it allows you to predict how much of a material you will need for the space you have in your garden.

wireframe showing uploading images straight from your phone to your profile or uploading images through your camera to the website. it also shows up in the ‘recent picture’ section of the site automatically. you are encouraged to tag your images so others can narrow their search to more specific results.
this next device is a static camera you attach to your house and it takes a picture in the same spot at the same time every day. the image then is uploaded straight to the picture section in your web page that can be played out in a stop motion. you’re able to see your progress day after day in a quick movie. the more you work, the more people are able to see your achievements.
many iphone applications for the ‘on the go’ gardener. the wireframes show how the transitions from one screen to the next. the arrows indicate what your finger is ‘touching’ on.
after drawing these wireframes and giving the information architecture of the site some serious thought, i started planning how the content and information should be displayed for the users’ benefit. i thought about using the keyboard keys to retrieve navigation elements for the website. we use our keyboards so much, so why not integrate them into websites so we don’t have to use the mouse click. you could move seamlessly from typing a comment on someone’s page then straight to a different page on the website with a simple key command. it’s something i use every day when using photoshop, illustrator, indesign, and after effects. it saves so much time and you will become used to it with muscle memory. i also drew the beginning stages of having content inform the design as well as a customizable page that allows the user to change column width and content on their profile page.
as i was just saying, the user should be able to have (almost) complete control of the content as well as how they interact with the website. it’s going to be the wave of the future. i designed this infrastructure based on the idea that any column width and content box can be added, moved, sized and placed anywhere on the gardening website they want. some things should be kept constant, so the user knows they are still on the gardening site. some things to keep constant might be typefaces, icon system, and our seed logotype.
this sketch shows some different variations of different sections on the website.
here is what i designed based on those concepts. each white area is able to be scaled down or up, moved to areas of the page that are most important to the user. they would be able to create one, two or three column sections to hold the information.
what happens if a user wants to see advice about growing vegetables only? what’s great about this is the idea that different elements from different parts of the site (like this tips/advice section) could be added straight to your portion of your profile. now, instead of navigating to the tips section, they can add the vegetable tab straight to their profile. it’s constantly updating, so new information may seamlessly be streamed onto her profile, without having to go to the tip page. you are also able to move any section of the site up to the main nav bar, if you feel it most important.

a view of a ‘market’ page where users are able to search for supplies/plants/flowers and buy them from the site.

iphone app for layout (1)
wireframe for the iphone app. you drag the icon to the light colored area to activate it (as opposed to clicking it). this might be more natural for the user on the iphone, considering it’s a touch screen device.

the white bar indicates the hit state

another website layout is wire framed here.
the main point to this structure is to have the content of the site be the design. the main page consists of large ribbons tabs. each ribbon is a section of the site. what you see on each ribbon is the newest information (constantly updated by other users) for that portion of the site. for example, on the tips ‘ribbon’, you’re able to see the newest tips users like yourself are writing. they update in real time, which means when someone writes it, it appears on the main page. this allows the user to have an overview of what’s happening in each section of the site, without clicking through each page. what happens if you want to read more from the tips page? when the user wants more information, they can click on the big ribbon (or the links in the ribbon) which slides you to the tips page. the other main navigation remains as condensed ribbon/tabs on the left side of the page. this allows the user to navigate section to section without having to go back to the main page. after determining these rules, i asked my partner laura to design it. this is what it looks like after she added the ‘skin’.
effect of ‘sliding’ over from main page to the users profilepage.
the view of her profile page, with the navigation tabs on the left side of the screen (there will be titles on these tabs for updated versions).
and finally the tips and advice page.
it looks so great!
iphone app i designed for this structure.

white bar indicates hit state
last iphone design for concept three. laura designed everything about this version. can be seen in 1, 2 and 3.

view my partner laura’s process on her blog!

Point of View from a Wurm

By | information architecture | No Comments

Life lessons are discussed through wur-man’s point of view. This was a good pick-me-upper for some of the recent events in my life. Based on my own experiences and knowledge, ‘exaggeration’ of information helps me weed out the bull sh*t. Exaggeration helps me distinguish what I like and am interested in. Unfortunately for reviews for portfolio day, the people who interviewed me had no interest in the things i was doing. At first this brought me down but I soon realized I wouldn’t have gone to interview with them to get a job in the first place. It was just bad luck! Based on the work I show people in the field that I’m interested in, their comments are very different that of those of branding and architect firms. Communicators shouldn’t assume their messages will have universal meaning. It’s all about perception, and every one’s is different. The important thing is to, like i said before, weed out the crap and take the information that actually would help improve my work and or portfolio. All of the things I create are based upon past experiences of things I’ve seen and read. It’s the things i consider important that stick with me that helps shape my perceptions and make the work I am interested in. Of course perceptions are biased by our own point of view, but that’s what makes the world so interesting. We wouldn’t ask questions or challenge each others beliefs (bahh) without our own exaggerated point of views.

Information enriches perception.

I chose the articles based on education because I think the way we learn is very interesting. I have met people with great teachers, and shitty ones, so i think it’s interesting to see which methods would be best for most amount of people. I don’t think there is a single answer how to teach people. It needs to be a case by case solution. Some people in my class understand information right out of the gates, but others (like myself) always need clarification on the instructions given. One can’t assume just by reading a blog post and in class discussion that everyone will understand what wants to be done. I agree somewhat to both articles, but I of course disagree with some of the points the authors make. There is a lot of information I cannot comprehend in Gordon’s article, because I’ve never had the experience of being a teacher. There were some b.s. comments we thought he made, but when Epp read it totally agreed on. That’s because he is a teacher and has experience in that field, which we do not. My goal for these articles to allow the reader to view all the information all at once, as well as one at a time. This allows the reader make their own connections and biases based on their preference. They can read it one at a time, or compare both articles side by side. It’s all about you. and you and you. Because every one’s preference and perception differs… In the wise words of willy “OOOOOORRRRRRRYYYYYEEEEEEE!!!!!!!!!!!!”

Better late than never…. so they say

By | information architecture | One Comment

I’ve been spending too much time trying to find an aesthetic value I like enough to pursue, which means I’m so far behind I wont be sleeping for weeks. It’s not even funny. Now that I have a generalized look to it I’m going to run in that direction. Unfortunately for that direction, I can’t do what I’d really like to do… which is draw everything. Instead I’m replacing drawings with vectors.. a very digital feel. Time makes enemies of us all. I’ll post the drawings I have already completed for the final outcome.
That being said, the content of my site also needs work. What a way to start out the semester.

Here are my three sorting methods. The reason the middle image is a different color for the nav bar is because that is the color it turns for a roll over option. The other two indicate what sort method you’re currently looking at.

The next seven are my infographics. I’ll start off with what I think are the worst and go from there. I need a new image method or angle to denote the parts of the car I’m calling out. It looks bland in comparrison to the others.


Seems to also be bland. Also very light on the information… I wonder what other facts I can add to this bundle of fun.


I’m not sure the drawing style matches the rest of the site.

I dislike how everything looks so much better as a sketch on paper. On top of all this, I need to create two new infographics along with fixing these… and generating code.