Tag Archives: design

Blinded by the Light

Posted on by
4

Sources of Lighting in the Quikster Landing Page

Today, everyone was linking to the new Qwikster landing page. Most people who saw it probably thought about the business implications of Netflix spinning off the DVD rental part of their company, or wondered if they would have to recreate their rental queue. I got annoyed by all the different light sources in the image.

This is what it’s like to have a design education. You are immediately irritated by the shadows on each piece of clip art in the image. It’s a gut reaction, like fingernails on a chalkboard — the image just looks wrong.

You are annoyed by the basic breakdown of the theater metaphor — here we are in our theater, eating popcorn, prepared to watch a movie or play a game, but apparently we’re facing into the projector? Which is kept behind the curtains for some reason? And why does everything have a shadow except the tagline?

To be fair to the poor designer who assembled this frankenstein, it’s difficult to create a scene out of disparate images like this, and they probably had to do it on a very tight schedule. I don’t mean to pick on them… but the shadow on that game controller is killing me.

Roger Black’s Advice for Young Designers

Posted on by
Reply

“On the skillset side, what you’ve got to do as a young person entering the field, is really equip yourself with some basic development skills. You have to be able to understand HTML and CSS. You have to know what JavaScript can do and what it can’t do. You don’t necessarily have to write cool JavaScript transitions, or even in CSS, but you’ve got to know what you can do in each. And you’ve got to be able to design so that if you have a more adept coder working with you, they know you know what you’re talking about.”
– Roger Black

Design For Yourself Fast

Posted on by
Reply

“Design for yourself fast. You shouldn’t need to think about what you want, you are what you want. It just comes out of you, and it will be good. But sometimes, you have this feeling that you have to think about it like you would for some detached client project where they sell gutters; your stuff ain’t like that, you know it by heart… so design it by heart. Fast. Don’t get trapped.”
– Alana Twelmeyer on designing for yourself (via Noah Stokes)

How to Avoid Paragraph Gaps when Using Superscript and Subscript

Posted on by
7

Frequently, when I see a webpage with superscript or subscript text, I see associated gaps in the paragraph. This is caused because the default way browsers render super and subscript text is to add enough vertical space in the paragraph to show them. The result is ugly, but as you can see in the following screenshot, you can easily fix the problem with just a few lines of CSS.

HTML Superscript and Subscript Handling

In the first paragraph, you can see the layout gap problem, and in the second paragraph, you can see the paragraph as it should be displayed, by using the following CSS rules.

sup {
	vertical-align: baseline;
	position: relative;
	bottom: .33em;
}
sub {
	vertical-align: baseline;
	position: relative;
	bottom: -.33em;
}

The browser shifts the super and subscript text by using the vertical-align CSS property, which leaves gaps in the paragraph. By resetting this property to the defaul value of baseline, we get rid of the gaps. Then we restore the appearance of the text by using position: relative; and shifting the bottom up or down by .33em. Since this uses ems, you can use these lines in your reset stylesheet, no matter what font treatment you use on your site. Now go forth, and may paragraph gaps never plague you again!

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

Talk Like Warren Ellis

Posted on by
Reply

A few weeks ago, I called my friend Miles and asked him to help me out with the programming on a project I dreamed up. Here’s how I put it to him:

Scott: “I want you to help me with a project that will either get no attention at all, or a ton. [pause to build anticipation] Talk Like Warren Ellis dot-com.”

Miles: “Oh, awesome.”

In case you’re not familiar, Warren Ellis is the famed author behind comics like Transmetropolitan, Planetary and the novel Crooked Little Vein. He is famous on the internet for posting horrifying images of body modification on his blog and has one of the most popular Twitter feeds on the network.

On Twitter, he frequently signs on for the day by saying something along the lines of “Good morning, my little lovegoats of the internet!” Because he posts this kind of thing frequently, I had the idea that we could construct a random warren-ellis-ism generator by compiling list of vocabulary words and parsing his grammar.

Miles got excited because he had tried something similar in college with a James Bond movie title generator, and had some ideas for how to improve the coding.

After a lot of scrolling through Warren’s twitter archives and debating the finer points of Warren Ellis Grammar, Miles delivered the final code to me, and now you can enjoy the results at TalkLikeWarrenEllis.com.

The day I posted it, it only got traffic from people I know, but we made it this morning. Right before I went to lunch, Warren signed into Twitter and said “Back from holiday. Who requires punishment?”

I replied “Welcome back! While you were gone, I made this:” and added a link to the site. Then I went to lunch, hoping that he might see it in the flood of replies he certainly gets.

When I came back from lunch, the site was getting a bunch of traffic. Turns out he saw it:

Warren Ellis Noticed Us!