Coming soon
I’m in the process of starting a small Web design company. It’s called NightBird Studios, and we’ll be lauching our Web site in early 2010. It’s been a long process, and I probably should not have attempted to work on it while school is still in session, mainly because designing Web sites, programming both front- and back-end applications and making business plans is a heck of a lot more fun (and seems more meaningful) than doing schoolwork. So now I have three big projects, three papers and two videos to start and finish in the next two weeks. Oops.
Anyway, designing the front-end of the NightBird site has been really fun. It’s gone through three redesigns, and the one we finally picked looks like this:
It has a cool fixed-position header with a gradient fade below, so when the user scrolls through the page, all the content fades to black. It’s a really simple, subtle effect, but I think it’s classy. Ha. Now we’re working on creating a space for our clients to easily ask us questions, look up FAQs and download different applications for their own sites. It’s coming along nicely, and should be functioning in time for our January deadline.
I know I usually have some sort of design advice in these posts, but I don’t really have anything to add to this one – except that you should dive into projects when you don’t already have six classes worth of things to do.
Live and learn!
If only the story was any good . . .
I loath Stephanie Meyers “Twilight” books. And the movies. And the fact that they’re so undeservingly popular right now. (And the fact that this weekend the midnight showing of “New Moon” beat the Harry Potter’s opening night record…)
However, anything “Twilight” that isn’t directly related to the plot about mopey teenagers and sparkling vampires (don’t even get me started on my vampire rant) is pretty darn good. I’m talking about the soundtrack, the online marketing campaign, the brand – the whole franchise.
The Soundtrack
The soundtrack is full of really good indie rock musicians. But it bothers me to no end that Radiohead’s Thom Yorke wrote a song for the “New Moon” soundtrack. My only hope is that it will introduce all the young and impressionable listeners to some quality music. Hopefully they’ll at least listen to Yorke’s “The Eraser” or Radiohead’s “In Rainbows,” although I highly doubt a 12-year-old girl would find any of the tracks on “Kid A” very appealing.
Here’s the “Twilight” soundtrack:
1. Supermassive Black Hole (Muse)
2. Decode (Paramore)
3. Full Moon (The Black Ghosts)
4. Leave Out All The Rest (Linkin Park)
5. Spotlight (Twilight Mix) (MuteMath)
6. Go All The Way(Into The Twilight) (Perry Farrell)
7. Tremble For My Beloved (Collective Soul)
8. I Caught Myself (Paramore)
9. Eyes On Fire (Blue Foundation)
10. Never Think (Rob Pattinson)
11. Flightless Bird, American Mouth (Iron & Wine)
12. Bella’s Lullaby (Carter Burwell)
And the “New Moon” soundtrack:
1. Meet Me On The Equinox (Death Cab For Cutie)
2. Friends (Band Of Skulls)
3. Hearing Damage (Thom Yorke)
4. Possibility (Lykke Li)
5. A White Demon Love Song (The Killers)
6. Satellite Heart (Anya Marina)
7. I Belong To You (New Moon) (Muse)
8. Roslyn (Bon Iver and St. Vincent)
9. Done All Wrong (Black Rebel Motorcycle Club)
10. Monsters (Hurricane Bells)
11. The Violet Hour (Sea Wolf)
12. Shooting The Moon (OK Go)
13. Slow Life (Grizzly Bear)
14. No Sound But The Wind (Editors)
15. New Moon (The Meadow) (Alexandre Desplat)
The Online Marketing Campaign
Summit Entertainment exercised almost every online outlet to market “New Moon.” Its use of Twitter and iPhone apps were especially effective. A few of the actors also had very vocal Twitter accounts.
@Twilight – Twilight by Summit Entertainment
@Peter Facinelli – Dr. Carlisle Cullen
@BillyBurke – Chief Swan
@Ashley Greene – Alice Cullen
Facinelli and Burke also release their own iPhone App – which is kind of cool if you care about any of this.
The Brand
The “Twilight” brand is really well developed. The main font they use, “Zephyr,” was a great choice. It’s simultaneously cute and dark/edgy, which really fits the whole “Twilight” philosophy of taking scary, sex-infused things like vampires and watering them down to sparkly vegitarians that appeal to 10-year-old females. “Zephyr” is a perfect font for that.
The rest of the branding does the same thing: It takes images of cute teenagers, desaturates the images and puts a dark, hazy cloud behind them. “Look! We successfully made these kids look spooky and approachable at the same time! YES!”
—–
It’s just sad that all this cool stuff came from a couple of incredibly poorly written books with a flaccid storyline and boring, whiny, undeveloped characters.
The importance of good brand development
Dear people who want nice Web sites that will make you famous and bring in lots and lots of money:
Know what you’re doing.
Before you start a big project like a Web-based business, know what you want to accomplish and take the proper steps to get you there. It helps if you’re business offers something new and exciting that’s actually appealing to either a very diverse group of people or a very small micromarket. If you decide that you’re actually offering a decent service or product, figure out the best way to market yourself.
• develop a brand
• register a domain
• build your Web site
• set up a Twitter account
• make sure your books are in order and you’ve taken care of all your legal obligations.
As far as the branding/Web site bits go, make sure you know your audience/target market. If you don’t have experience with identity development and design work, get second (third, fourth, . . . , 200th) opinions and/or hire a professional. Professionals will help you make sure your brand is actually appealing to the people you want to appeal to, and they’ll make sure your logo and/or brand name is sending the right messages. It’s very important that your brand name/logo doesn’t have any alternate meanings or implications that could turn your potential customers away from your brand. Make sure there aren’t any racist/sexist/whatever-ist undertones. Be cautious of unintended double-meanings – look up your name on Urban Dictionary and check URLs that are could be confused with yours to make sure you aren’t accidentally sending your clients to any competitors or unsavory 18+ Web sites. Don’t decide on a logo with pink hearts all over the place if you’re trying to appeal to teenage boys.
You get the idea. Just don’t do anything that could turn away prospective clients, and try to appear professional.
PSA
Update your browsers. Right now. Especially if you’re still using IE6.
Thank you.
————-
On a similar note, according to w3schools, use of Internet Explorer 6 is down to less than 10.6 percent of all browser users, as of October.
If only that were a negligible amount.
It will be very nice when we Web designers will never have to worry about IE6 ever again. I was working on a site last week that had a fixed-positioned header and another absolute-positioned div on the right side of the page. It took me less than 4 hours to design and build the site. And then it took me another six days to figure out how to get it to look decent for IE6.
Part of the problem was my inability to find a computer that was still running it. Even the computers at work (which, by the way, still use Microsoft Word ‘97) had upgraded to IE7.
Luckily, as I was talking to a friend about my troubles, she showed me Adobe’s BrowserLab. You have to sign into your Adobe account, but then you can upload different URLs and BrowserLab will load and display them in a simulator with all the different browsers: IE6, IE7, IE8, Safari, Firefox for PC, Firefox for Mac, Opera, Chrome… It was a great find, and it made it so much easier to test my sites in older browsers.
Werewolves
It’s time for some color analysis. I’m not going to chat about color theory (you can learn that here) or different palettes or patterns (if you’d like some of those, check out this spiffy blog) — I’d just like to offer another perspective on how color plays a part in perception and how that’s always applicable to design.
We all know that people infer different meanings and emotions from different colors. Red = angry/stop/love, blue = calm/sad/water, green = money/go/natural, yellow = happy/caution/cowardice, black = evil/death/classic, and so forth. Because of this, it becomes very important how you use colors in your artistic or professional creations.
For example, you may notice that places like Panera and Starbucks color their walls and promotional materials in warm shades of yellow and orange, often accompanied by a muted shade of green. They make customers feel cozy and comfortable and hungry. Places like schools and hospitals are often white or a light tan to look clean and to keep people focused. Other places like artsy bars or music venues can paint their walls black to appear upscale or sophisticated.
On the contrary, improper use of color can give people the wrong message. You wouldn’t want to paint your hospital blood red or black, which would imply sickness and death. You probably wouldn’t want to paint your law office lime green and pink because no one would take you seriously as a lawyer since your office would wind up looking like a day care.
The same concepts apply to your Web site. Bright colors improperly used will look childish, and on a light-colored background they will be hard to read. Very dark colors are hard to use on Web sites because cheap monitors have a hard time displaying them, so any different values will look much darker than you, as designer, initially envisioned. Take this very blog, for example — it looks lovely on my Mac, but when I look at it on other computers, I sometimes have a really hard time reading the text. Be expecting a new theme sometime soon. Part of the reason Facebook outlived MySpace is because it looks cleaner and more professional. MySpace signed its own death certificate by allowing users to redesign their own pages, bringing in all sorts of misused colors and images and flaming logos and animated gifs. Ew. For Web sites, it’s probably best just to stick with a white background, dark text (shades of grey are great), and an accent color or two that fit your image — your site will be clean easy to read. Dark backgrounds are a good way to go for things like galleries or portfolios so your work is what stands out as the most striking thing on the page.
One group that has really mastered their use of color is the movie industry. Movie producers know what they’re doing when it comes to color. Directors like Guierrmo Del Toro sketch out full books of how they want to use colors in their films – different shades for different scenes, bright, over-saturated colors to show good memories, dark to show fear and suspense. Some shoot entire films with different filters to make their movies look moodier. For example, the “Underworld” films have a blue filter applied to almost every scene, which makes the film seem darker and more dramatic. Some may think this is cheesy, but it works. Other movies like “Man on Fire” is very yellow. All of Baz Lurhman’s big films like “Romeo and Juliet” and “Moulin Rouge” are overly bright, giving the whole picture a very whimsical feel.
So please, think about colors before you use them, and make sure your product is readable. Thanks!
Inspiration
When you start a design project, your most necessary thing is a concept, an idea – inspiration. As long as you have a solid concept, you have a really good chance that your final product will be successful.
I’ll explain with some background:
Many times you hear people suggest starting an assigned project really early to get ahead. That has never worked for me. Not once.* Any time I attempt to get a head start on a design project, I fail miserably because I get attached to my first attempt, which undoubtedly won’t work once all the necessary content – stories, photos, graphics, etc. – come in. And if you have a big client, you will probably have an excess of additional content and requests for changes arriving later – or much later – than you’d like. (Usually, the fatal flaw in my first attempt is that I try to work with what I have rather than what I may or may not eventually receive. It’s just as frustrating to have to redesign something because you never received enough content.)
It is extremely stressful to have to go back and make significant layout changes late in the game. This is where your concept development comes into play. If you have a simple, flexible, developed concept, on-deadline work will be much easier to build – and hopefully your final product will be more cohesive and visually stunning.
An example of simple concept development:
Goal: 2-page newspaper spread on campus safety
Initial visual inspiration: Caution tape and the little criminal dude on neighborhood watch signs
Colors that go with that imagery: Yellow and black
What else is yellow/black/criminal? The Watchmen comics
BAM – now you know the look to persue. From there you develop further.
What kind of fonts would fit with that theme?
Well, it should look gothic, like a metropolitan city at night – skyscrapers, streets, taxis. Maybe think comic books – Batman, Watchmen, V for Vendetta, Sin City. So, let’s try Franklin Gothic or some other sans-serif font, preferably with both a condensed and a extra bold version, like Univers.
How are you going to get it to look as dark as you think it should?
Reverse the type.
What if we don’t have photos or illustrations?
Resurrect the little neighborhood watch dude! And make him big so he becomes a design element rather than a goofy decoration. (It’s fun to experiement with scale.)
Now what do you do?
Open your InDesign document. You already know it’s going to have a black background, yellow text and an ultra-condensed gothic-style font. Having these basics figured out gives you all the flexibility you need to quickly create a cohesive design. Now all you have to do is tedious work – waiting for your content, placing it, lining things up and tweaking it until everything fits comfortably – but the cool, conceptual part was done before you even started.
And here it is:

All you needed was some inspiration.
* Let me clarify: Working ahead has never worked for a layout in a design project that I was developing for other people and waiting for content. It generally works brilliantly for other endeavors.
The mind of design
Today I’m going to discuss how to approach design – and not just print design or Web design – but design in general.
Step 1: Realize that good design practices are applicable everywhere and for every project you’ll ever attempt to do.
This includes writing papers, designing Web sites/books/pamphlets/posters/newspapers/signage/packaging, programming software, writing music, decorating rooms, organizing cities/groups/folders/libraries, editing video – everything.
Step 2: Know that most of the following steps are mainly a refinement and understanding of normal human tendencies.
We all do it – at least a little bit.
Step 3: Know where you want to go.
Decide what you ideally want the final result to be. Just get a basic idea and then stop fantasizing about it and do it. Don’t get hung up on the final goal, but always keep it in the back of your mind.
Step 4: Start with something really simple and plan.
A masterful painting of the human form starts with simple shapes and grows into something more precise. A symphony starts with a basic melody or chord progression that sets the theme. An orchestra starts with just one instrument. A skyscrapers starts with a foundation. A thesis starts with an outline. A design starts with a line. You get the picture.
You have to have a solid structure at the beginning or else the whole project will collapse later – maybe not right away – but later. Or at least you’ll be setting yourself up for a lot more work if you don’t put in enough effort at beginning. And whatever it is, make sure you like it. It’s no fun to work with something you’re unhappy with.
To do this, develop some structure. Use a grid. Make a flow chart. Write an outline. Set the tempo. Whatever. Give yourself some sort of boundaries to work within. And, especially for graphic design work, remember to set up your documents correctly. This is important.
Step 5: Make sure the results from steps 3 and 4 fit together.
If you can imagine your initial structure or foundation eventually developing into the final result you’d like, you’re on the right track. If not, modify one or the other until you can. Either fix your foundation or rethink what you want the final result to be.
Step 6: Find some style.
Develop a voice, a mood, a color scheme, a theme – and stick with it. Be consistent and make sure everything works together. If it doesn’t, figure out why and fix it. If you can’t figure it out, ask for a second (or third, fourth, ect.) opinion. Then fix it.
Step 7: Mess around.
Try different things. Be creative. Mix things up. Rearrange.
If you don’t like something you’ve done, work with it until you do. Once you like something you’ve come up with, rework it until you like it more.
At this point, you may want to reevaluate your final vision. Or maybe you want to start over completely. Both are fine.
Step 8: See where it goes and finish a draft.
Take whatever you’ve done so far and take it to the end. Finish the paper, article, song, site, video etc., with the style you’ve developed. Compare this version to what you wanted as the final product and decide if you’re happy with it.
Step 9: Tweak, polish, proof – attack.
Fix everything. If something seems awkward, keep working on it until it doesn’t. Or delete that part – sometimes it’s better to just get rid of it. Don’t settle if you don’t like something. If you really don’t like it (and have the time), start over.
Step 10: Bask in the glow of your finished product.
Enjoy being finished and stop thinking about it.
Tips and tricks:
- Keep it balanced.
- Make sure things line up.
- Be organized.
- Keep it clean.
- Spell things correctly.
- Use your resources.
- Make it easy on your readers/visitors/listeners/etc. Give them what they expect. Don’t try to be overly creative or trick people – it won’t win you any points.
- Don’t be gimmicky.
- If it feels awkward/wrong, it probably is.
- Make sure transitions/seams are smooth.
- It should flow.
- Be aware of things that make your work seem less professional: slang, typefaces like Comic Sans or Papyrus, outdated material or methods, too many sus4s, bad production quality, etc. Basically anything that seems cheesy, overused or outdated.
- Gear your work toward its intended audience.
- Ask for advice and consider it.
Yay, brands!
I lied. This post will not be dedicated to DVD packaging, but rather to brand management and identity development, because those two things have incredible power – and I think that’s nifty. Just think about it: If people can recognize your logo, they’ll remember your name (or at least they might look into it), and then, if they like what they see, you might just have another customer. Simple as that…almost.
Here are a few examples of good branding/identity vs. bad branding/identity.
Mutual of Omaha
Mutual’s brand management has gone from awful to amazing in the last few years, mainly when John Hildenbiddle took over the job. Before Hildenbiddle came into the picture, the company had many different logo designs, no color specification, and a generally inconsistent image. Since then, they’ve cut down on just a few ways to use their logo, and they’ve made a point to revamp old Mutual brands, like “Wild Kingdom,” and developed new ones like “Wild About Omaha” and their “Aha Moment” campaign. With those changes, they’ve really taken off and have improved their appeal even to younger audiences. Click here for more info.
Creighton
Just imagine if Creighton’s color was red. A blood-red hospital logo? I don’t think so. Red Bluejays? Interesting. The Creighton blue identity has been so ingrained that if anyone even tried to change it, it would be an epic fail, for one, and it would not fit at all with Creighton’s purpose or message.
Well, that’s it for now – I need to get to work…
It’s logo time!
As promised, here are some of my favorite logo/logotype designs.
1. A Perfect Circle (click here to see the logo)
For those of you who don’t know, A Perfect Circle is a band – or was a band, considering that they aren’t playing, writing or recording together anymore. Their lead singer, Maynard James Keenan, is the lead singer from Tool (see last post). I’m a little obsessed with him – because he’s super-interesting. Anyway, APC’s logo is awesome because when you first look at it, you think, “Gosh, that was silly – A Perfect Circle’s logo isn’t actually a perfect circle! It’s more of an abstract oval-ish rendition of a circle.”
Wrong!
Upon closer inspection, APC’s logo is, in fact, a perfectly circular circle – and a 3D one at that. The left part of the design is the outside of a ring, and the right side is the inside of a ring. The negative space between and around them complete the circle. It’s brilliant.
2. Cricket Wireless (click here to see it)
For the longest time I thought Cricket Wireless had one of the ugliest logos in existence. I didn’t quite realize that the weird green K is supposed to be the head of a cricket (with antennas). Once that idea settled in, the design suddenly became very cute indeed.
3. FedEx (click here to see it)
This one makes everyone’s list of best logotype ever designed in the history of mankind. That’s because of the little arrow created in the negative space between the E and the X. It points to things and sends (conscious or unconscious) messages about Federal Express’ speedy service. Plus most people don’t notice the arrow until someone else points it out. And that’s kind of ingenious.
And now for some shameless self-promotion
Since we’re on the topic of logos, I made the cutest little owl logo for a site I’m designing. You can see him here. His unofficial name is Lester, and he’s adorable.
Coming Up Next: DVD Packaging: The good, the bad and the really disgustingly ugly
Bye!

