Today I’m going to show you how to make, out of a simple DIV, this:

Box-shadow takes 6 attributes:

1. X offset
2. Y offset
3. Blur size
4. Grow/Shrink size (optional)
5. Color
6. The “inset” flag (optional)

Here are some basic uses of a single box-shadow declaration:

.dropshadow {
    box-shadow: 0px 5px 10px #444;
    }

.fatshadow {
    box-shadow: 0px 5px 10px 5px #444;
    }

.insetshadow {
    box-shadow: 0px 5px 10px #444 inset;
    }

Interesting stuff is possible, for instance, by using no blur, and a semi-transparent white color:

.highlight {
	box-shadow: 0px 1em 0px rgba(255,255,255,0.5) inset;
}

Or, more simply, by using a grow factor on an inset white shadow, without any X or Y offset, we effectively add an inner border.

.innerborder {
	box-shadow: 0px 0px 0px 4px white inset;
}

All of that is fine and dandy, but gets much more interesting when you use multiple box-shadows. You simply separate the declarations with a comma. Each new declaration is painted under the preceding one.

.theworks {
    box-shadow:
/*
gray inset shadow all around,
stronger on the bottom
*/
      0px   -1px    2px         gray inset,
/*
...on top of an inner white band
*/
      0px    0px    0px    3px  white inset,
/*
dark inset shadow under the white band,
stronger on the top (by offsetting it 1
pixel down.
*/
      0px    1px    5px    2px  black inset,
/*
highlight, using semi-transparent white,
without a blur
*/
      0px   15px    0px    3px  rgba(255,255,255,0.5) inset,
/*
Under the highlight, darken the bottom
of the div, with lots of blur
*/
      0px   -8px   15px    0px  black inset,
/*
Done with insets, now on to the outer layers
*/
/*
A white highlight below the div...
*/
      0px    2px    4px    2px  white,
/*
...and a dark recess above.
*/
      0px   -2px    4px    2px  darkgray,
/*
All of it on top of a fat gray outline
*/
      0px    0px    0px   10px  lightgray,
/*
And now some fun. Let's add a lighter
clone to the right, a darker one to the
left, and stack those lower and lower,
and wider and wider. 3D button!
*/
      1px    1px    0px   11px  silver,
     -1px    1px    0px   11px  darkgray,
      1px    4px    0px   12px  silver,
     -1px    4px    0px   12px  darkgray,
      1px    7px    0px   13px  silver,
     -1px    7px    0px   13px  darkgray,
      1px   10px    0px   14px  silver,
     -1px   10px    0px   14px  darkgray,
      1px   13px    0px   15px  silver,
     -1px   13px    0px   15px  darkgray,
      1px   16px    0px   16px  silver,
     -1px   16px    0px   16px  darkgray,
/*
Finally, let's stack three bona-fide
drop-shadows, each lighter, each offset
left.
*/
      0px   16px    4px   17px  black,
     -4px   20px    8px   17px  gray,
    -12px   30px   16px   17px  silver
    ;
}

Anytime I interview, I always bring along a list of questions to ask the interviewer. These are mostly based on my research of the job, the company, and the industry, but there are three that are always there, no matter what. They are the questions that get you hired.

1. The Vision Question.

The first question should be asked after your interviewer has explained the company and position to you. You’ll first ask about expectations for the position, job responsibilities, etc… Then as it seems that the topic has been covered, you pop out this power-question:

“What does success look like?”

This moves the topic from codified language about nitty-gritty to what really matters to your interviewer. Note that the wording matters: We’re asking about their vision of success… which relates to their motivation, what they’re dreaming about, what they hope for. If they understand the question, they’ll tell you what their greatest desire is. If you listen well, and you can show that you share that vision, that you’re excited about it too, then you’ve connected on the most crucial level: The interviewer know that you will be working on their dream. They now want you in the position, badly.

If they don’t understand the question, you can give them hints: “What does success look like? … Is it the team on the cover of Wired magazine? A billion-dollar IPO in 6 months? Competitor X closing their doors? The CEO making our division her top priority?”

2. The Team Question.

You need to ask about your future boss, of course. “Who will I be reporting to, what’s their position, what’s their top goal?” But beyond that, and more importantly, you need to ask about the team you’ll be working with:

“Who’s on the team, what are they like, what are their goals?”

Ask for names and write them down. Be curious about them. Ask if you could possibly be introduced after the interview (but don’t say “on the way out”, ever!)

This is vital, because it’s also one of the primary concerns of your interviewer: Will you fit with the people who are already there? They desperately hope you will, and by asking this question, you show that you share that hope. By wanting to meet them, or at least know their names and personalities, you make it clear that you take very seriously the responsibility of working well with the team. You’ll clearly be an easier hire.

3. The Commitment Question.

This one closes the deal, and makes sure that you never leave an interview without a very good chance to be hired. It’s a dead simple question, but it goes very far:

“Is there anything you’ve heard today, or haven’t heard, that makes you doubt that I would be a fit for the position and the team?”

This question wins the interview. Because at this point, you’re in one of two scenarios:

1. The interviewer isn’t comfortable with you: You’ve missed the mark on some questions, they weren’t convinced about something you said, or there’s a problem with your personality… They may just have a vague feeling of unease about you. They’re a nice and polite person, and don’t want confrontation, so they’re keeping those reservations to themselves so as not to hurt your ego. But that doesn’t help you.
2. The interviewer is comfortable with you, likes your answers, thinks you may be a fit. They may even be pretty excited about you. But they’ve just met you, and they’re not sure, so they’re damping at least the expression of their enthusiasm. They’re not allowing themselves to decide yet. That doesn’t help you.

If you’re in case #1, asking the question gives them a comfortable place to tell you about that nagging thought or feeling, or tell you about the answer you screwed up. And they will feel great, just by having been able to spill their guts. They’re no longer holding secret thoughts from you, so they’ll be more likely to trust you.

Then you address their concerns. You acknowledge them, you fix your answers, you tell stories that illustrate your points. And then you ask the question again, and rinse and repeat, until you reach case #2: They do not have a doubt that you’re a fit.

The point of asking the question in case #2 is that it makes them answer: “No, everything sounds good.” Having said that, they’ve committed themselves. They’re less likely to come up later, after the interview, with reasons why you’re not a fit. They’ve made up their mind, and by voicing it, sealed their opinion of you.

You can leave satisfied that you’ve aced the interview. You’ve also demonstrated that you know how to listen, tease out people’s true concerns, needs, and goals, and address them effectively. These are vital skills in any business, and demonstrating them at the interview can help you win the job over those who may be just as or more qualified for it. Given the choice between you, a problem-solving, team-conscious, vision-focused candidate and anyone else without that attitude, the choice is compellingly in your favor.

If you use these questions on your next interview, please do let me know how it went.

And good luck to Lauren on that job interview! Knock’em dead!

Here’s what we’re going to build today:

First, let’s understand how text-shadow works. It’s pretty simple.

text-shadow takes 4 parameters: X offset, Y offet, Blur, and color.

.simple {
    text-shadow: 5px 5px 5px black;
}

We can put multiple shadows by separating them with commas. Each shadow is drawn underneath its predecessors.

.double {
    text-shadow:
    5px  5px  5px black,
    10px 10px 5px red;
}

If we use no blur factor at all, and repeat shadows a bunch of time, we can do something like this:

Note: This was tested on Safari/Mac… it should work in Chrome as well, your mileage may vary if using another browser.)

.woodblock {
    text-shadow: 1px  1px 0 white ,
                -1px -1px 0 white ,
                -1px  1px 0 white ,
                 1px -1px 0 white ,
                 2px  2px 0 white ,
                 3px  3px 0 peru ,
                 4px  4px 0 peru ,
                 5px  5px 0 peru ,
                 6px  6px 0 peru ;
}

From there, it’s not far to…

.outlined {
    padding: 0.2em;
    font-family: "Marker Felt", Georgia, serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -4px;
    text-shadow:
      -1px -1px 0    white ,
      -2px  0   0    white ,
      -1px  2px 0    white ,
       0    3px 0    white ,
       2px  2px 0    white ,
       3px  0   0    white ,
       2px -1px 0    white ,
       0   -2px 0    white ,
      -2px -2px 0    darkgoldenrod,
      -3px  0   0    darkgoldenrod,
      -2px  3px 0    darkgoldenrod,
      -1px  4px 0    darkgoldenrod,
       1px  4px 0    darkgoldenrod,
       3px  3px 0    darkgoldenrod,
       4px  1px 0    darkgoldenrod,
       3px -2px 0    darkgoldenrod,
       2px -2px 0    darkgoldenrod,
       1px -3px 0    darkgoldenrod,
       5px  0px 0    darkgoldenrod,
       5px  5px 0    darkgoldenrod,
       0px  5px 0    darkgoldenrod,
      -4px  2px 0    darkgoldenrod,
      -4px  0px 0    darkgoldenrod,
      -3px -2px 0    darkgoldenrod,
       0px -4px 0    darkgoldenrod,
       3px  6px 12px black
    ;
}

A little trickier this time: We’re going to alternate light and dark shadows. The light one will be offset 1px more to the right, the dark one 1px farther down. The overlap will give us a nice 3D effect.

.shaded {
    color: lightskyblue;
    font-style: italic;
    letter-spacing:-2px;
    text-shadow:
  /* A non-offset shadow, for sharper-edged text. */
     0px  0px  0px lightskyblue ,
  /* Now we stack the light and dark layers, with offsets. */
     1px  0px  0px lightcyan ,
     0px  1px  0px lightblue,
     2px  1px  0px lightcyan,
     1px  2px  0px lightblue,
     3px  2px  0px lightcyan,
     2px  3px  0px lightblue,
     4px  3px  0px lightcyan,
     3px  4px  0px lightblue,
     5px  4px  0px lightcyan,
     4px  5px  0px lightblue,
     6px  5px  0px lightcyan,
     5px  6px  0px lightblue,
     7px  6px  0px lightcyan,
     6px  7px  0px lightblue,
     8px  7px  0px lightcyan,
     7px  8px  0px lightblue,
     9px  8px  0px lightcyan,
     8px  9px  0px lightblue,
    10px  9px  0px lightcyan,
     9px 10px  0px lightblue,
    11px  9px  3px darkgrey,
  /* Finally some actual shade, offset the other way. */
     9px 11px  5px grey,
     2px 18px  8px silver,
    -8px 26px 12px lightgrey;
    -webkit-transform: rotate(3deg);
}

More examples follow. Please look at the page’s HTML source code to see how it’s all done.

Feel free to let me know what you think in the comments section below, or pop me a tweet. And if you use some of these techniques in your code, do let me know!

I took part in Startup Weekend Denver, as part of the Global Entrepreneurship Week. The gist: Dozens of people pitch their startup ideas on Friday night, a half-dozen are upvoted, and participants form teams. Each team builds a business before Sunday night, when they present it to a panel of judges.

I’d already taken part in two Startup Weekend events, once on the winning team. This time I came in to pitch an innovative crowd-funding site for The Beanstalk Foundation. The pitch did get up-voted, but I couldn’t staff a full team, so I joined instead with the most inspiring entrepreneur in the room.

Miles the Candy Sushi Kid is 10 years old, and has been in business for three years. He makes and sells Candy Sushi. His first goal, to sell 1,000 boxes and raise money for charity, he accomplished in 2009. He came to Startup Weekend to get help on his branding, manufacturing, distribution, and website. He found what he was looking for.
My friend Robbie Jack, developer evangelist for FullContact, ran forward with a brand mark and domain name, and did all the hard work on setting up a Shopify e-commerce account, social identities, and a start on brand identity. Lauren Hybinette, a freelance illustrator and designer, picked up the torch and took the design direction to a more playful, kid-oriented approach. I lent a hand on design and illustration, and filled in the content on the site and product catalog. Meanwhile Alec Campbell, who is a global search strategist on weekdays, worked out a detailed business plan with Miles, in a serenely patient game of 20,000 questions which was the most amazing requirements gathering exercise I’ve ever seen. Shannon Ewing, as our project manager, helped everyone with everything, and before we knew it, we were close to done.

I was most moved, however, by the most intelligent member of our team, Lynnea Louison, a.k.a. “mom”. As a parent, I know how challenging it is to support your children without suffocating them, to help them reach their dreams without taking the victory from them. Our kids need our guidance, but we need them to learn to navigate by themselves. I’ve rarely seen anyone manage that as deftly, prudently, patiently as Lynnea does with her son. Mom smooths out every bump in the road, but she also makes sure that Miles is the one who chooses the path, and takes every step.

We helped him expand his product line, come up with funny names and silly characters, ideate a new brand and imagery, and build a complete Shopify e-Commerce site, Facebook page, and Twitter following. Saturday saw a flurry of calls to potential manufacturers, candy stores, restaurants, and we landed some pre-commitments and appointments for Miles and his mom in the weeks to come.

More amazingly, the site hit over 1,200 unique visitors in the first 12 hours, and many attempts to purchase product. The shopping cart isn’t active yet, but we are taking email addresses.

Sunday night I assisted Miles in delivering the 5-minute presentation to the judges. Miles is very good in front of an audience: open, relaxed and confident. His well-practiced presentation won the judges over, and he won Startup Weekend Denver. He now goes on to compete in the Global Startup Battle 2011.

Check out the video entry we made for the Battle, and of course, check out the delicious wares at http://sushimee.com.

The kid is ten!

In 95, Ellison wanted to buy Apple, so he could walk Steve back in as the new owner, and they could both make lots of money. Steve convinced him otherwise. Here’s the money quote from the Business Insider article:

Ellison thought it was stupid that some “fund manager at Fidelity” would make more money on Apple’s success than he or Jobs.
Jobs responded by saying, “I think if I went back to Apple and didn’t own any of Apple, and you didn’t own any of Apple, I’d have the moral high ground.”
Ellison’s response: “Steve, that’s really expensive real estate, this moral high ground.”

Most people overestimate the value of money. The wise know to give up a little money, or even a lot, for the infinite returns of not having to compromise.

It’s a luxury, it has a price, but it’s worth it. I’ve once walked away from a years’ salary with my integrity intact… And that has earned me goodwill and trust from some long-term business partners.

Have you ever paid the price of the moral high ground? Was it expensive? And how’s the view from up there?

When having a meal or coffee with a friend or family, put your phones on vibrate, and put them together. Lay them atop one another on the table, to the side.

Our phones are wonderful devices that allow us to reach farther. But they can make it harder to reach closeness.

While I’m engaging with you, my friend, there is a line reaching from my pocket to the outside world. I’m not fully present with you, and you’re not fully present with me, because at any moment either one of us can be pulled back into our personal space, into a different conversation.

Putting our phones together marks that the moment is for togetherness. It makes it so that if either of us gets a call, or a text, it will interrupt both of us. We won’t know which phone it is.
The communication line from the outside world becomes a shared line. If somebody calls, they’ll call “our phones,” not mine or yours.

The next time we meet, I’d like us to do this. Because I want to be present with you, and I want you to be present with me.

If you like the idea, let me know!

I’m currently engaged in writing a science-fiction novel with my father. It’s a fun thing to do together when you live eight time zones apart.

As part of the process, I’m educating my father on the latest happenings in science, and futurism… It’s an interesting time for certain.

Whale Wireframes.gstencil (881Kb .zip)

It’s important to note that this is meant for the Pro version of Omnigraffle, with table support. It includes a dozen custom-made shapes, the kind that can only be added to OmniGraffle by writing XML code.
These shapes are mostly rectangles with stroke only on three sides, and they’re built so that the unstroked side does not curve when using corner radius:

Using these shapes inside tables, one can build interesting interface elements, such as button bars, progress bars, etc. Each of the composite items below acts as a single table object in OGP:

I hope you’ll find these useful. I’m always working on this wireframe kit, so stay tuned for updates, and let me know what you think.

There is often bitterness in software development. It is not hard to see the tense relationships between developers and marketing, between users and customer support, between business and IT. When I entered the UX field nine years ago, I put myself in the interesting and strange position of being the intermediary, the emissary, in a protracted cold war.

By itself, UX is hard. There are many threads woven into the fabric of what we call User Experience. Information Architecture, derived from library sciences; Usability Engineering, which comes from the archetypal white-lab-coat scientific approach; Interaction Design, which borrows from anthropology; and Graphic Design, with its vibrant connection to culture and creativity. And the merging of these approaches brings with it some discomfort, as practitioners try to embrace tools and techniques from disciplines that have very different origins, and sometimes conflicting worldview.

Adding to this discomfort is the challenging position of translator between tech, business, and users. It’s not easy being a scientist-librarian-anthropologist-designer, and it is not easy being the go-between for groups and constituency that have had long-standing miscommunication, based on fundamentally different values.

Compassion helps. I do not subscribe to the Buddhist religion, but I do agree with many of its philosophical underpinnings. And I believe it is a tremendous asset, a powerful tool, to be able to develop unconditional acceptance, respect, and love for your constituencies. To be a good UX practitioner, I believe you have to love your users, love your developers, love your suits, and love your sales folks… Especially if they don’t love each other.

You need not only to understand what they want, but why they want it. You need to understand their context, the context in which their goals make complete sense. You need to take on their goals and fears as if they were yours. You need to do this for all your constituencies. At the end of this process, if you’ve not become irreparably schizophrenic, you can actually start resolving their issues in a way that works for them, instead of just for yourself.

I learned that lesson anew every time. As a former designer and developer, I had to let go of my latent negative stereotypes about users. I was helped by Alan Cooper’s aphorism to view users as “smart, but very busy.” I was helped most, of course, by the pernicious power of contextual inquiry (observing users in their workplace), which ensures you will relate to your users as you gather their requirements.

As a newly enamored user advocate, I had to play against the knee-jerk apprehensiveness of developers, and keep myself involved in code reviews and architecture discussions, database schemas and framework discussions. I did this because I understood the very real, dire, critical importance of making the right technical decisions early.

Loving each new client became easier and easier, as I gained more insight into the intricacies of various businesses and industries. It took longer to fully embrace and accept management, until I was put in positions of leadership, and discovered how hard it is to keep an open heart while juggling the diverse responsibilities of project, client relations, vision, motivation, morale, and time.

I use some little mind-tricks on myself to keep an open, compassionate heart. If I am angered by or disappointed in someone, I put myself in their shoes: I have angered and disappointed others before, I know what that feels like. I take a moment to empathize. I take a moment to remember the context that person is operating in. Then I try to offer the reaction that is appropriate and useful to the receiver.

Usually somewhere in the middle of this process, a thought comes that chases away all the anger, and leaves the mind sharp and clear. Empathy becomes possible again, as well as rational, constructive, creative and positive thinking. Since I’ve started using this process, I do talk a lot less! I also rarely waste time explaining, justifying, and fighting for my knee-jerk emotional responses.

I’ve also found compassion to be contagious, inspiring, and empowering. I took the habit of using my little compassion exercise to deal with office gossip. If we’re talking about someone who’s absent, I’ll talk about what I’ve observed about their values, their virtues, their vitality. Conversation soon turns back to the actual issue, instead of character judgment.

You can’t do that in a condescending way, of course. You have to be compassionate toward those who feel the need to gossip.

They’re all very good people. And I mean that from the bottom of my heart.

I’d say more about it, but I’m biased.