If you are jumping into web design today or tomorrow you are lucky because you get to skip what we like to call the “creative-period-that-must-not-be-named.” Not many years ago (time sure flies) most designers were limited to 256 (not pretty) colors – far fewer than your handy-dandy Pantone book. It was a painful time of burning retinas and handcuffed creativity.

the infamous 256 color palette

Fast forward a decade – great monitors are cheap and have beautiful displays, browsers are much more advanced and flexible, there are powerful web editing tools and the push for breaking creative barriers online continues on a daily basis.

There has never been a more exciting time, with more valuable resources for technical documentation and creative inspiration than right now. Today is a new day to expand your mind, unleash your creativity and say “Hello, World!”

There is not such limitations in your print world, we know. The web is definitely more restrictive on many levels and color is one of them, but once you figure out what works you’ll see that there’s a lot of room to flex your RGBiceps. Besides, we think that when posed with restrictions, designers are challenged to really think of ways to push their designs further.

The Skinny.

The basic difference between color for print and web (as you might already know) is that print uses CMYK colors, or Cyan, Magenta, Yellow and Black. Any color that you see in a print piece will be a combination of all or some of these 4 colors. The web uses RGB, which stands for “Red, Green and Blue”. If you were to create a design in Photoshop with the color settings on CMYK, and then changed it to RGB when you got done, you would notice a slight difference in color. Since most users don’t go through this exercise, the difference will not be perceptible to them − unless they find a print version of the same design to hold up against the screen, which is slightly lame.

The right use of colors can add a lot of value to your design, and help kick it up a notch. There’s no magic formula and no silver bullet, but with a little observation and common sense you will be in good shape. Of course, our tips will probably be massively helpful! Here is a quick breakdown of some things to remember:

On The Big Screen.

We don’t expect this to create any big “a-ha” moments, but it is important to remember that this means the colors you choose and use could potentially look different for every user. Each monitor types, brightness level, contrast setting, and even angle at which you view the website could cause a shift your website’s colors. Even some computers using dual monitors show slightly different variation between shared screens – yes, they use the same computer and same video card AND same settings, but still render slightly different. And while it’s nice to dream of telling people how exactly to configure their monitors so they can have the color experience you want them to, this is clearly not a feasible option.

So this is good and bad news. Bad news is that there is nothing you can do about it so users will see you site slightly different. Good news is that most people do not view your website on multiple monitors at the same time so the variations are not very apparent and usually unnoticeable.

Don’t blind your user.

With print you have all kinds of selections between matte and shiny colors, paper types and textures. Online, not so much.

We have had many clients hand us a color palette that looks fine in small quantities but when plastered into the background of a website, or even used for typographical components just explodes off the page (and not in a good way). Again, color will vary slightly between monitors so make sure that even if you are designing on “Way Back Wednesday” you leave the neon pinks, greens and other very bright colors to smaller components of your site.

We have found that earthy/matte colors work very well and provide a solid foundation for any website. If you think it is too bright, just dial it back a little bit and see if that helps.

Color can inform functionality.

Unlike the world of print, changes in color as the user travels through your website can be informative. Some simple examples:

1. Using different colors for hyperlinks vs. normal text will help the user identify which words are “clickable”, and will help the eye scroll through the text faster to pick out the operative words.
2. Changing the “hover” (when your mouse is hovered on something) state of an item’s color can inform the user they are in the hot zone and if they click something will happen.
3. Highlighting in the navigation can inform the user of the section, sub section, etc where they are in the site to give them some sort of orientation in your site’s architecture.
4. Colors can also help enhance headings and help to call attention to anything you want to highlight on a web page.
5. Besides these practical reasons, color by way of graphics, page header/footer images, buttons etc. will definitely help make your site look more attractive, and draw the attention of the user to those elements you need to POP!

When you are done choosing the colors for your site, play the “ordinary user” and evaluate your color choices for readability and visual appeal. You don’t want to go overboard, and use a different color for every element. In this regard, a web page behaves almost like a print piece in that the information has to be legible and easy to follow, and color is only used to enhance and accent the design.

We would recommend the following:

1. Keep all text flowing in the same color and make sure that it stands out well against the background
2. Use one consistent color across the site for all hyperlinks
3. Use color and font size variations to differentiate between hierarchical headings
4. Choosing different shades within the same color family is an easy and effective way to tie the look of the site together while still achieving the usability you want

HELPFUL COLOR HINT:

Make sure you are in RGB mode.

Before you get started designing in your design program of choice, make sure you are in RGB Mode. We prefer Adobe Photoshop for creating webpage layouts because it is a pixel based software, and since pixels are the active unit of measurement in web browsers, it makes translation a lot easier. Here’s how to make sure that you’re in the right color mode:

Open a new document in Photoshop, and when the dialog pops up, you will see an option for color mode in the left column. When you click the down arrow, it will show you Bitmap, Grayscale, RGB, CMYK and Lab Color. Select RGB and specify the dimensions of your webpage, and you should be good colorwise. Set the resolution at 72 pixels/inch or screen resolution. (We will discuss resolution in more detail in another article.)

Selecting RGB Mode in Adobe Photoshop CS4

If you insist on using Adobe Illustrator to lay out your page, do this:
Open a new document, set the units to pixels, specify the dimensions, and click ‘Advanced’. Under color mode, choose RGB, and set Raster effects to Screen (72 dpi) and click Ok.

Just to warn you, Illustrator is a vector-based application, and ideally works better for print pieces, and to create illustrations and graphics. Using Photoshop to lay out your web page design will be much easier for the long haul, trust us.

Selecting RGB in Adobe Illustrator CS4

Be Kule.

If you are generating a color palette or need to play with some web colors, check out our favorite online color matching tool.

http://kuler.adobe.com

Next Topic: Font and Type and All the Hype.

As a print designer (freelancer or part of a marketing team), your clients love your work. You want to keep as much control over the brand and identity materials you have worked so hard to create and sell to your audience.  Now your boss/client wants you to design their website. Maybe it’s a comprehensive overhaul or just time for a refresh – at the end of the day, it is time to make sure the (web) drapes match the (print) carpet, so to speak.

When a client asks you to design their web site, there are not many places to turn to get a quick-and-dirty introduction and resource of things to keep in mind for designing online. Additionally, building the design in a fashion that can then easily be handed off to a development team can cause additional headaches and potentially lead to excessive re-work, lost profits, and blown project schedules. Nobody wants that, right?

So let’s break it down.

User Environments

It is the age of green, and paper seems like a less-than-sensitive way to express ideas and creativity, and possibly not in the best interest of our tired environment. Yet, ask any print designer why the medium is so addictive and they will tell you that looking at your design on a screen is one thing, but seeing it take shape and become a tactile piece of expression is a whole different form of satisfaction.

It’s nice to be romantic and wish that print design will enjoy its pride of place forever. The reality is that almost everyone’s world is slowly floating into the web, and if that’s where the audience is, then designers will have to follow suit if they hope to do their clients justice. Even if this were not the case, we think it’s nice to be able to express your ideas via more than one medium, cuz’ it’s cool to be able to speak many languages.

While we aren’t the self-proclaimed torch-bearers for Web vs. Print, the one sphere in which the web has an undeniable advantage is the extent of its reach, not to mention the saving on printing and mailing charges in case you need a little convincing on why it might be time for you to get your fingers into designing for the web. Making a smooth transition from paper to screen can be challenging, but what’s life without a challenge? By tweaking your existing skills a little, you will literally open yourself up to a world of new possibilities and audiences.

The good thing is that in general, designers who began their careers with the print medium tend to have a solid understanding of effective layouts, typography and how design elements can play nicely with each other on a page. All of this knowledge can definitely be used in layouts for the web, albeit with some restraint. Think of it as having to color within the lines.

The other great thing about print design is consistent user experience. A book cover looks the same all over the world, no guest at a wedding feels less special because they received a different looking invitation, and signage relies on this same visual consistency to make branding impactful.

You may wonder – how different can designing for the web be? The site is going to be viewed on a computer screen, and all computers show pretty much the same thing, right? The answer sadly is, “no”.

Many things influence how a design layout translates into effective web design. The most important of these is the user environment. Starting with where in the world the user is, what speed his internet connection is, what browser (and version of that browser) the site is being viewed in, to what resolution your user’s computer screen is, can all affect the way your design looks and operates. Translated this means exponential variations in the way your site can be viewed and your user’s experience affected. Good times.

The latest screen resolution breakdown:

Most computer resolutions are now at 1024×768 or higher.  Here is the breakdown from last year according to www.W3Schools.com

There’s bad news and good news. The bad news is that unfortunately, there is no sure-fire way to predict that your design will hold its ground in every single user environment, but the good news is that there are steps and measure to make sure that for the most part, your site affords a consistent viewing experience to anyone who wants to use it – oh yay!

In our following articles, we’re going to try and expand on some of the parameters that affect the overall design and user experience of any site – color, fonts, web browser dos and don’ts etc. and give you some tips & tricks to get you started on your way to building an effective and reliable site. While we’d like to cover it all, we don’t want this blog to get boring so just shoot us an email with any questions you might have, and we will be happy to help you out!

A Browser By Any Other Name…Stinks!

An exciting part of the print process is being able to choose the size and shape of your design. You can even incorporate folding, cutouts and other cool things to make your piece unique. Any design on the web however, is restricted to the browser window, and dealing with this beast requires patience and diligence. Two things that scream “fun”! Not.

It would make sense to have all browsers programmed to read code the same way – which is exactly why this is not the case. Every browser – from IE to Firefox to Safari to Opera and even to Google’s new Chrome – reads code differently. For example, margin and padding settings do different things on IE and Firefox. Firefox (our current holy grail of browsers) usually reads these settings the way it is expected to, so this is a good standard to compare the other browsers against.

There’s no limit on the amount of artwork or images in a print piece. At the most, you’ll have a hard time emailing it to the printer, but there’s always yousendit.com to fix that. With websites though, image overload is frowned upon. Using heavy artwork and images slows down the site, and let’s face it – time is money, so you don’t want a heavy site costing you valuable traffic that could bring you good business.

Some versions of the most used browsers don’t handle transparency well. They like a certain amount of concealment. This comes into play with images that have rounded corners, or if you want to use a graphic that has a complex shape, but you don’t want it on a white background. There are various image formats like JPG, GIF and PNG that are compatible with web browsers, but since their relationship’s kinda complicated, we will devote a whole chapter to figure these guys out.

Because of the above issues, it is very important that the design is tested/viewed across multiple browsers to make sure it will look the same no matter what browser the site is being viewed in. You might need to put in “fixes” depending on the browser, to make sure that the end result looks the same.  It’s probably a good idea to start doing this right at the start, when you begin building the design framework of your site. Usually, testing with IE and Firefox should cover most glitches waiting to happen, but if your machine is equipped with other browsers in addition to these, go ahead and test on all.

The latest browser breakdown: According to www.w3schools.com the vast majority or users are still on IE and Firefox.

As you go along filling in the blanks, loading content and images, you will hit tiny speed-bumps with the way these elements render on different browsers, but not to worry, Google is standing by and it’s more than likely that someone else has had the same problem as you. If you can’t find a fix, you can always find a forum to complain on before trying a new route.

SO WHERE DO YOU BEGIN?

1. Get Your Browsers Locked and Loaded.
   Make sure you have a downloaded all of the latest versions of browsers for your testing arsenal.  Pick your favorite site and view them in each browser to see how things like forms, fonts, and layout vary.Here are some helpful links for downloading:
   • Firefox: http://www.getfirefox.com
   • Opera: http://www.opera.com
   • Safari: http://www.apple.com/safari/download/ (Windows too!)
   • Google Chrome: http://www.google.com/chrome/
   • Internet Explorer (IE) v7 http://www.microsoft.com/windows/internet-explorer/ie7/
   • Internet Explorer (IE) v8 http://www.microsoft.com/windows/Internet-explorer/default.aspx
2. Pay attention to the “you-ser”.
   Remember, at the end of the day someone is going to have to use this site you are designing so make sure you pay attention to common placements web components like logos, navigations, calls-to-action, etc live.
   • How would you use the site you are designing?
   • Is it intuitive?
   • What kind of content will it showcase and in what order/heirarchy should that content be showcased?
3. Find inspiration.
   The best thing about the web is that if it can’t be done, people aren’t doing it, so you can usually rest easy knowing that if you have seen it on another site, a talented developer can usually make it work.  Find a group of sites you like and add them into your creative blender for inspiration.  You don’t have to like the whole site – take a search bar from one, a button design from another, and even find out which fonts look the best to you online.
4. Push the envelope – just a little bit more each time.
   At the end of the day, graphics on the web have to be some form of rectangle or square when cropped, so figure out clever ways to break outside of the box with curves, layers and textures.  As you design more and more sites you will start to get a feel for what is and isn’t possible and you can slowly take the web-cuffs off.

Next Topic: Color Me Tricky

When the Monkee-Boy team decided to kick off the official Monkee-Blog, one of our goals was to keep it as “noise free” as possible and hopefully break through the static. Our goal is to create an informative tool for our audience and provide educational, industry appropriate, tactical take-aways for our audience demonstrating how a blog for a business can help educate and inspire. No pressure, right?

As Founder and Creative Director here at Monkee-Boy, I can say that mission certainly raises the bar on how to gracefully approach the discussion of web design. Much of our day-to-day activities involve pulling stuff out of thin air and translating client requirements into business appropriate visuals while pushing Photoshop as far as possible to meet that delicate balance of “pop” and “interaction”.  So the challenge here is  breaking that process and complexity down into digestible chunks of web design nuggets (yummy!).

The other thing that has to be factored into any discussion of web design, and every discussion with clients when delivering comps for sure, is that “design is subjective”. Our collective approach here is to
not get into why I think “orange is making a comeback online” and that “gradients are your friends” but to provide a common demographic of print designers with nice takeaways to get up-to-speed in the world of web design.

So this is where the Web Design for Print Designers (WD4PD) series plugs in.

Our goal here is to provide the following:

1. Help you, the print designer, sleep better at night knowing you are not alone. (check!)
2. Help you extend your traditional services online and expand your business.
3. Help raise awareness into the biggest “gotchas”, educate you on why they are important keep in mind, and give you background information into why these problems/solutions are important so you explain to your clients why certain creative decisions were made throughout the design process.
4. Explain how design decisions hurt/help your client’s search engine rankings.
5. Working with developers and the overall best process (from our perspective) of designing sites and how to package them up for developers to start the coding process.
6. Take the subjectivity of design out of the equation and provide real world issues that need to be considered when working on web designs and pitching web design services.
7. Hopefully establish a relationship between you the print designer and Monkee-Boy to create mutually beneficial partnerships.

So, getting #1 above out the way, get some rest knowing that you are not along and we will be tackling lots of useful information over the next couple of months.  If you have any topics you would like us  include as part of the discussion, please send them to me (Hi, I’m Aaron) at aaron@monkee-boy.com.

Next subject: Unraveling the Web

Now, there was a graphic designer before his time! Every work he produced straddles the delicate line between artistic finesse and modern graphic appeal. His pieces could be viewed by some as too constrained or calculated, and not ‘free’ enough, but to me, it’s like his work is always getting ready to walk off the page, illustrations that have a mind of their own, and that will confuse your mind if you let them! The kind of command he had over perspective and visual proportion is absolutely stunning. Designers of our time are still inspired by him, and designers of generations to come will continue to be influenced by this maverick.

Just as I am in awe of artists of times past, I also spend a considerable amount of time looking at the work of current designers and illustrators for sparks of genius that compel me to try and push the envelope of my own work. On one of these random expeditions, I came across Yehrin Tong.  Going through her work, I found some pieces that were ‘Escheresque’ in their quality, but beautifully reinvented. Her repertoire doesn’t end with psychedelic pen-and-ink illustration. She has a number of pieces where she mixes line art with ‘realistic’ human portraits and creates visual collages that are obsessively detailed and a little eccentric.

For her complete portfolio, please visit www.yehrintong.com. If you’re looking to be inspired, I promise there will be no disappointment here.

Not a big surprise, the Email Standards Project gave Outlook 2007 a “poor” rating when it comes to email standards support –  I guess “piss poor” wasn’t an option.   Not only does 07 limit what we as designers can do from a creative standpoint but it creates a lot of angst with our clients who don’t want to pay for the additional time required to properly test and troubleshoot.

To try and (let’s say) “gently pursued” Microsoft to pay a little attention to the glaring frustration, Fix Outlook (http://www.fixoutlook.org), a Twitter mashup campaigning site, has been created with the goal of getting MS to finally hear the screams from voth the world’s designers and client marketing bugdets.  After 20,000 signatures responded to the campaign, Microsoft released a statement that they are going to stay the course.

So, just when you think we might have rounded the corner to safely wave bye-bye to Outlook 2007 in the rear view mirrors velcroed to our monitors (yeah, we have those), Microsoft has decided to stand with their belief that “Word is the best email authoring experience around” — so looks like MS Word will once again be used for rendering emails in Outlook 2010.

According to the Email Standards Project, “For the next five years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more.”

Good times.

It’s kind of a long article, especially when you consider that the article is pretty much discussing a user’s first 1/20th of a second they spend with your site.  It’s definitely worth a read, but if you would prefer (Joe’s) Cliff’s Notes, they’re below:

“Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. [8] Those user judgments begin within 50 milliseconds of seeing the first page of your site.”

“Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs.”

It’s nice to get scientific validation that all those late nights spent perfecting a web site design does indeed do so much to shape a user’s opinion of the site and company brand. However, it’s a little frustrating to know that we spend dozens of hours coming up with something that is processed in less than a second.