TED talks on Design

TED is a small nonprofit devoted to Ideas Worth Spreading. It started out in 1984, by co-founder, Richard Saul Wurman (who coined the term, ‘information architect’), as a conference bringing together people from three worlds: Technology, Entertainment, Design.

Donald Norman, Usability expert

Advertisements

Designing with humour

Funny Video clips:

If your humour is a bit off, you might like this!
<a href=”http://ffffound.com”>ffffound.com</a&gt; Image Bookmarking

Designing for the screen

Resolution

iPod

Blackberry

Monitor

  • Gamma

Using javascript + jquery

JavaScript

Anyone who dabbles in web design these days should really know how to code in xhtml, css and javascript. But this can be a daunting task for newbies to web design. Thankfully, there is no shortage of tutorials to teach you neat tricks, tips and techniques for building interactivity! The most sophisticated code to achieve this is javascript.

What is JavaScript?

JavaScript is a scripting language used to add interactivity and functionality to websites (and it’s not Java!)
JavaScript was first developed by Netscape in 1995 to improve the Netscape browser. It gained in popularity and wide-spread use and is essential to interactive design today!

JavaScript is used for:

  • adding interactivity to elements
  • creating dynamic menus
  • opening new browser windows
  • updating data within a browser
  • form validation (client-side)
  • manipulating the behaviour and properties of elements
  • creating alerts or warnings

… and lots of fun stuff!

Since HTML pages are mostly static, with JavaScript –changes occur on the ‘client-side’ (end-user) so that the page doesn’t need to be refreshed in the browser to ‘work’.

But writing JavaScript is a long and arduous process, so to make things simpler for designers, jquery came along with their motto, ‘write less, do more’. jquery is a library of code (also known as a framework) that web designers can simply download, copy and paste into their HTML pages. The only necessary changes  are edits to tell the framework which changes to control. The framework does the rest. BUT, you should still know a thing or two about javascript to understand how it works and what the framework is doing, in case you encounter glitches.

Other popular javascript libraries include: prototype, mootools and Adobe’s Spry. All of these sites have great tutorials on how to use their code.

However, I recommend learning the basics of javascript, and get a handle on the syntax and structure. Then, use the framework to enhance your site for more robust experiences but note that not all browsers treat javascript in the same way. It’s important to design for when javascript support is either absent or disabled, and to have a strategy for providing alternative content. This technique is called ‘progressive enhancement’.

Using Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is the formatting language that controls the ‘look and feel’ of web documents. The word, ‘Cascading’ refers to the way that CSS applies one style on top of another. It allows users to apply a style to multiple elements, documents or even to other styles. You can also apply multiple styles or a set of styles to a single document.

Basically, CSS allows users to separate style from content, allowing designers greater control over the display and output. Although it’s not technically a layout language, it gives a lot more control over the look and feel, including the layout, use of fonts and colours of a website.

CSS are a collection of formatting rules typically stored in a separate CSS document, that apply to “HTML, XHTML or PHP” files of a web site. However, styles can also be stored within the ‘head’ of a web document, or applied as an inline attribute of page elements. Depending on where styles are located, styles can over-write other styles when conflicts occur. So ‘Cascading’ refers to the order in which styles are applied and/ or over-written.

CSS also allows for modular design and can therefore, control how a document looks on-screen, in print and on hand-held devices. With increasing use of mobile devices, CSS is a powerful tool that allows for customization for different output devices.

Overall, CSS is a smart, efficient and accessible way of designing and developing websites.

Here are just a few of many great resources for learning CSS:

For inspiration, visit:

Illustration

Digital rain

This illustration was inspired by an old French photograph of a young nurse in Hôtel Dieu.

What is an illustration and why would you illustrate?

Well, I decided to look up both ‘illustrate’ in the online Cambridge dictionary and ‘illustration’ in the visual thesaurus …. Here is what I found:

To illustrate:

  1. v. (EXPLAIN) to show the meaning or truth of something more clearly, especially by giving examples
  2. v. (PICTURES) to draw pictures for a book, magazine, etc.

Visual thesaurus, words associated with 'illustration'

So, the simplest definition for illustration is to explain through pictures. And since a picture is worth a thousand words, it’s a very efficient way to explain an idea or to tell a story. Here are some great portfolios of illustrations, to illustrate illustration. 😉

These illustrations were created first by drawing, and then painted digitally, in most cases. Talent goes a long way here …

The scientific and medical illustration field is highly specialized, but Bryan Christie is quite simply the best! – Incredible!

To learn how to create vector illustrations using Adobe Illustrator, try your hand at these online tutorials.

For those who aren’t skilled at drawing, try playing with Illustrator’s ‘live trace’ or ‘live paint’ functions!

Or if you need a professional illustration, and haven’t got the time to learn yourself … you can always hire an illustrator from this Directory of Illustrators.

But, for a more playful take on illustration … Here’s a personal favourite of mine: Sam Brown’s explodingdog.com –I love this guy! 🙂

And of course, the iSpot is a great resource for all things illustration! –Enjoy!