Jeremy Gillies

a cog­ni­tive bias in which unskilled peo­ple make poor deci­sions and reach erro­neous con­clu­sions, but their incom­pe­tence denies them the metacog­ni­tive abil­ity to appre­ci­ate their mis­takes. The unskilled there­fore suf­fer from illu­sory supe­ri­or­ity, rat­ing their abil­ity as above aver­age, much higher than it actu­ally is, while the highly skilled under­rate their own abil­i­ties, suf­fer­ing from illu­sory inferiority.

Wikipedia

Posted in Design | No Comments »

Poul-Henning Kampin applies C.Northcote Parkinson’s Law of Triv­i­al­ity in to explain the dis­pro­por­tion­ate atten­tion given to triv­ial details in soft­ware devel­op­ment . It applies rather well to design:

Should I care what color the bikeshed is? The really, really short answer is that you should not. The some­what longer answer is that just because you are capa­ble of build­ing a bikeshed does not mean you should stop oth­ers from build­ing one just because you do not like the color they plan to paint it. This is a metaphor indi­cat­ing that you need not argue about every lit­tle fea­ture just because you know enough to do so. Some peo­ple have com­mented that the amount of noise gen­er­ated by a change is inversely pro­por­tional to the com­plex­ity of the change.

To expand, wikipedia has:

Parkin­son dra­ma­tizes his Law of Triv­i­al­ity with a committee’s delib­er­a­tions on a nuclear power plant, con­trast­ing it to delib­er­a­tion on a bicy­cle shed. A nuclear reac­tor is used because it is so vastly expen­sive and com­pli­cated that an aver­age per­son can­not under­stand it, so they assume that those work­ing on it under­stand it. Even those with strong opin­ions often with­hold them for fear of being shown to be insuf­fi­ciently informed. On the other hand, every­one under­stands a bicy­cle shed (or thinks he or she does), so build­ing one can result in end­less dis­cus­sions because every­one involved wants to add his or her touch and show that they have con­tributed. While dis­cussing the bikeshed, debate emerges over whether the best choice of roof­ing is alu­minium, asbestos, or gal­va­nized iron, rather than whether the shed is a good idea or not.

Posted in Web Design | No Comments »

John Scul­ley, the one time CEO of Apple, reveals the atti­tude towards design­ers at Apple HQ. One can only dream this takes on …

An anec­do­tal story, a friend of mine was at meet­ings at Apple and Microsoft on the same day and this was in the last year, so this was recently. He went into the Apple meet­ing (he’s a ven­dor for Apple) and when he went into the meet­ing at Apple as soon as the design­ers walked in the room, every­one stopped talk­ing because the design­ers are the most respected peo­ple in the orga­ni­za­tion. Every­one knows the design­ers speak for Steve because they have direct report­ing to him. It is only at Apple where design reports directly to the CEO.

Later in the day he was at Microsoft. When he went into the Microsoft meet­ing, every­body was talk­ing and then the meet­ing starts and no design­ers ever walk into the room. All the tech­ni­cal peo­ple are sit­ting there try­ing to add their ideas of what ought to be in the design. That’s a recipe for disaster.

from Cult of Mac (Oct 14, 2010)

Posted in Design | No Comments »

This is a great exam­ple of aug­mented real­ity. Edu­ca­tional and interesting.

via Cre­ative Review.

Posted in Apps | No Comments »

Within this doc­u­ment, ref­er­ences will be made to ele­ments and attrib­utes. It’s impor­tant to under­stand the dif­fer­ence, so con­sider this sam­ple code:

<a href="index.php">Home</a>

The base HTML ele­ment is the a in this case. The attribute is any addi­tional infor­ma­tion about that ele­ment within the ini­tial < > pair, or the href value in this case.

To view the exam­ple usage for any item within this doc­u­ment, please view its source.

This guide has been unashamedly copied from Dave Shea @ mezzoblue.com

Header Exam­ples

The main page header of this guide is an h1 ele­ment. Please reserve h1 for indi­vid­ual page titles only. Any header ele­ments may include links, as depicted in the example.

The sec­ondary header above is an h2 ele­ment, which may be used for any form of impor­tant page-level header. More than one may be used per page. Con­sider using an h2 unless you need a header level of less impor­tance, or as a sub-header to an exist­ing h2 ele­ment. Any header level may include links, as depicted in the example.

Third-Level Header

The header above is an h3 ele­ment, which may be used for any form of page-level header which falls below the h2 header in a doc­u­ment hier­ar­chy. More than one may be used per page.

Fourth-Level Header

For all head­ers below third-level, fol­low the guide­lines listed above. Only use lower header lev­els when necessary.

Fifth-Level Header

For all head­ers below third-level, fol­low the guide­lines listed above. Only use lower header lev­els when necessary.

Sixth-Level Header

For all head­ers below third-level, fol­low the guide­lines listed above. Only use lower header lev­els when necessary.

Para­graphs

All para­graphs are wrapped in p tags. Addi­tion­ally, p ele­ments can be wrapped with a blockquote ele­ment if the p ele­ment is indeed a quote. His­tor­i­cally, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes. Here’s an exam­ple of cor­rect usage:

Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit. Cras euis­mod fringilla arcu. Inte­ger posuere. Ali­quam ipsum. Donec eget massa ac orci tem­pus euis­mod. Donec quis neque nec neque con­se­quat sol­lic­i­tudin. Donec com­modo tem­por nulla. Sus­pendisse vene­natis. Ut ut leo. Nunc plac­erat urna at libero. Nunc sus­cipit lacus.

lipsum.com

Addi­tion­ally, you might wish to cite the source, as in the above exam­ple. (The cor­rect method involves the cite attribute directly applied to the blockquote ele­ment, but since no browser makes any use of that infor­ma­tion what­so­ever, it’s use­ful to also spec­ify the stand­alone cite element.)

Inline Text

You might have noticed all the mono­spaced text in this guide. There are a num­ber of inline HTML ele­ments you may use any­where within other ele­ments, includ­ing abbr, acronym, cite, code, del, em, ins, kbd, strong, and var.

abbr

Used for any abbre­vi­ated text, whether it be acronym, ini­tial­ism, or oth­er­wise. Gen­er­ally, it’s less work and use­ful (enough) to mark up only the first occurence of any par­tic­u­lar abbre­vi­a­tion on a page, and ignore the rest. Any text in the title attribute will appear when the user’s mouse hov­ers the abbre­vi­a­tion (although notably, this does not work in Inter­net Explorer for Win­dows). Exam­ple abbre­vi­a­tions and usage: NASA, HTML, and Mass.

acronym

Used for only spe­cific abbre­vi­a­tions. Like abbr, any text in the title attribute will appear when the user’s mouse hov­ers the acronym (unlike abbr, how­ever, this does work in Inter­net Explorer for Win­dows.) Accord­ing to Mir­riam Web­ster, acronyms are:

…a word (as NATO, radar […] ) formed from the ini­tial let­ter or let­ters of each of the suc­ces­sive parts or major parts of a com­pound term; also : an abbre­vi­a­tion (as FBI) formed from ini­tial letters.

If you think the dif­fer­ence between acronym and abbr is eso­teric, you’re prob­a­bly right.

code

Used for com­puter code sam­ples. Use­ful for technology-oriented sites, not so use­ful oth­er­wise. Exam­ple code and usage:

function getJello() {
	echo $aDeliciousSnack;
}

Inline usage: just like else­where in this doc­u­ment, HTML ele­ments like em or code can be con­sid­ered code, and marked up as such.

cite

Used for defin­ing a cita­tion or ref­er­ence to other infor­ma­tion sources. Exam­ple cited text and usage: More infor­ma­tion can be found in [ISO-0000]

del

Used for deleted or retracted text which still must remain on the page for some rea­son. Since the default style includes a strikethrough line, it’s prefer­able to the s ele­ment. The del ele­ment also has a datetime attribute which allows you to include a time­stamp directly in the ele­ment. Exam­ple deleted text and usage: She bought two five pairs of shoes.

em

Used for denot­ing empha­sized text. In most instances where you’d want to ital­i­cize text (using the HTML ele­ment i or oth­er­wise) you should use the em ele­ment instead. Notable excep­tions are styl­is­tic ital­i­ciz­ing of proper titles, for­eign lan­guages, etc. where ital­i­ciz­ing is used for dif­fer­en­ti­a­tion instead of empha­sis. In those cases, no proper HTML ele­ments exist, so an i ele­ment or a span ele­ment with a cus­tom class may be prefer­able. Exam­ple empha­sized text and usage: You sim­ply must try the negi­t­oro maki!

ins

Used for inserted text and coun­ter­part to the del ele­ment. Like del, ins has a datetime attribute which allows you to include a time­stamp directly in the ele­ment. Exam­ple inserted text and usage: She bought two five pairs of shoes.

kbd

Used for text which should be typed by the user. Mainly use­ful for com­puter instruc­tions. Exam­ple key­board text and usage: Please press Enter to continue.

strong

Used for denot­ing stronger empha­sis than the em ele­ment. In most instances where you’d want to bold text (using the HTML ele­ment b or oth­er­wise) you should use the strong ele­ment instead. Notable excep­tions are styl­is­tic bold­ing of exam­ples, first occurences of names in an arti­cle, etc. where bold­ing is used for dif­fer­en­ti­a­tion instead of empha­sis. In those cases, no proper HTML ele­ments exist, so b ele­ment or a span ele­ment with a cus­tom class may be prefer­able. Exam­ple strong text and usage: Don’t stick nails in the elec­tri­cal outlet.

var

Used for vari­ables within com­puter code snip­pets. Use­ful for technology-oriented sites, not so use­ful oth­er­wise. Exam­ple code and usage: Add 5 to $result and recalculate.

Lists

Then there are the lists. ul denotes an unordered list (ie. a list of loose items that don’t require num­ber­ing, or a bul­leted list). ol denotes an ordered list, and var­i­ous num­ber­ing schemes are avail­able through the CSS (includ­ing 1,2,3… a,b,c… i,ii,iii… and so on). Each item within the ul or ol requires a sur­round­ing <li> and </li> tag, to denote indi­vid­ual items within the list (as you may have guessed, li stands for list item).

Addi­tion­ally, dl is another list type called a def­i­n­i­tion list. Instead of list items, the con­tent of a dl con­sists of dt (Def­i­n­i­tion Term) and dd (Def­i­n­i­tion descrip­tion) pairs. Though it may be called a “def­i­n­i­tion list”, dl can apply to other sce­nar­ios where a parent/child rela­tion­ship is applic­a­ble. For exam­ple, it may be used for mark­ing up dia­logues, with each dt nam­ing a speaker, and each dd con­tain­ing his or her words.

Exam­ple lists and usage:

• This is an unordered list.
• It has two items.

1. This is an ordered list.
2. It has two items.
3. No, I lied, it has three.

This is a term.

This is the def­i­n­i­tion of that term, which both live in a dl.

Here is another term.

And it gets a def­i­n­i­tion too, which is this line.

Here is term that shares a def­i­n­i­tion with the term below.

Here is a defined term.

dt terms may stand on their own with­out an accom­pa­ny­ing dd, but in that case they share descrip­tions with the next avail­able dt. You may not have a dd with­out a par­ent dt.

Posted in Web Design | No Comments »

Now this I like.

via Make: Online

Posted in Architecture | No Comments »

These old fash­ioned social media books cov­ers by Stéphane Massa-Bidal must have been great fun to make

via Flickr

Posted in Design | No Comments »

I’ve been tasked with cre­at­ing a suite of iPhone/iTouch home screen icons for work. Since we have a lot of apps in devel­op­ment the powers-that-be wanted to know how they would all look all together. Using this kit as a tem­plate I cre­ated a Pho­to­shop action to auto­mate the process. It was cre­ated in CS3

Down­load iPhone Spring­board Pho­to­shop Action

Posted in Design | 3 Comments »

Really inter­est­ing dis­cus­sion on the process here. This is the result of the prod­uct man­ager and UI designer work­ing closely in a work­ing ses­sion rather than remotely via email and phone calls.

One way is to work on most of the UI, code it all up, then try to make it look good after­ward. Another com­mon way is to do some­what of the oppo­site… start with a fairly vague idea of the UI, refine both the way the app func­tions and the way it looks in one big step, then imple­ment it all in code.

I tend to design in this process, espe­cially I’m design­ing more appli­ca­tion style web­sites. Start with a UI that inten­tion­ally looks crappy with the basic func­tion­al­ity then, through hun­dreds of tiny iter­a­tions, it grad­u­ally devel­ops into some­thing sweet.

via tap tap tap on Vimeo

Posted in Tweeted, User Experience | No Comments »

Scott Hansen has pro­duced a rather use­ful field guide for the tricky sub­ject of dig­i­tal colour man­age­ment. High­light­ing yet again, that colour set­tings are depen­dent not just on your com­puter set­tings but on the envi­ron­ment you work in.

via ISO50

Posted in Design | No Comments »