http://www.smashingmagazine.com/2011/12/22/freebie-new-twitter-profile-page-gui-psd/
Friday, December 23, 2011
Saturday, December 10, 2011
Google Web Fonts
http://www.google.com/webfonts
Hundreds of free, open-source fontsoptimized for the web
Just 3 quick steps between you and a good lookin’ website
1. Choose:
Search or browse hundreds of font families, then add the ones you like to your Collection.
2. Review:
Compare and refine your Collection, even see the styles in a dynamic sample layout.
3. Use:
Grab the code we prepare and you’re ready to add the Collection to your website!
Friday, December 9, 2011
Wednesday, December 7, 2011
Tuesday, December 6, 2011
Monday, December 5, 2011
Sunday, November 20, 2011
Free Standford online HCI class
In case you don't have enough in your plate here's something to do..
http://www.hci-class.org/
Wednesday, November 16, 2011
Visual Systems Inspirational Interview
via http://substratumseries.com/
Tuesday, November 15, 2011
Resource 004: Learn HTML & CSS in 30 Days
Wednesday, November 9, 2011
Vector Based graphic UI eements for iPhone
Wednesday, November 2, 2011
interactive design meets physical computing and robotics
Adobe HTML5 Animation
Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.
Monday, October 31, 2011
This weeks Reading / Exercises
http://www.usability.gov/methods/design_site/index.html
Card Sorting:
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
Paper Prototyping:
http://www.alistapart.com/articles/paperprototyping/
Navigation:
http://www.bestdesigntuts.com/25-unusual-website-designs-with-remarkable-navigation/
Food for Thought:
http://www.alistapart.com/articles/personality-in-design/
Friday, October 28, 2011
How to write an effective design brief
http://justcreativedesign.com/2008/09/26/how-to-write-an-effective-design-brief/
Tuesday, October 25, 2011
Monday, October 24, 2011
Amon Tobin
http://www.youtube.com/watch?
Food For Thought
"Facebook's mobile moves are part of a larger trend called responsive web design. It won't just be the code bases that change either. We, the users, will notice the differences too. For example, it's likely that Facebook's desktop website will over time utilize more of the design patterns in its mobile apps and site."
Wednesday, October 19, 2011
Tuesday, October 18, 2011
Teenage Mutant Ninja Turtle Noses.
Monday, October 17, 2011
Resource 002: Potential Responsive Web Formula
Thursday, October 13, 2011
UI Kit Tutorial + Free 1 week Lynda
http://webdesign.tutsplus.com/videos/create-a-simple-user-interface-kit-from-scratch-free-psd-included/
Also, came across this 7-day free Lynda.com trial.
http://www.lynda.com/Mordy
Wednesday, October 12, 2011
Mobile Website Designs
http://www.mobileawesomeness.com/
http://blog.templatemonster.com/2011/05/05/mobile-web-design-trends-2011/
Food for thought: Mobile Ready
Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.
Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.
With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.
It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.
Taken from: http://webdesignledger.com/tips/web-design-trends-in-2011
Resource 001: Smashing Article - iPhone Icons
This is a great article that explains some of the adversities of designing for the retina display and how to overcome them.
Wareface
Here is an interesting site, representative of a responsive web design. It almost reminds me of the Content Aware feature in Photoshop, where you can edit out part of a image seamlessly.Responsive Architecture
Responsive Website Design Blog
Design 002: Responsive Web
I really enjoy Think Vitamin's layout. The interface itself adapts nicely to changes in size and resolution. In terms of display it looks and works great. I didn't notice anything funny with the navigation, or structure of the actual content postings. However, when resized to the smallest width possible some of the functionality drops. Such as: social media links, post categories, and the search feature. Additionally, there are some issues with images being resized within the posts. Most resize fine, but some end up looking disproportional.
Overall, I found that their layout adapted as it should. It was also very fast. However, there were minor issues with content adaptability. An additional note is that I tested their website on both my desktop and iPad.
Media queries in the wild
First, icon designer John Hicks, presents his work available in four different layouts, each optimized for your screen.
http://hicksdesign.co.uk/
Then, a fun example of typography use with a sparkle of the Coen brothers humor.
http://www.strangenative.com/foldup
Monday, October 10, 2011
No Class Tonight, Mon Oct 10
Thursday, October 6, 2011
Wednesday, October 5, 2011
Talk to Me: Design and the Communication between People and Objects
Last Sunday I went to this exhibition in New York at the MOMA.
I would highly recommend it. Nice curation of interaction projects based on Processing, R, OpenFrameworks and Arduino.
Dates: July 24–November 7, 2011
Talk to Me explores the communication between people and things. All objects contain information that goes well beyond their immediate use or appearance. In some cases, objects like cell phones and computers exist to provide us with access to complex systems and networks, behaving as gateways and interpreters. Whether openly and actively, or in subtle, subliminal ways, things talk to us, and designers help us develop and improvise the dialogue.
The exhibition focuses on objects that involve a direct interaction, such as interfaces, information systems, visualization design, and communication devices, and on projects that establish an emotional, sensual, or intellectual connection with their users. Examples range from a few iconic products of the late 1960s to several projects currently in development—including computer and machine interfaces, websites, video games, devices and tools, furniture and physical products, and extending to installations and whole environments.
Monday, October 3, 2011
Wednesday, September 28, 2011
Inspiration-004: I-Heart
I would say that at the very core of my inspiration is a sincere desire to use what I learn to right the wrongs of our world. I realize I can't fix everything, but this video does well to illustrate why I even decided to go to school and learn media in the first place. It all comes back to the content that this video describes.
Typography Inspiration Website
Typeface!

About year ago went with a few friends and my undergrad advisor/professor friend to see the documentary "Typeface" IT followed the story of today's designer and artists using an old but all but forgotten technology of using letterpresses and typesetting.
Daniel Martin's Hello
go to site>>
Friday, September 23, 2011
Awesome book that reminded me of our Action Phrase assignment.
I plan on purchasing this book. The illustrations are incredible form what I have seen. They're all pencil on paper and really look like they're about to come to life. I'd be surprised if Shaun Tan, the Australian author/Illustrator is not approached by a film maker to turn this into an animated short film.
Wednesday, September 21, 2011
Wednesday, September 14, 2011
Due Monday September 19, 2011
1. Site Analysis / Audit
2. Two Mood Boards (Two looks)
3. Two Concept Layouts
We will review these as a class on the main screen and choose a direction to pursue.
Think about how you will present your concepts to us :
Start with where you came from (Site analysis), move into your mood board and concept layouts.
Friday is a work session here in class!
Tuesday, September 13, 2011
Great Article on SMASHMAG
A few tools for everyone.
Monday, September 12, 2011
Wireframe Templates
These are the templates I've been using for wireframing. I linked the illustrator file, so feel free to customize it to your needs.
wireframe templatesWednesday, September 7, 2011
Inspiration-003: Vital
The most inspirational part of this video, for me, is the sound design. Which, in this instance is important because the artist who uploaded this video is actually a musician who comissioned a motion designer to create a video that embodied his music. That aside, I find the attention to detail and, as always, extremely high level of technical skill to be most inspirational. Overall, with this video I find that the music is what gets my creative jucies flowing.
The Amazing Wooden Mirror

Cool inspirational website and company
Physical Data Visualization
The two projects below Keyboard Frequency Sculpture and Measuring Type do exactly that. Michael Knuepfel represents the frequency of letters used by 3D printing keyboard keys and mounting them as bar charts. Matt Robinson analyzes ink usage by drawing with ballpoint pens large scale renditions of commonly used typefaces and comparing how much ink has been used.
Keyboard Frequency Sculpture
Measuring Type
Tuesday, September 6, 2011
Design Post 9/7
Wednesday, August 31, 2011
The Inner Kid
This site "Egopop" is of particular interest to me. I particularly like Aleksandar Grkinic's use of very playful 3d objects.
He was a psychology student and he appeals to kids of all ages. Some of his other websites has a very symbol like feel such as the M3 logotype. What also appeals to me is the simple navigation
in the sites he designs.
Inspiration-002: Open Your Eyes
I find this video to be very inspirational as the quality of the footage is top-notch. As an aspiring cinematographer my desire is to reach this level of quality in my work both functionally and creatively. The reason I am so drawn to the contents of this video are because the execution of the story being told is quite impressive. Being able to maintain such a high level of quality by not compromising technical details-in my opinion–tells a better story than simply focusing solely on either one of the two. Additionally, I also find this video inspiring because it's attainable. Overall, my inspiration here is drawn more from technical aspects than creative.
Inspirational website
Design for Wednesday 8/31
Conditional Design Manifesto
Their systematic approach is classified within three categories: process, logic, and input. The process is the product in which elements of the environment are logically altered by adjustable parameters.
Not sure if its the minimal writing, word selection, or just the feeling of recursion of a process within a process, that I feel drawn by it every time I read it. This is one of the few sites that I find myself constantly coming back to for reference and inspiration.
Process
The process is the product.
The most important aspects of a process are time, relationship and change.
The process produces formations rather than forms.
We search for unexpected but correlative, emergent patterns.
Even though a process has the appearance of objectivity, we realize the fact that it stems from subjective intentions.
Logic
Logic is our tool.
Logic is our method for accentuating the ungraspable.
A clear and logical setting emphasizes that which does not seem to fit within it.
We use logic to design the conditions through which the process can take place.
Design conditions using intelligible rules.
Avoid arbitrary randomness.
Difference should have a reason.
Use rules as constraints.
Constraints sharpen the perspective on the process and stimulate play within the limitations.
Input
The input is our material.
Input engages logic and activates and influences the process.
Input should come from our external and complex environment: nature, society and its human interactions.
go to conditional design manifesto >>
Tuesday, August 30, 2011
Letterscapes
Created by Peter Cho using Processing, Letterscapse is an interactive exploration of shape, form and interactive movement of recognizable characters. Using processing and Java, Peter cho has created a simple, yet engaging environment where one can freely navigate the world of letters he has created. I felt that his combinations of color, form and movement were striking, clean, and different. His unique user interface was a bit cumbersome when trying to escape from one are to return to the main screen. I figured it out, but I'm curious to see if anyone else from class has the same issue.
check it out below:
http://typotopo.com/letterscapes/index.html
Monday, August 29, 2011
Action Word Assignment
2. Use illustration / photography / artwork to design and develop your ORIGINAL icon
3. 500 x 500 pixels @ 72dpi as a guide, your icons do not have to be square, they can be rectangular, etc
4. Wednesday (August 31) pitch me your concept and how you plan to execute the final deliverable
5. Final deliverable is a suite of 5 icons that express the action phrases you chose (keep in mind they should all be consistent and have the same look and feel)
DUE WEDNESDAY SEPTEMBER 07, 2011
My logo Design

CG Hook
I chose Lionel Text Diesel as the text for the last few iterations of my personal logo. It is a very clean and clearly legible font. I want my designs to also be as clear and legible. Recently I have been making myself get out of the fad or using distressed type faces for anything and everything. Having said that, distressed fonts do have their place.
Iconic
In selecting Century Gothic for my font, I challenged myself to settle on a contemporary typeface that would be versatile in font weight and shape, as well as treatment of negative space. The color I selected would be pleasing to the eye, and not have too much contrast. In selecting my pick from the 20 ideas, while the last ones I put together became increasingly interesting, I found this one has many possibilities, especially for a possible Flash animation as well as a website, perhaps the negative space that is a portrait window to showcase some of my work. Or use the top space to show a banner, something you might see in "ArenaVision". I feel that the design is clean, and I like the tension effect of the M under the bold face. Sort of a "grace under pressure. Additionally, I like the abstract look. The letters are there, but they creat interesting negative shapes as well as their own look, from a number of perspectives.
Design 001: Logo
I chose this design from the twenty others primarily because it feels the most important. After I finished creating my logo batch I stepped away for about a day then came back and looked them over again. When I did this I found that my eye was continually drawn to this particular design. I surmise that because of its unusual structure my brain is trying to figure out what the shape is. However, as it's creator I know that it was modeled after the mathematical sign for infinity. It's obviously not too similar, but the overall shape is close. My design with this design was to leave the viewer intrigued but not confused. I would say that I did moderately well in achieving this goal.
Additionally, I chose the color yellow for several reasons. In our culture this particular color is interpreted to symbolize clarity, awareness and accomplishment. These are principles that I want both my prospective clients to associate with my brand as well as with the product they receive. I also find that this color best symbolizes how I tend to view my role as a media provider.
Sunday, August 28, 2011
Logo Design 1
I chose this design for my initials because I think it portrays my style , philosophy and attitude of art and design. There is something about its fluidity of the lines, positive/negative spaces, and its high contrast of shapes/colors.
Saturday, August 27, 2011
Logo_LC
Both letters are merged together to create single element. The surrounding white space plays a dual role of enclosing the shape as well as representing the letters themselves.
The sans-serif type is simple, who stripped down to its most basic elements brings order and elegance to the design. Orange, an energetic color, calls to mind the feelings of excitement, warmth, and enthusiasm.
Jakob Nielsen
These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.
http://www.useit.com/papers/heuristic/heuristic_list.html
Friday, August 26, 2011
HomeWork August 26
By Monday!!
Wednesday, August 24, 2011
Photographer's website....
This is a portfolio website of Lee Towndrow, a famous photographer. I came across his website accidently and it definitely caught my eye. The layout of his photographs are interactive with the viewer and well organized. It makes it easy to follow his art style, subjects, and his skills. It made me want to stay on the website to look through all of his photographs and get to know him a little bit better. It also reminds of film strips and make me want to follow it as a narrative.
What looks cool to me
I like the edginess of the graphics. It has the look and feel of The Cars brand of music. Pop, rock, new wave. If I was going to do a music video, I would want to capture the feel and effects of this video.
Eric Whitacre's Virtual Choir - 'Lux Aurumque'
Austria
Argentina
Canada
England
Germany
Ireland
New Zealand
The Philippines
Singapore
Spain
Sweden
United States of America
Compressed Moive Barcodes
Shown below, every frame in The Matrix is compressed and placed next to each other to form a unique barcode. The compressed result illustrates a condensed view of the entire movie.
See more on the moviebarcode tumblr >>
Inspiration-001: ShapeShifter
I was introduced to Charlex's work late in my undergrad career but quickly grew to appreciate their style. Since the first time I watched this, it has served to both challenge and inspire me. Every level of production was met with flawless precision. Most notably the chosen narrator. I could go on about the technical achievements, but those aren't what truly inspire me here. I am drawn to the blending of visual and the spoken word. When I watch this video I see the visuals not as impressive feats of artistic expression–though they are–but as extensions to what's being said. I think there's something to be said about realizing such a high level of parallelism. To me this is a level of creativity I have yet to reach.
In addition to the impressive creative display I also find several nuances about this piece to be very philosophically stimulating. Since I come from the Christian tradition, the element of spirituality plays a large role in my analysis of art, creative expression and so on. I find in this piece a dichotomy that both frightens and intrigues me. Though it is a beautiful work of art, this video was actually created to be an advertisement for Audi. However, the commercial purposes were blended so skillfully with the artistic that it is difficult to distinguish the two. Thus the philosophical implication of whether it is permissible to allow something–artistic expression–that at its core is defined by being beholden to no man, to become a tool of commercial enterprise. In other words, should we welcome or scorn the hybrid that is created through the integration of commercialism and artistism?
The inspiration I draw from this work is two-fold: seek to find avenues to which my creativity can serve a purpose higher than commercialism and achieve the same or greater level of excellence. I do however realize that marketing plays a heavy role in a designers income. Thus, I live in the tension that exists because of that fact.
Tuesday, August 23, 2011
A cool design...
Sunday, August 21, 2011
First Post
{ Please comment why you are inspired by your post and feel free to comment on other people's posts. }

















