DesignDemo has moved to its own url uidemo.com. Designdemo started out in 2006 as a category in my personal blog which focused on screencasts of data visualizations. After much thought I’ve decided to move it to its own domain. The new site UI Demo is an extension of the original idea where we will focus our screencasts on more than just visualizations.
Read more
DesignDemo has Moved to UI Demo
Typekit – Designing Webpages With Real Fonts
Screenshot of Typekit
Tonight I decided to give the new font service Typekit a try on my website. The service uses your browsers inherent ability to link fonts, and has worked out licensing with a number of font houses so you can link these fonts with no fear of legal action. The quote from Typekit below basically says it all.
Jobs Growth Forecast Visualization – USA Today
Screenshot of the the USA Today jobs growth forecast visualization
USA Today created a nice visualization of jobs growth between 2010 – 2013. It’s interesting to see the varience in different states, cities and job sectors.
Web Open Font Format Will Change Web Design
This is a sample page created by noted typographer Erik Spiekermann using WOFF versions of FF Meta and FF Meta Serif displayed in Firefox 3.6 beta.
In my opinion the web open font format could be one of the biggest additions to web design in many years. Imagine being able to design for the web with hundreds of new fonts. Mozilla and several type foundries are already onboard. For now we’ll just have to wait and see how many other browsers adopt this wonderful new standard.
Efforts to bring advanced typography to the Web have reached an important milestone. Type designers Tal Leming and Erik van Blokland, who had been working to developing the .webfont format, combined forces with Mozilla’s Jonathan Kew, who had been working independently on a similar format. The result of the collaboration is called Web Open Font Format (WOFF), and it has the backing of a wide array of type designers and type foundries. Mozilla will also include support for it in Firefox 3.6.
WOFF combines the work of Leming and Blokland had done on embedding a variety of useful font metadata with the font resource compression that Kew had developed. The end result is a format that includes optimized compression that reduces the download time needed to load font resources while incorporating information about the font’s origin and licensing. The format doesn’t include any encryption or DRM, so it should be universally accepted by browser vendors—this should also qualify it for adoption by the W3C.
From: Ars Technica and EmilyChang
Jim Jarmusch on Creativity
This is one of the best creative quotes I’ve ever read, and directly relates to my own creative process.
“Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photos, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don’t bother concealing your thievery—celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: ‘It’s not where you take things from—it’s where you take them to.”
- Jim Jarmusch
Luxirare – Killer Clothes + Fine Cuisine
If you love great design do yourself a favor and visit the Luxirare website.
“Luxirare is a weekly webzine dedicated to clothing and cuisine. At Luxirare, the typical notion of a seasonal fashion show or seasonal “menu” does not exist. Styles and recipes are presented as individual pieces that do not follow a strict theme but rather a flow of ideas. The Luxirare principle is to use the unique mobility of the internet to develop an enticing, unorthodox presentation”.
QR Codes: Mobile Tagging
A post by Emily Chang.
“I’ve heard about QR codes for years and Googled for them long ago before they were readily available for consumers, but for some reason tonight, they popped into my mind again and I decided to look them up. I was excited to see that you can make your own QR code easily online. In simple terms, a QR code is a graphic 2D barcode that stores information, such as addresses, URLs, business card info, or anything else.”
How Different Groups Spend Their Day – NYTimes Interactive
The American Time Use Survey asks thousands of American residents to recall every minute of a day. Here is how people over age 15 spent their time in 2008.
Read more
jQuery Tools – The Missing UI Library for the Web
Let’s face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications? Websites are not desktop applications. They are different.
What you really need are tabs, tooltips, accordions, overlays, high usability, striking visual effects and all those “web 2.0″ goodies that you have seen on your favourite websites.
This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.
Personas – How Does the Internet See You?
Personas is a component of the Metropath(ologies) exhibit, currently on display until Sept 09 at the MIT Museum by the Sociable Media Group from the MIT Media Lab (Please contact us if you want to show it next!). It uses sophisticated natural language processing and the Internet to create a data portrait of one’s aggregated online identity. In short, Personas shows you how the Internet sees you.
Read more
jqModal – Minimalist Modaling with jQuery
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.
Nexus – Facebook Friends Visualization
Nexus is a Facebook visualization which creates an interactive image with your friends’ connections and their shared interests.
Read more
JavaScript: Ajax Notifications with jQuery
“If you’re using Ajax, you should give hints to the user when a request to the server is being made, and you should tell him if something goes wrong. Gmail does this really well. Here’s how I coded it.”
HTML5 Canvas and Audio Experiment
This awesome project was created by Sebastian Deutsch to visualize Twitter streams sync’d to music using HTML5 and Processing.
“We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen”.
Read more
How to Create a 3D Tag Cloud in jQuery
“With browsers rendering JavaScript faster than ever before, it’s a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think.”
IRC Arcs – Communication Behavior
“A simple visualization of IRC communication behavior: Who is talking to whom? Or, more appropriately: Who is namedropping whom?
Read more
Create a Dynamic Scrolling Content Box Using AJAX
If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.
Myspace Variety and Attitudes Visualization
“My final year project in information design. Two big (200cm x 90cm, 80 x 36 inch) posters show the variety and attitudes of members from an internet community like MySpace.
On the first poster you can see the functions used, as well as additional information such as age, educational background, family status, gender and how often they are logged in. So, all demographic data which are available from every member’s profile.
The second poster gives you an overview of the geographic position, based on a map. You can see where the members are distributed. The aim was to give the management the opportunity to know much more about the members than would have been possible with a simple scan of their database only”.
Looks del.icio.us
“The looks del.icio.us project is my first attempt to combine graphics design with programming. The concept is to see how users develop and sustain their tagging methodologies on del.icio.us.
Bumpbox – Lightbox For Multiple Filetypes
“Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s.
Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.
Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration”.