Speedbumps…

1. No Heath Ledger

The Dark Knight Rises doesn’t have the huge push that The Dark Knight did simply because of the untimely death of one of its stars. As sad as it is, his passing was great publicity.

2. No Joker

The Dark Knight played a familiar and well-loved storyline – Joker vs Batman, and fans were eager to see this new gritty take on a classic tale. Bane, however, is less well known, and some fans are feeling that this third installment loses any semblance to the Batman universe they have always loved.

3. Diluted Year

For fanboys, 2012 is a diluted year. With Prometheus, John Carter, The Amazing Spider Man, The Avengers, and The Hobbit launching this year, there’s only so much time to gawk about any one of them. The Dark Knight Rises has to share the spotlight with many other films this year, which can make standing out difficult.

4. No 3D

Honestly, 3D is a moneymaker, and since The Dark Knight Rises lacks this price-booster, it won’t see the same numbers that The Avengers is currently seeing.

Things it’s got going for it…

1. It’s the final one.

Being the last and possibly most dramatic installment means that the film definitely comes across as an event worth catching.

2. Catwoman and Bane

If there were trailers that focused more on the individual characters that fanboys could get excited about, I think there could be more buzz generated. I’m sure Warner will release more character-centric clips, teasers, and merchandise to help remind fans that this IS a classic Batman tale at the end of the day. I would like to see more of Anne Hathaway’s Catwoman, as opposed to just pictures of Bane floating around. I think that more of Lt. Gordon would be helpful as well. All of these clips of new characters and unfamiliar situations are giving the impression that The Dark Knight has dwindled from its roots, and the negative buzz that is generated is going to translate into lost dollars. Try to at least release new character art that helps tie the film back to its foundation.

All in all, I know it’ll do well. It’s a blockbuster in the making. But will it beat the Avengers for a strong opening? I doubt it, honestly. I’d expect it to surpass $140 million in its first weekend without any trouble, but passing the $200.3 million mark set by The Avengers? Don’t see it. My guess is $145million – $155million on its opening weekend.

C’mon TDKR. Surprise me.

A good designer once told me that your workstation is “just a shovel” at the end of the day – a tool that you use to get stuff done, and done well. I just wanted to show off the nice shovel setup that The Epitec Group has provided me with.

• MacBook Pro 13″ – 2.8 GHz i7 – 8GB RAM
• Mac OS X 10.7 +  Windows 7 with Microsoft Visual Studio 2011 + MVC 4
• Adobe Design Standard CS5, MacRabbit Espresso, Balsamiq, Komodo Edit, CodeKit, Office 2011, and more
• Nice Git source control system
• Lync Communications system with a kickass Polycom phone
• Apple Thunderbolt 27″ display + Wacom Intuos4
• Apple iPhone 4
• Leather padfolio for client meetings

Thanks Epitec for giving me a good experience with some pretty slick tools. I enjoy digging into my work with this shovel. A lot.

In my last post, I explained how the ever-mysterious Hexadecimal color selector worked. Just as I promised, here is a quick run-down of another CSS color notation – rgb() and rgba().

Cross Browser, Anyone?

One of the beautiful things about using hex or rgb() is the guarantee of universal browser support. For working with anything older than IE9, this is a legitimate concern.

Interestingly, both hex and rgb() do the exact same job – they produce a color based on a mixture of red, green, and blue (RGB). In hex, there is a special shorthand method using hexadecimal integers, producing an easy to copy/paste (but difficult to interpret at a glance) selector. The rgb() method does the same thing, but it presents the mixture in a way than can feasibly be edited without the use of complex interpretation.

The Anatomy

The rgb() selector is typically written as follows.

rgb(0, 0, 255)

In parantheses, the first number is red, the second value is green, and the last one blue. Simple, right?

The maximum amount of color than can be inserted into any one of them is 255, so the numbers for each would somewhere between 0 and 255. All you need to know after that is a few simple color mixing principles, and you’re good to go. It is truly a simple notation.

To get black, set all colors to “0″.

To get white, set all colors to “255″.

To get a gray, set your RGB values to the same number. The closer to 255, the lighter the gray, the closer to “0″, the darker the gray.

To lighten a color mixture, you simply add the same number to the R, the G, and the B. To darken, you subtract an equal number.

Play around with it in Photoshop! Pretty soon you’ll be sight-reading rgb(). (And you’ll be a total nerd for it)

RGBA()

Oh, and also, the newer big brother to rgb() is rgba(). It works exactly the same as rgb(), except it adds a fourth digit in the parantheses. This one is used to define the “alpha” (transparency) of the color.

rgba(255, 255, 255, 0.3)

Just remember that in the last number, 0.0 means completely transparent, and 1.0 means completely opaque. Easy! And sexy!

The rgba() selector is supported IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.

I took a short break to get to know my CSS colors a bit better, and its really fascinating to go beyond the mindless “let Photoshop define the hex for you then copy/paste” perspective, and appreciate what the values mean.

Today I’ll be explaining hexadecimal colors, but in my next post, we’ll take a look at the rgb() approach.

Hexadecimal Colors

Ahh, classic hex colors, how I love them so. Why, you ask? Well, because they’re so damned easy to copy/paste, honestly. In Photoshop, I can quickly use the color picker to click on an area, and viola, my hex key appears in a single field, from which I can copy/paste straight into my CSS. HSL and RGB, on the other hand, require memorization or alt + tabbing to plug into the CSS, and although they are more easily interpreted forms of color-selection, the one or two seconds I save with hex makes all the difference in the world.

The cool thing about hex is that you shouldn’t really have to memorize them. Understanding how they work behind the scenes should be much more efficient, allowing you to quickly understand what family a color belongs to, simply by glancing at it.

So how do hexadecimal colors work? First, it should be established that hexadecimal uses the numbers 0-9 and the letters a-f. The reason for the letters is so that numbers 10-15 can be abbreviated to a single digit. ‘A’ is 10, ‘B’ is 11, and so on. Obviously, 0 would imply a diminished value, whereas ‘f’ would be the highest value.

#RRGGBB

The first two integers correspond to the amount of red being used, the second two are green, and the last two are blue. You know how you have an hour and a minute hand on a watch? Think of the first integer of each color (#RRGGBB) as the “hour” hand, and the second integer (#RRGGBB) as the “minute” hand. Adjusting the first color integer makes big changes in the value, whereas the second color integer makes fine-tuned tweaks in smaller iterations, relative to the first integer. Make sense?

Also, it should be noted that whenever your reds, greens, and blues are mixed evenly, the resulting mixture shows up in grayscale. So whenever you have #DDDDDD or #c1c1c1, you can automatically know that its a gray-ish color. (Also, CSS hexadecimal lets you abbreviate certain colors. If the first and second integers of a color value match in all three colors, you can combine the two color values into one. For example, #FFCC00 can be abbreviated as #FCo.)

Usually it is faster to use hexadecimal for copy/pasting – it can be an amazing utilitarian color value, and its supported in all major browsers. Hopefully, now you can appreciate the seemingly random jumble of letters and numbers that work behind the scenes to give us all the colors of the rainbow, in jumblesome hexadecimal form.

This year, I’m running into the year with some set goals. I’m so aware of areas where I need to grow, if I stay where I am right now as a UX designer, I will be very unprepared when faced with larger, more complex research and optimization projects. So here are a few things I’m doing this year to help.

• Read six book related to usability
• Complete four online workshops
• Attend two day conferences
• Lead two team building exercises
• Attend CodeMash 2013
• Attend six web developer meetups
• Have lunch with two UX role models
• Get on Dribbble (draft me people!)
• Get certified in CSS/HTML (meh, I’m honestly not sure this carries much weight, but it won’t hurt)
• Speak once in the development community
• Join UPA (Usability Professionals Association)

These are the goals my company is holding me accountable for, but to be honest, I’d like to knock most of these out in a quarter, instead of a year. If I don’t devour UX on a week to week basis, always learning something new, I’ll become stagnant, I feel.