Devious Design

daring, dashing, and distinctively dangerous

The reason why newspapers are failing

leave a comment »

They are too darn slow.

And the reason why they haven’t transitioned to online yet?

Because they’re still only worried about print deadlines and don’t care to hurry up and write a brief to get it on the Web site.

Meanwhile, the student newspaper was all over the shooting that happened on campus. They had a story up within 15 or 20 minutes. Students were Twittering and Facebooking and already had the whole story on these various social networks while the guys at the biggest newspaper in the region were ordering McDonalds. As all this was happinging,  I sat here at my desk for more than an hour and a half after the event occurred, and I waited for a brief to put on the Web site. I had the new article set up; I had a photo courtesy a fellow freelance student journalist totally ready to go up with the theoretical story. And I waited.

I even wrote this blog post before they got me an article.

That’s why newspapers are dying. Or dead. Whatever.

Written by Julia

December 3, 2009 at 10:57 pm

Posted in Newspaper, Social Media

Tagged with ,

Coming soon

with one comment

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:

NightBird Studios

NightBird Studios: Coming January 2010

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!

Written by Julia

November 29, 2009 at 8:22 pm

If only the story was any good . . .

with one comment

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.

New Moon poster

Written by Julia

November 22, 2009 at 8:51 pm

Posted in Identity

Tagged with , , , , ,

PSA

with one comment

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.

Written by Julia

November 9, 2009 at 11:51 am

Posted in Web Design

Tagged with ,

Werewolves

with one comment

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!

Written by Julia

October 11, 2009 at 7:39 pm

Posted in Art, Web Design

Tagged with , , , ,

Inspiration

with one comment

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:

layout

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.

Written by Julia

October 8, 2009 at 4:50 pm

The mind of design

with one comment

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:

  1. Keep it balanced.
  2. Make sure things line up.
  3. Be organized.
  4. Keep it clean.
  5. Spell things correctly.
  6. Use your resources.
  7. 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.
  8. Don’t be gimmicky.
  9. If it feels awkward/wrong, it probably is.
  10. Make sure transitions/seams are smooth.
  11. It should flow.
  12. 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.
  13. Gear your work toward its intended audience.
  14. Ask for advice and consider it.

Written by Julia

September 23, 2009 at 2:29 pm

Posted in Art, Print Design, Web Design

Tagged with ,

Yay, brands!

with one comment

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…

Written by Julia

September 17, 2009 at 4:26 pm

Posted in Identity

Tagged with , ,