tag:blogger.com,1999:blog-72027198135710274692024-03-05T15:25:23.561-08:00User Experience Design & CreativityClockworkTwinkieshttp://www.blogger.com/profile/12168097965219158898noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-7202719813571027469.post-62151338032547555622011-04-22T13:28:00.001-07:002011-04-22T13:28:53.986-07:00testClockworkTwinkieshttp://www.blogger.com/profile/12168097965219158898noreply@blogger.com0tag:blogger.com,1999:blog-7202719813571027469.post-38046404137890011982011-04-06T08:33:00.000-07:002011-04-06T08:33:03.654-07:00Xmarks setupXmarks bookmark sync manager seems pretty well designed. I liked this little layer window that prompts me to log in or "run setup wizard". <br />
<br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6RQ1ehkdFX0KOM4iwk81hmm35-gsVNZGCX7Aqa7FVubl2_bn52CG46sww_YEdvI6bziC25JILClki8b0GRiwYiEwIFs9fth_F3Y5rE26GaQU3FQcrvQNTytxvUOpqW0mhodF8TDc9YT4/s1600/xm1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6RQ1ehkdFX0KOM4iwk81hmm35-gsVNZGCX7Aqa7FVubl2_bn52CG46sww_YEdvI6bziC25JILClki8b0GRiwYiEwIFs9fth_F3Y5rE26GaQU3FQcrvQNTytxvUOpqW0mhodF8TDc9YT4/s320/xm1.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">I like this style of contextual prompts for a form. As you tab through the form, a friendly, not overly wordy prompt appears.</div><div class="separator" style="clear: both; text-align: left;"></div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj911aIIj6X7ulYBS_0EPHFfLvNgGYvylaWg5aoT0uEXistu-Idov8XOp0ARmCPmKy9_EuHo__kcXxCnvY5CPoRYPm44UfCcAIl35Pw6fLuokhXhfWXutNABPlxjtecodl7u-9KJhdaeLE/s1600/xm2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj911aIIj6X7ulYBS_0EPHFfLvNgGYvylaWg5aoT0uEXistu-Idov8XOp0ARmCPmKy9_EuHo__kcXxCnvY5CPoRYPm44UfCcAIl35Pw6fLuokhXhfWXutNABPlxjtecodl7u-9KJhdaeLE/s320/xm2.png" width="320" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;"></div><br />
The wizard does a good job of prompting the user, funneling behavior, showing progress, and showing status.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7TiJbJCqrUrhNGGqFUnW43NkbbxQ5xa6uPtct0dNmRS2d-T-J1ow7h6-oHdmasWVnx1wjJzrT155yX-_o48U4LiOhitD1SNKbuZ88eKaUPo3LWWwLbjG_YrSZxHbVrH-izFReDo73s4/s1600/xm3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7TiJbJCqrUrhNGGqFUnW43NkbbxQ5xa6uPtct0dNmRS2d-T-J1ow7h6-oHdmasWVnx1wjJzrT155yX-_o48U4LiOhitD1SNKbuZ88eKaUPo3LWWwLbjG_YrSZxHbVrH-izFReDo73s4/s320/xm3.png" width="285" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;"></div><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3qRGuVN19HqNWrmoHQp_fQcgfwjBehOIxIeR-njmCXGeHNbLfiTYhyphenhyphenpv7cQPmFFKJao4q9Z_RIIIMTbsr6LCwtDaAFWeItEwuyJ_m3OQmAZgevmorQtl63TKVE0gfy3narP-_ATeFW0/s1600/xm4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3qRGuVN19HqNWrmoHQp_fQcgfwjBehOIxIeR-njmCXGeHNbLfiTYhyphenhyphenpv7cQPmFFKJao4q9Z_RIIIMTbsr6LCwtDaAFWeItEwuyJ_m3OQmAZgevmorQtl63TKVE0gfy3narP-_ATeFW0/s320/xm4.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><br />
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7202719813571027469.post-84394941011564809362010-04-15T12:35:00.000-07:002010-04-15T12:38:31.094-07:00Books & Other ResourcesThis is where I post <a href="http://www.evernote.com/pub/carolbales/DesignResources#Note/8ae5f01c-478f-44b4-95a9-39cc1f3e66be">resources</a> for the AiA classes I teach.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7202719813571027469.post-22496377188509711822009-10-04T14:43:00.000-07:002010-07-17T14:46:22.576-07:00Design NotebookA notebook of Web interface designs that I like.<br /><div><br /></div><div><br /></div><div><br /></div><div><b>Things I like...</b></div><div><b><br /></b></div><div>Have become too lazy to post dates and screenshots. </div><div><b><br /></b></div><div><b><a href="http://wavingdrowning.com/">http://wavingdrowning.com/</a> </b>Breaks all kinds of rules about composition, but its intriguing and evocative. </div><div><b><br /></b></div><div>December 2, 2009</div><div><a href="http://www.freshbooks.com/">Freshbooks.com</a> has a cool "ticker" that indicates how frequently their service is being used.</div><b></b><br /><b><div><br /></div></b><div>December 1, 2009</div><div><a href="http://designtutorials4u.com/30-retro-and-vintage-websites-for-design-inspiration/">This site has vintage/retro inspired Web sites</a></div><div><br /></div><div><b><br /></b></div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23JFsciZquVW3BHUUxANyzkRfwnLywQSgSvOyUgc_oAfwAzxEqhFMYtA2U8CMGw-wxusuu7hD_lNHtCqKk_PRSzNzAlRaUCai6hjLjtz3uXKr_mCh3oErjlDbF4YDFVc8022buSSGNCM/s1600/11-23-2009+10-59-19+AM.png"><img id="BLOGGER_PHOTO_ID_5407329460423086642" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 264px; CURSOR: hand; HEIGHT: 154px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23JFsciZquVW3BHUUxANyzkRfwnLywQSgSvOyUgc_oAfwAzxEqhFMYtA2U8CMGw-wxusuu7hD_lNHtCqKk_PRSzNzAlRaUCai6hjLjtz3uXKr_mCh3oErjlDbF4YDFVc8022buSSGNCM/s320/11-23-2009+10-59-19+AM.png" border="0" /></a><br /></div><div>November 23, 2009</div><div><br /></div><div>This is great form design. It validates each field upon tabbing. So smart. Also a cool service. <a href="http://www.pearltrees.com/">http://www.pearltrees.com/</a></div><b></b><br /><div><b><br /><div><br /></div></b><br /><div>17 Oct 2009</div><br /><div>This is an amazingly helpful site that helps you figure out type spacing & leading. <a href="http://www.typetester.org/">http://www.typetester.org/</a></div><br /><div><b><br /></b></div><br /><div><br /></div><br /><div><img id="BLOGGER_PHOTO_ID_5391504015121492946" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand; HEIGHT: 190px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBXqvgRjxia_L_sGegfIgtaXAxi2Es_dLmhxS9Oc-HSBbeaqykeQwh8DnNUFUbRj6arHBFKnKpSAjmFPNvwdWmM6uFgly_KRVq9y33eJzlxTSAzX3NAy8z9rzMjBaRArstxxmMDuT1Gg4/s320/mod.png" border="0" /> </div><br /><div>11 Oct 2009</div><br /><div>I just saw these new drink kiosks at Sam's yesterday. I was impressed with how they turned each logo into a button for a super-simple interface. Here's an article about mondo designers in <a href="http://www.fastcompany.com/design/2009/">Fast Company</a>. </div><br /><div><br /></div><br /><div><br /></div><br /><div><br /></div><div><img id="BLOGGER_PHOTO_ID_5391020251802815586" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand; HEIGHT: 170px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Mzv5mdzQzYa5TMT0f-YnTqBCrNdvxiUxLNc_V3R9LWtipaMmvYKJ-vXCgebKGU3vnpcKVWLZdO3oQ_hVoSXoUuKtaLZM5mcJMkC2mVaVvm3UJo3RqorBlVyQReLXitp1-QUgwGNgoR8/s320/twitter.png" border="0" /></div><br /><div>9 Oct 2009</div><br /><div>This is a fun animation treatment from commoncraft.com for "<a href="http://www.youtube.com/watch?v=ddO9idmax0o&feature=player_embedded#">Twitter in Plain English</a>."</div><br /><div><br /></div><br /><div><br /></div><br /><div><br /></div><div></div><div><br /></div><br /><div><img id="BLOGGER_PHOTO_ID_5388873298200719666" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 212px; CURSOR: hand; HEIGHT: 189px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBFcTHgqeYMBqOCV7e1PDp3wBoBuRlWnpBDWDehc6QnkHhd5hSfH8bqE6SvnqiI9p2SZsX6JbuFuRI7VGJPZAbA5FaJ2viQlU4UwwY59_35xbxbCOJ3huJZazupm65rKLhQooY1cDR08/s320/tdr.png" border="0" /></div><br /><div><br /></div><br /><div>This is lovely. Good design with type, good page layout, good interaction design. And almost entirely without color. <a href="http://typedeskref.com/">http://typedeskref.com/</a> </div><br /><div><br /></div><br /><div><br /></div><br /><div><br /></div><br /><div><span class="Apple-style-span" style="font-family:verdana;"><b>Good resources...</b></span></div><div><br /><div><br /></div><br /><div>About Brand Identity: <a href="http://www.underconsideration.com/brandnew">http://www.underconsideration.com/brandnew</a> </div><br /><div><br /></div><br /><div></div><br /><div>Ad Goodness: <a href="http://www.frederiksamuel.com/blog">http://www.frederiksamuel.com/blog</a></div><br /><div>not only a good source, but a cool b&w interface</div><br /><div></div><br /><div><br /></div><br /><div>A List Apart: <a href="http://www.alistapart.com/">http://www.alistapart.com/</a></div><br /><div>o boy! this weeks' is about search design</div></div><br /><div><br /><br /><div><br /></div><br /><div></div></div></div>Unknownnoreply@blogger.com0