Blog

MOObileFrames is a collection of mobile sketches and wireframes curated by Hannah Milan.

http://moobileframes.tumblr.com/page/1

Sarah Sampsel wrote about designing the Washington Post iPad app, in 2 entries describing a little bit about the process. The first entry describes the types of interaction, visual design, and brand issues she had to consider when designing for the device. The second shows a few wireframes of the evolution of the home screen design.

Would have been lovely to also see some of the sketches, but it's awesome that Sarah shared not just final wireframes, but a series of wireframes showing the iterations. I'm hopeful that she'll continue the series to discuss the visual design and some post-launch thoughts.

http://www.sarahsampsel.com/blog/2010/11/10/designing-the-washington-post-for-ipad-detailed-wireframes/

This notepad table is the coolest little piece of furniture. Looks like it was made for kids. Furniture you can draw on would be great in any studio lounging and waiting areas.

Via @balsamiqVal

http://www.flickr.com/photos/49333842@N00/2108954609/

Chance favors the connected mind.

I just picked up Steven Berlin Johnson's Where Good Ideas Come From after watching this sketch-note summarization of the ideas in the book.

I became a fan of Steven's after reading the New Yorker article "Watching TV Makes you Smarter" and his book, Everything Bad is Good for You. This one looks like it will be an interesting read. I'm hoping it's full of stories of long drawn out infancy of ideas, and the collisions and connections that make ideas succeed.

Found via Caterino's Deli

https://www.youtube.com/watch?v=NugRZGDbPFU

I've been using some new CSS techniques lately, and thought it was time to start experimenting with ideas. One thing that I thought was really cool was that you could use the :before and :after pseudo-classes to create boxes before and after an element and position those. I did that on the little screenshot images on this product page, to position the little + icons.

I was also interested in how I could replace some of the jQuery techniques I was using to make tooltips in myBalsamiq. One thing that bothered me about the technique in jQuery UI was that I had to use an image to create a triangle below the tool tip box. A quick search turned up a technique for creating a triangle with CSS on a demo by Jon Rohan. Jon's technique uses a few spans to create the awesome outlined bubble. I thought I'd go simpler and just put a box shadow on the main part of the bubble so I could get rid of the spans, and then I'd just use the :after pseudo-class to position a box that created the triangle below the bubble. The result is below. This has been tested in Webkit only.

Speech Bubble

Demo

Mikey sez

Code

<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>

.bubble {
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:10px;
  text-align:center;
  width:180px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #eee transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:1em;
}

Tool Tip Try 1

This one is a little trickier, because the browser will display the yellow tooltip fro the anchor as well. You could hide the title attribute by using $("a.tip").removeAttr("title"); but that's where I'm getting the tip from. This is one case where using a hidden span nested in the link might be smarter.

Demo

Hover over me!

Code

<a href="#" class="tip" title="Hi, There. I like turtles.">Hover over me!</a>

a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip:hover:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top: -8px;
  left:1em;
}

Tool Tip Try #2

This time using a span without the pesky anchor tooltip.

Demo

Hover over me!Hi, There. I like turtles.

Code

<a href="#" class="tip2">Hover over me!<span>Hi, There. I like turtles.</span></a>

a.tip2 {
  position: relative;
  text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip2:hover span:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom: -16px;
  left:1em;
}

Love this post on /Film showing a few artifacts from J.K. Rowling's creative process. Rowling uses spreadsheets she draws by making grid lines on plain paper, creating columns to outline a book's plot along a timeline, with months progressing downward. The initial columns contains a title and blurb about the plot, and further columns contain info about sub-plots. The excerpt below describes this in detail:

Rowling outlines each chapter in detail including which month of the school year it takes place in, the title and the plot. All of that seems standard. But it’s the next few columns where things get really good.

She keeps track of all the book’s subplots in every chapter and how they are developing in the real world of the book, even if they aren’t mentioned on the page. So, there’s a full column on “The Prophecy” which is the main subplot Harry is worried about throughout the book. Then there’s a column for the romantic subplot, titled “Cho/Ginny” followed by “D.A.” which follows what’s going on with Harry, Ron and Hermione’s resistance group “Dumbledore’s Army,” one called “O of P,” a column about what’s the latest with the “Order of the Phoenix,” a.k.a, the people who believe Voldemort is still alive, then separate columns for Snape (and others, I can’t read Rowlings writing) and the Hagrid and Grawp story.

Read more on /Film.

Via +Subtraction

http://www.slashfilm.com/2010/10/08/potd-jk-rowlings-plot-spreadsheet-for-harry-potter-and-the-order-of-the-phoenix/

IDAT, the Institute of Design, Art and Technology of Barcelona is holding its 1st Interaction Design Competition based on the theme of designing applications for the next generation Internet of Things.

The competition calls for ideas of interfaces, interactions, and applications that can be designed with technologies such as embedded Radio Frequency Identification (RFID), short-range wireless communication, ubiquitous data networks, mobile devices, hardware prototyping tools and digital fabrication.

The deadline to submit projects is December 15, 2010, and the award is 16.000 euro. If you haven't already started tinkering with physical computing, this may be a good opportunity to start. ;) Find out more about entry details.

http://www.interactiondesigncontest.com/?lang=en

We launched an overhauled Balsamiq.com this week and I wrote about the effort. In addition to doing interface design on the product (myBalsamiq mostly up to now) I also get to be the "webmaster." :) What that means in our small startup is doing the user research, interface design, visual design, and front end development. If you know me, you know that I dig getting to do more than one thing, so that's a win.

In any case, take a look and see how we evolved our little site. I'm planning to do another article on some the CSS 3 techniques I learned, but this high level blog entry will give you an idea of what I learned doing this project.

http://blogs.balsamiq.com/ux/2010/10/15/overhauling-balsamiq/

Harry Brignull has been posting some great quick tips for doing mobile usability testing including how to record from two webcams using an application called AmCap and how to craft inexpensive usability testing sleds for mobile phones.

http://www.90percentofeverything.com/2010/10/05/mobile-usability-testing-tip-recording-from-two-webcams

Visualizing.org looks like an exciting new community devoted to information design and sensemaking--making sense of complex issues through data and design. An excerpt from their about page describes the site:

It's a place to showcase work, get feedback, ensure that your work is seen by lots of people and gets used by teachers, journalists, and conference organizers to help educate the public about various world issues. Visualizing is also a free resource to search for data. Use Visualizing to keep up with and be inspired by the latest work from other designers and design schools. You can learn about new visualization tools, blogs, books and other resources here.

Visit visualizing.org and share your work or get data to start participating.

http://www.visualizing.org/