Wednesday, October 6, 2010

Carnegie Mellon's School of Design's Definition of Design

"Design is the process of taking something from its existing state and moving it to a preferred state." 
This applies to new artifacts, whose existing state is undefined, and previously created artifacts, whose state stands to be improved."  wikipedia

This definition of design resonates well with me. Unlike other definitions of design, this definition is broad and therefore applicable to diverse activities. The language of the definition provides me with a clear visual of the meaning which in turn better informs my understanding of the word design.

At a simplistic level the definition of design can be explained as: to take something and make it better and or to take nothing and make it something.

What have I been Designing

I am designing a program for English-as-a-mother-tongue children between the ages of 5 -12, who are being educated in French or learning French as a second language and live in a non-French speaking country.

This design solution address the following issues:

  • Most of these children have only one primary ecosystem to experience their second language - their school.
  • Outside of school they speak English. What's missing is an alternative and fun environment to speak French
These limitation slows down their learning of the foreign language. They experience the language primarily as an academic exercise resulting in lower motivational impulses which decelerates learning.
This program is designed to allow children to experience learning their second language in a fun, non-academic, "edutainment" environment.

Tuesday, April 20, 2010

Lightbox Javascript

This version has many interesting effects but it is difficult to implement.

in reference to: ColorBox Examples (view on Google Sidewiki)

Wednesday, March 11, 2009

The numerati have invaded my local supermarket

They come in the form of a Motorola shopping scanner, currently available at my local Shop and Stop. The scanner is a portable barcode scanner that you take along with you while shopping and allows you to self checkout your groceries as you shop.

Shopping with a scanner provides many conveniences including: 
  • Knowing exactly how much an item you are putting in your cart is
  • Not having to wait online when you are done shopping
  • Engages your 5 year old boy (who would rather be home) in the grocery shopping experience, while providing a learning opportunity for him -  he would read out the prices as he scanned the items

But how high is the price for this new convenience?

To use the scanner you have to sign up for the store's shoppers club card which means they have your address which means they are going to be sending tons of junk in the mail. 
Each brand's marketing people will now be able to identify me as a client and who knows what else they will do with my information.

But as an advocate for technology I am excited when I see it used to enhance mundane life activities like grocery shopping  and makes me think where else would I like to see such a scanner?

Links:

Friday, March 14, 2008

Centering content on a page

How do you center a table on the page if you can’t use deprecated HTML align=center?
Here is a solution that works on all browsers except IE 6.

Assign the CSS Style property MARGIN:AUTO; to an HTML tag like DIV or TABLE. This property tells the browser to make the margins on all sides of the element equal. Which will, in turn, push the table into the center of the browser window.

Tuesday, August 28, 2007

Asp Menu control

This contol supports many features but of the many features the ones that are of interest to interface designers are the features that supports customization of the menu's appearance through themes, user-defined images, styles, and user-defined templates.

These features are the subject of this post.


The Menu control displays two types of menus: a static menu and a dynamic menu.
For the most part the menu items you see would be defined as the static menu items and the menu items that are viewable only on rollover are defined as the dynamic menu items.

Menu item style property
DynamicHoverStyle
The style settings for a dynamic menu item when the mouse pointer is positioned over it.
DynamicMenuItemStyle
The style settings for an individual dynamic menu item.
DynamicMenuStyle
The style settings for a dynamic menu.
DynamicSelectedStyle
The style settings for the currently selected dynamic menu item.
StaticHoverStyle
The style settings for a static menu item when the mouse pointer is positioned over it.
StaticMenuItemStyle
The style settings for an individual static menu item.
StaticMenuStyle
The style settings for a static menu.
StaticSelectedStyle
The style settings for the currently selected static menu item.


Image property Properties

DynamicBottomSeparatorImageUrl
An optional image displayed at the bottom of a dynamic menu item to separate it from other menu items.
DynamicPopOutImageUrl
An optional image displayed in a dynamic menu item to indicate that it has a submenu.
DynamicTopSeparatorImageUrl
An optional image displayed at the top of a dynamic menu item to separate it from other menu items.
ScrollDownImageUrl
The image displayed at the bottom of a menu item to indicate that the user can scroll down to view additional menu items.
ScrollUpImageUrl
The image displayed at the top of a menu item to indicate that the user can scroll up to view additional menu items.
StaticBottomSeparatorImageUrl
An optional image displayed at the bottom of a static menu item to separate it from other menu items.
StaticPopOutImageUrl
An optional image displayed in a static menu item to indicate that it has a submenu.
StaticTopSeparatorImageUrl
An optional image displayed at the top of a static menu item to separate it from other menu items.

Saturday, June 9, 2007

The view above-the-fold is called the viewport

I always wondered what's the technical name for the area of the screen that is above-the-fold of the monitor. Actually I think the expression above-the-fold is jargon taken from the print world. In any case I stumbled across this definition from an online resource webreference.com.

The view above-the-fold is called the viewport. Here is the technical definition:
The canvas is a large flat space on which the document is rendered, and the viewport is the bit in your browser's window where the document appears. If the canvas is bigger than the viewport, only a part of the canvas will be visible at any time, and browser will usually allow you to scroll around the document using a scroll bar or something similar.