Latest Stories

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

How will you stay relevant as a designer in 2011? The ultimate goal of a designer is not to dazzle but to entangle. Any designer can get ‘oohs’ and ‘ahhs’ that are easily forgotten. The supreme designer is able to create an environment which charms and captivates the user to the point where he does not want to find the ‘Back’ button. Several elements come together to forge such a wonderland: harmonious color scheme, intuitive design, easily accessible information and fast response. Additionally, one can never under-estimate the power of simplicity. Of course, this has always been the case, but in 2011, you are no longer at the forgiving discretion of the desktop, or even laptop, computer. Now, your design must contend with smart phones, netbooks, tablets and the like. Are you ready?
Take a gander at the top 11 trends for 2011.

1. More CSS3 + HTML5

What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:


Now that’s shown, please understand that Flash and HTML5 are not equal opponents. There is plenty of room for both in 2011. The problem is that designers in 2010 (and before) misused Flash. Case in point, very rarely should your entire site be made of Flash, especially these days. HTML5 alleviates some of the burden we have placed on Flash. However, HTML5 cannot (yet) replace the extraordinary design elements we can achieve through Flash.
Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. Move over Photoshop (wow, Adobe just cannot rest), because CSS3 is making short work of text shadow, border radius and image transparency. If you have not already begun, now is the time to really delve into understanding CSS3 and HTML5.

2. Simple Color Schemes

Simplicity. There’s nothing quite as impacting as an honest message on a quiet backdrop. Quiet can be interpreted several different ways. Forget black and white or shades of gray. Think of green, yellow or even red as your primary color. However, limit your palette to two or three colors. Work within the shades of each color for variety. It can be truly remarkable what a few colors can do for your message. Observe:

Shades of green create this Twitter visualization tool. Side note: this site was created with XHTML/CSS and Javascript.

Red can be jarring if done incorrectly. This site gets it right by subduing the color’s overwhelming personality with easy-to-read high contrast text.

3. Mobile Ready

Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.
Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.
With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.
It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.

4. Parallax Scrolling

Parallax scrolling: not just for old school video games. As aforementioned, the hot web design trend for 2011 is creating a sense of depth. What better way to create that than with parallax scrolling? The parallax effect uses layers to present the illusion of a 3 dimensional space. It can be accomplished with some simple CSS tricks or the help of jQuery plugins like Spritely. Parallax scrolling can be most effective as a secondary element on your design, for example, as a header, footer, or background. Making it an integral part of your navigation may prove frustrating for your site visitor.

The Old Pulteney Row to the Pole website uses a top down parallax scrolling effect for the background. This adds a nice subtle amount of depth and lots of interest.

5. Designing for Touch Screens, Not Mice

Technology has become much more tactile. Usability is shifting from abstract to tangible. This means that instead of navigating your mouse to remotely connect, your destination is literally at your fingertips. Tablets, most smartphones and some desktops use touchscreens. Does your design accommodate fingertip navigation?
How much of your design is mouse-oriented? As designers, we worship mice. Our links light up when the mouse hovers over. However, there’s no hovering in touchscreen. How will your design indicate links to your visitors? What about drop-down menus? That’s also a no-go in touchscreen design.
Similarly, how will visitors peruse your site? As controversial as it may be for standard web browsing, horizontal scrolling may be more appropriate for touchscreens. Fitting nicely into this niche is a magazine-like layout where visitors virtually flip through your site.
Lastly, consider using liquid layouts as part of your commitment toward responsive design. In 2011, you are no longer dealing with screen resolution size. Visitors can change their viewing orientation from vertical to horizontal. Your design must be flexible to meet any challenge, or you will be a relic of 2010.

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. Depth Perception in Web Design

No, we are not dealing with the aerial ‘I can see your coffee cup and keyboard on your website’ design of two years ago. Depth perception is about creating dimension in your web design, so that parts of your site looks nearer than others. It conjures a faux 3D effect when done masterfully. Remember what it felt like watching the blockbuster 3D movie, Avatar? The elements jumped off of the screen, quite literally.
Although 3D technology has no yet made it to web design, you can still replicate depth in your design.

This playful website features a rotatable, 3D planet and makes use of depth with well-placed shadows and layering.

Eye-catching and smart, this celebration of Jordan (both the man and shoe) is thoroughly entertaining. The 3D elements are crisp and simple, which what makes them so stunning.

7. Large Photographic Backgrounds

Large scale backdrops will surge in 2011. These images will be high resolution, and covering the entire site. Large photos are an instant way to grab your audience– they cannot help but to see it and have an opinion about it. The background photo must be content-appropriate. Simply having a pretty image in the background without any context will disrupt your user’s experience. Trends point to soft and slightly transparent imagery that does not over shadow your content, but harmonizes with it.

This site makes use of high-resolution photos and the predominant color is yellow throughout.

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. Adventurous Domain Names & Integration

Although not in the strictest sense a web design issue, look forward to seeing more creative domain names. The once-coveted .com domain has lost a lot of its appeal– primarily because you have to think up words in Na’Vi in order to find a domain that has not been thought up yet. 2011 will see a more wide-spread venture away from .com and into more whimsical domains like .me or .us. Think of the possibilities and scoop it up before it’s gone.

.me is a great domain to use for personal portfolios, or blogs, especially if you want a seperate identity from your corporate brand.

Another example of .me integration.

9. QR: Quick Response

If you have noticed those square barcodes popping on business cards, magazines or else where, you may already know that they are a hot trend for 2011. How exactly does it translate into web design? Amazingly well, in fact.
The barcodes are called QR, short for Quick Response. Simply take a photo of the unique barcode with your camera phone. Like magic, your phone will call up the website associated with said barcode. The beautiful thing about QR is that you can use it in a myriad of ways. Feature your QR on your website, in order for site visitors to have a shortcut to your mobile site. You can also track your visitors through QR, by placing a special referral code on your URL. When you are leaving comments on sites such as this, use the QR as your avatar.
2011 is all about mobility and it will be smart to take advantage of this new medium.

This is the QR for the author’s personal website. Create your own code here.

10. Thumbnail Design

The ever-enterprising folks at Google have introduced the average user to thumbnail browsing. Gone are the days of clicking through to see the content of a website. These days, you just click on the magnifying glass and hover (assuming you’re not on a touchscreen). Magically before you is a glimpse of what waits on the other side of your click.
If your design is Flash-based, that is definitely going to be a problem. The preview will not display those elements of your design.
As the average internet user becomes more surfing-savvy in 2011, expect to see more people navigating by these means. It is just too great of a temptation not to judge a site by its thumbnail.

11. Constant Connection/ Life Stream

Last, but certainly not least, is the focus on constant connection in web design. The internet is, by nature, a sterile environment, and we make it human by sharing our lives in an open forum. Expect to see more intimacy through the form of lifestreaming. Personal blogs and portfolios in 2011 will prominently feature live Twitter feeds (not just a link to the Twitter page). People will let you know where they are at any moment of the day via Foursquare. In fact, expect to see a dedicated lifestream for all of one’s online activity. 2011 will definitely bring out our inner, creepy stalker, no doubt about it.

A personal site that utilizes lifestreaming.

This is a business site that synthesizes a lot of information on one page.

Final Salute to 2010

Do you agree, disagree, have anything to add? We would love to hear from you.

If you want to be a better designer, then you should feed yourself great designs. Forehead-slapping common sense, right? Yet some designers downplay the importance of consuming and getting inspired by great designs. Yet there are 3 reasons why you need to feed yourself great designs.
Designers that think influence and constantly exposing yourself to great designs isn’t that important tend to believe that brilliant work comes from within and that it can be turned on at will. But as creative block—which gets the best of us—shows, creativity is a finicky beast. And a lot of outside factors subconsciously dictate how and when your best designs are created. Therefore, it’s important that you feed yourself great designs. It’s what can help inspire your best design work—whether for yourself or for your clients—as well as keep you going during the creative down periods.
Without further ado, here are 3 reasons why you need to feed yourself great designs:

1. Good Goes In, Good Comes Out

Think of your design work as a body: when good design inspiration comes in, good work comes out. It’s similar to your body where when good ingredients come in, a good body and day comes out. You’re more energized, better rested and alert, healthier, stronger, and so forth.
It’s no different with your design work. Creativity is a ridiculously fragile thing – when you feed it anything but the best inspiration, your output quickly plummets. You really can’t be messing with it. Think about it: after watching some mediocre show or browsing through fairly average blogs or listening to safe-and-nothing-special music, did you get really excited and have inspired ideas start running through your head? The answer is probably ‘no’, and with good reason – bad ingredients went in, so it’s only natural that mediocre work would come out if you attempted to design afterwards.
Keep your design creativity in tip-top shape. Healthy, strong, alert, energized. By feeding yourself great designs, you increase your chances of also creating great designs. Good goes in, good comes out.

2. Get an Energetic Jolt During Uninspired Moments

Creative block happens to the best of us. Minimize it by feeding yourself some great designs. You’ll then get an energetic jolt. Perfect for those uninspired moments when you can’t seem to come up with any cool designs – or if you have to force yourself really hard just to finish an existing design project.
If you live in a city with some great public art, architecture, or museums or shops nearby, you can take a break and simply walk around outside. You’ll come back to your computer re-energized. Or you can flip through some design magazines, or browse some design showcase websites. Or do whatever that’ll expose you to some great, inspiring designs. But get away from your design work in order to feed yourself these designs. Even if just for a bit.
The energetic jolt you’ll get can help inspire you, and you can come back to your design work filled with creative energy and ideas.

3. Keep Yourself Going Longer Creatively

Creativity is like a sprint runner – inspiration usually happens in spurts for most. But by constantly feeding yourself great designs, you can help make your creativity more like a marathon runner so that you can keep yourself going longer creatively.
Now, that doesn’t mean being like a robot that never stops creating or being inspired. That’s simply not possible – plus, not many would really want that, anyway. No, keeping yourself going longer creatively just means that you can minimize the uninspired down times and extend your creative designing times. In other words, keep yourself going in the zone longer – when you’re inspired and your ideas and work is flowing.
Similar to #2, you’re not only shortening the uninspired moments but by extension helping yourself be inspired more often. The higher frequency of inspiration can help you keep designing in the zone for longer periods of time. You’ll have so many ideas, or you’ll be energized by some many great designs you just saw earlier.

Feed Yourself Great Designs

Again, you might be thinking this is forehead-slapping common sense. Of course you should feed yourself great designs rather than mediocre ones, and by doing so more frequently you’ll be inspired and in the creative zone more often, right? Yet it’s easy to forget the most simple of things and succumb to wasting hours on YouTube or playing games when you’re uninspired and feel like procrastinating on your latest design project. When all it could’ve taken to get you back on track is a little bit of time with a great design magazine, or a brief walk around town, or anything where you expose yourself to great designs.
Rinse and repeat, and you’ll help yourself be a better designer and create inspired designs more frequently.
Hopefully you now see how important feeding yourself great designs is. It’s not just for pleasure, or something to do to pass the time, or influence to take lightly – it’s what can help keep your creative engine well-oiled and fueled so you can run better and longer with your design work.
To recap, here are the 3 reasons why you need to feed yourself great designs:

1. Good goes in, good comes out
2. Get an energetic jolt during uninspired moments
3. Keep yourself going longer creatively

Now get out there and start feeding yourself all sorts of great designs.
How have you been feeding yourself great designs? What are some of your favorite sources of inspiration, especially outside of web and visual design?

While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them.

HTML5

HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website.

Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites. With Google rolling out an HTML5-friendly version of YouTube, many developers are starting to see how important this system will become in the near future. However, with Firefox resisting some of the advent of HTML5, developers and designers are still feeling the need to cover all of their bases when implementing new features on a website.
The idea behind HTML5 is that it’s not one large entity, but rather made up of smaller parts that work together to create something innovative and advanced. Each browser may support different features of HTML5, which makes it important for those interested in coding to figure out which features they need and which will be supported by different browsers.
HTML5 simply builds upon the widespread success of HTML4. That means a coder doesn’t have to throw away the existing markup, but rather build upon and improve the old one. For example, forms can be updated to allow for new features such as a better email input for those using a mobile device. However, viewers stuck in IE6 will simply see it as a text field and still be able to use it.
Here are some examples of HTML5 in use:

Features

• Any HTML5 syntax requires a doctype to be specified so that the browser can render the page in standards mode. The good news though is that the doctype declaration has also been simplified from previous HTML. It is now just: <!DOCTYPE html>
• The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.
• Editing the content of your website is simplified with HTML5. Using the contenteditable attribute, you can quickly and painlessly change your text by adding contenteditable=“true” to any element.
• The canvas element makes it possible for you to bypass Photoshop to make your 2D images and directly place them in your code.
• The application cache enables you to navigate web applications while you are offline.

Why Use It

• HTML5 will load much quicker than its older brother because it implements WebSockets.
• Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone but rather can create universal applications for all phones.
• You have more flexibility in creating your website.
• Video, audio and images are all easily written right into the code, eliminating the need for any third party software.
• This language is growing and will only result in more, new, better and faster features that will leave old websites looking outdated.
• HTML5 simply builds on HTML4, so the old markup can stay in place as you develop the new features.
• HTML5 and CSS3 together will give you some serious designer credibility.

CSS 3

Cascading Style Sheets (CSS) offer increased flexibility in the presentation of website content. In essence, it just makes everything prettier. Although CSS3 isn’t supported by all browsers yet, it’s becoming increasingly popular because it makes these changes so much easier than trying to get the same effect using something like a Javascript plugin or creating slightly different versions of the exact same image.
One drawback to using CSS is the requirement to implement filters to change how something will appear onscreen using different browsers. Although Internet Explorer is known for bugs, CSS can still be incorrectly interpreted by Firefox or Chrome. As such, some web designers have created different CSS codes to be sent to different browsers, or use filters to cut off CSS delivery completely.
CSS3 offers some exciting new features to enhance the appearance of a website. Although these features might not be absolutely necessary to the functionality of a website, users are coming to expect a website to look awesome as well as operate cleanly. CSS3 makes it easier for designs that will make visitors “ooh and aah” over them to be implemented.
Some features, such as menus, are necessary in almost any website. But with CSS3, the functionality and aesthetic appeal increases exponentially. Submenus upon hovering, horizontal menus, menus with rounded edges, submenus with tabs, submenus with descriptions, and menus with submenus with rounded edges with descriptions on hover are now all possible with some tweaking. Users will appreciate the ability to see a little more of what that page is about before potentially wasting loading time.

Cool New Tricks

Box-shadows – This could allow the main content to slide beneath another area, such as a footer, or cause the area to look as if it’s coming out of or sinking into the website. CSS3 makes this happen without requiring the coder to create a new image or use a Javascript plugin. Another technique is to cause the shadow to appear upon hover.

Text shadows – Sounds exactly like what it is: provide a drop shadow underneath HTML text elements.

h1 {
     text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Easier font additions – To add a new font, simply upload the file to your server, link to the CSS file and create a font family.
Multiple backgrounds – Overlaying multiple backgrounds to a page is possible with this code:

body {
     background:
     url(../images/bottom-left.png) top right fixed no-repeat,
     url(../images/bottom-right.png) top left fixed no-repeat,
     url(../images/top-left.png) bottom left fixed no-repeat,
     url(../images/top-right.png) bottom right fixed no-repeat;
     background-color:#ffffff;
}

Border images – Rather than simply using a stodgy old plain border, CSS3 allows you to upload an image to use as a border.
Opacity levels – Before, you had to create a new image or use a CSS filter. Now, simply input “opacity: 0.5;” or another desired number to get the effect.
RGBA coloring – Rather than using hex colors and memorizing them or referring to a cheat sheet, this technique allows you to choose the amount of red, green, blue and opacity in your design and doesn’t require any browser extensions.
Transform – This code allows you to choose how big you want an area to become during hover.
Rounded corners – Prior to CSS3, these used to be tricky, but now you can get rid of those sharp corners without using images..

div {
     border: 2px solid #434343;
     padding: 10px;
     background: #e3e3e3;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     width: 500px;
}

Note: Moz stands for Mozilla, while webkit is for Safari and Chrome.
Resizing elements – This code works in Safari to provide a small resizing triangle that allows users to…resize.

div {
     resize: both;
}

Handling the legal side of freelancing could possibly be one of the more annoying tasks required for the job. Having worked as a full-time freelancer I can attest the amount of legal paperwork and information can become overwhelming, especially for newbies entering the field.
No matter what your practice, be it web design to freelance writing, there is generally some form of legal contract you’ll need to create with your clients. Networking comes with the freelance territory, and within that is contracts and due dates for project completion. Below we’ll be considering some great tips for legal actions and pursuing your own career further in freelancing.

Always Draft up Contracts

Why are contracts so important? This question has been asked countless times throughout the decades and doesn’t come without a strong answer. Business has always been a shady game. Unfortunately levels of trust are indicative of a strong professional relationship. Unfortunately, not all clients will be so easy to work with.

Building a contract and having both parties sign from the start sets in motion a state of initial working values. These could include a timeline of project work, when and how much you’d be getting paid, along with other details you may find pertinent. These should be nailed out between you and your clientele until a reasonable agreement can be achieved.
It’s important to include each aspect that you’re both concerned with inside a single document. This will be your go-to primer for any difficulties which stem from project work. It’s an important document to not only cover your client in case of project failure, but also protecting you in the case of your client backing down from the work and payment.

Always Set Dates

Having a scheduled calendar is just another strong framework keeping you from drifting too far off task. An agreeable schedule of dates is something both parties should be able to look at and consider a reasonable amount of time for each task.

So for example, you may quote 1-2 weeks for a website mockup and graphics/icons designed. At this point the client would look over the designs, suggest any changes, and you’d plan for another 1-2 weeks for frontend development. This type of timeline is very lenient and doesn’t provide specific dates for when a piece of work must be done. This won’t work with all of your clients, although it’s a much more lax environment for creativity to flow through.
If it’s easier you may want to consider sketching out a small calender with weeks shaded in based on task completion. I have seen a few demos of these from past freelancers and it’s a great way to draw the attention of your client. This proves to them you not only understand what you’re doing but hold the creativity and business sense to plot out a course timeline for their project!

It may also be useful to set up meeting times to share information face-to-face. The frequency of these would vary depending on the type of project being worked on. A from-scratch new website infrastructure may require 3 meetups weekly while an icon set design may not even require face to face interaction. Keep your schedule loose and ready for anything, but once you’ve got something solid ensure you get it down in writing.

Follow-Up Clauses

One of the big pet peeves we see in freelancing today is the client base looking into running the show. If you’ve done any work as a freelancer you have probably run into this countless times in the business world. After creating a perfect mockup design your client may say “yeah it’s okay, but can you update changes X, Y, and Z? Oh and let’s scrap ideas A and B while we’re at it…”
This is not only very frustrating for you but will also mess up your pre-planned timeline of events. It’s important to include a clause about revisions and a detailed policy on work updates. There are no set rules here, but it is important both your client and yourself agree upon the terms.

You may charge extra for more time spent updating colors/layout spacing. However, if your client isn’t aware this is going on they may have an awfully difficult time forking over any cash. Alternatively I know many freelancers who include the first 2-3 revisions for free and will charge after that based on an hourly rate. It’s all up to you regarding how you’d like to structure your overtime. Just be sure to include something.

Final Products and Delivery

In the wacky world if web design it is often possible for confusion to settle when it comes towards a finished product. There are so many freelancers offering icons, animations, Flash graphics, videos… from a client’s perspective who doesn’t understand much of technology this can be awfully confusing.

It should be discussed before even starting the project work what is expected to be delivered as a final result. This could include multiple things, however for a general website design it’s often only a handful of graphics and coded HTML/CSS documents.
If your client is looking for something slightly more convoluted such as WordPress theming or plugin development include a few sentences referencing the types of files to be shared. These could be .css, .php, .js libraries, or anything else which may be included inside the projects’ files.

If easier just draft out a bulleted list of the files to be returned and at which stage the work will be ready for client’s eyes. This shows a sign of trust that you actually know what you’re doing and will be able to deliver quality code! If you’ll be personally uploading all files into the web server this may not be necessary, but still good practice to include just to avoid possible confusion.

Conclusion

These tips on legal writing should get you pointed in the right direction. The career path of a freelance web designer is not easy, especially entering into business for yourself. There are plenty of tools to help out with invoicing and paper trails, so make use of these whenever possible.
If you’re just getting started I’d also recommend building up a small network of clients to get some buzz going around your name. Here are some tips on finding local freelance clients if you’re looking for a way to break into the market. At the end of the day legal structures are all about protecting both parties of a freelance project to ensure they will deliver their regards on-time and respectably.

Let’s address the big pink elephant in the room first. Banners are not dead. They’re not on life support either. They’re doing fine and they’re going to be around for a while.
They’re doing fine mostly because of their new home – Google AdWords. Google Display/Content Network to be precise. If you are (or your client is) advertising on the Content Network and not using banner ads then you’re missing out on a really big and tasty piece of the pie.
The competition on AdWords is, in a word, frantic. Nevertheless, there are still some places where the competition is not so fierce. One of those places is the realm of image ads (a.k.a. banners). The competition for image ads in 2009 was similar to the total competition in all of AdWords in 2001. And those who remember know it was a wild west back then.
Now the big reason why banners are worth a try. Simple – they work. From my experience there’s never been one case where I couldn’t outperform a text ad by a banner ad (when it comes to the Content Network). Better CTRs (click through rates), similar conversions. Always.
All of this means just one thing. Banners are a must as a part of an advertising campaign.

What is a good banner?

A good banner is not one that looks good. A good banner is one that works. It can be the ugliest thing in the world, but still, if it works it is perfect.
Now what I mean by “working”. Most ads on the internet have only one task – generating a click. If an ad has an over average CTR it is considered to be a good one.
You shouldn’t aim or care about whether or not people admire your craft and creativity when they see your banner ad. It doesn’t have to be beautiful. It doesn’t matter. Keep your eyes on the prize and remember that there’s only one important thing – measurable results, not temporary admiration.
Let’s start with some basic rules. And after that we’ll get into some more in-depth advice.

Basic rules of creating a good banner

1. “Know thy placement”

At least try to.
If you want to create a good banner you ought to know where the banner will be displayed. This isn’t always as easy as it sounds.
If you’re on automatic placement on AdWords then your banners will be displayed on a number of different sites around the internet. The problem is you don’t know which ones. You know nothing. Of course, you can look at the reports later on and find out, but it’s not really helpful at this point, is it?
So examine the soon-to-be placement of your banner whenever you have the possibility. Look around and take some notes.
For example. How many ads are there already? What sections of the site do they appear in? Are there many text ads? What is the style of other banners? Do they try to blend in or stand out? What does your placement look like? What is it surrounded by? The more intel you get the better. It’ll come useful when you start creating the banner.

2. Good copy sells

I know that it’s a banner not a text ad, but you still have to use good copy. This is not the place for a copywriting tutorial, so let me just give you a handful of tips.
Headline holds 80% of success.
If you get the headline wrong nothing else matters. Devote at least half of your copywriting time to working on the headline. Get some inspiration from headlines that are already successful. Use them as a template.
Answer one, two, or all of the questions a viewer might have.
“What? Why? How? What’s in it for me?”
Each of those questions is equally important. People want to know what you are offering, why you’re doing this, how to get it, and why they should care (what’s in it for them). Answer those and you’re going to be just fine.
Call to action.
Probably the most important thing. Don’t forget to provide some kind of call to action. Even something as simple as a “click here” button, or a “get your free gift here” button. If you want them to do something tell them what it is.

3. Convincing graphics

That is if you’re going for a graphical banner, which you don’t have to do (I will get into this later in this article).
By convincing I mean something that brings some specific information along with the graphic. Not just something that looks nice. The kind of information that’s useful to the target audience. Something they will notice, and then act upon.
Let me give you an example. If you’re creating a banner for an online lingerie store you will probably use some images of semi-naked women just to get attention (just a side note – semi-naked women work equally good in terms of attracting attention both for male and female eyes). That is fine. But it’s better to show the names of the products those women are wearing and the prices as well. That way the whole project is both pleasant on the eye and informative.

4. Readable font

You would be amazed how many banners use fonts that are totally unreadable. And I’m not just talking about the font itself. I’m taking about the style as well. Poor contrast, blurry letters, letters to small, too big, and so on.
Here’s a quick rule of thumb. Once you’re done with your banner show it to your grandma and ask her to read it out loud. If she struggles to do so, change the font. As simple as this. Grandma-proof your banner!
Learn more on mastering font combinations and get some free high-quality fonts for your design.

5. Appropriate colors

Different colors mean different things in different cultures. Know your target audience, so you don’t do anything stupid. The whole thing is a really wide topic and it has been covered very well already. Check out one of these sites to learn more:

• Colours In Cultures
• {Color Meaning, Symbolism and Psychology}
• Color Theory for Designers, Part 1: The Meaning of Color
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology
• 10 Super Useful Tools for Choosing the Right Color Palette

There’s just one trick I want to share with you. There are two colors that usually work exceptionally well: orange and blue.
Orange is great for all kinds of buttons (if you don’t believe me just visit amazon). That’s because orange is the most noticeable color right after red. However, it doesn’t raise all the negative emotions red does (things like “stop”, “look out!”, and “danger”).
Blue is the color of safety. It creates a sense of trust and confidence. It works well for headlines and text in general.
I’m not saying that you have to use those two colors, but it’s good to be aware of their advantages.

6. A frame

Just a thin line around your banner can improve its attention grabbing potential. Why? We’re used to seeing frames in real life (e.g. paintings, pictures). Therefore a frame has a subconscious effect on our perception. We simply focus more attention on the thing that’s inside the frame. That’s all. Plus, adding a frame to a banner is, what, 15 seconds of work?
Now that we’re done with the basic rules let’s get to the real fun part.

Banner blindness – the disease of the internet, and how to cure it

I’m sure you’re familiar with this. Banner blindness is a problem that touches almost every internet user. There are just two groups that are not sick (yet). People who have been on the internet for less than a month and people who are below the age of seven.
The whole problem has just one simple symptom. Everyone who’s affected is blind to anything that looks like a possible banner. It doesn’t even have to be an actual banner. It just has to look similar enough.
And I really mean “blind”. Because it doesn’t happen on a conscious level. It’s not like we see the banner and then decide that we’re not interested. We literally don’t see the banner. Our subconscious erases it from our sight leaving a blank spot.

There’re two main ways of beating banner blindness when designing a banner

(Well, I’m sure there are more, but let’s just focus on these two approaches.)

1. Design a banner that looks like a banner, but is, in a word, a masterpiece

Design a banner that’s a purple cow (Seth Godin style). It has to stand out among all the other things that are displayed on the page. It has to be the most visible thing there. Something that is just impossible to be overlooked. Something like a purple cow in the middle of the room.
You can use several tricks to achieve this goal.
Use pictures of attractive people.
Remember the lingerie store example? Pretty faces and well-built bodies have always been attention grabbers. Capitalize on that whenever you can.
To make it even more effective use a picture of someone looking straight at the camera. Whenever someone tries to make eye contact with us we tend to notice, especially if the person is attractive. Even when the eye contact is fake – as it is with a picture.
Pretty, cute animals.
Preferably small, furry animals. That’s an old trick as well.
Cats are cute, small, and furry. Look how far they’ve gone in terms of YouTube popularity. There’s a good reason why you don’t see many big-rhinoceros videos.
Use pictures of cute animals if you can. And don’t forget about the trick with them looking at the camera. It works here as well.
“Free”, “New”, “Sale”, “-80%”, and so on.
Use these trigger-keywords to produce immediate impulse to take action. The reason why these work is not because it’s an innovative idea, it’s because it’s an old, a well tested idea.
People are used to seeing that kind of words in thousands of marketing messages they’re exposed to every day. Just get on the bandwagon and use them too.
Utilize the power of “free!” Free is one of the most powerful words in English. (Check out “Predictably Irrational” by Dan Ariely.) Whenever people see this word they start to act really irrationally, so it’s good to be the one that capitalizes on it. Whenever there’s something to give away for free don’t forget to say it.
Funny beats boring.
If you can be funny, be funny. But not the I-am-the-only-one-laughing kind of funny. Making someone smile goes a long way, both in life and in banner advertising.
Funny images, funny people, funny animals, funny situations.
There’s a really easy trick to get someone to smile, you just have to smile first. That’s a real life approach. When it comes to banner advertising you can simply use a picture of someone smiling.
Smiling, attractive person looking at the camera. That’s a home run!
Interaction gets attention.
There are some areas where an interactive banner works really well. This is a kind of banner that encourages people to take some kind of action with it.
Let me give you an example. If you’re creating a banner for a weight loss site you can provide a body fat calculator right from the banner. Just a couple of simple input fields and a “calculate my body fat” button. After someone clicks the button they are redirected to the landing page.
Make sure that the whole thing is completely clear and simple. The input fields have to look like a classic HTML form fields, and the submit button as well. People like to use things they’re familiar with. Everyone’s familiar with a standard HTML form.
Flash technology might be a good idea for this.
You can use this approach in many different markets. There’s always something…

2. Design a banner that doesn’t look like a banner.

This is what I like to do a lot. If something doesn’t look like a banner (at least at first glance) it’s not affected by banner blindness, as simple as this.
Now the how-to part. There are two possible ways.
The first one is to create a “text banner.” Something that looks like a text ad, only it’s a banner. Something that has very little graphical elements, and just a few sentences of copy. Similar to what you’re stuck with when creating a text ad for AdWords. It’s going to be ugly, I know. But guess what? It works.
Here’s an example:

The second one is to blend in with the style of the site where your banner will be displayed. If you’re allowed to, try to create the banner in a way that it looks like a part of the website. Like an extra menu, or like a standard element of the sidebar, or whatever else. Just blend in.
Again, if people won’t notice that it’s a banner there’s no banner blindness, and that’s all you want.
You can even experiment with some fake elements (which is something I personally try to avoid). Elements like fake checkboxes or play buttons (so the banner imitates a video).
Let me address one thing that’s probably on your mind right now. Even though it’s fake it is not necessary evil. First of all, you shouldn’t be creating a banner for something that’s a scam or just not a good deal all-around. Never participate in that kind of projects. You only want to be helping businesses that have some valuable products or services, and you want to create a banner that will bring the best results possible. If the client is (and you are) fine with fake elements you can use them. Even just for the sake of testing to find out how they compare to other, not so cunning formats.

Next step: create it already!

Just fire up Photoshop or Illustrator and create the banner. Remember about the basic rules. The ones that are always valid no matter what approach you’re going for.
If you were to remember just one thing from this lengthy article it would be this: Looks don’t matter, results do!

A few years ago, when designers wanted to add cool effects to the navigation of a website they used Flash. We all know the types of problems that caused. Now with the growing popularity of javascript frameworks like jQuery, those same types of “Flash-like” effects can be achieved without Flash. Here are 10 jQuery tutorials and techniques to enhance your website’s navigation and menus.

Horizontal Scroll Menu with jQuery Tutorial

BBC Radio 1 Zoom Tabs

Spritemenu

Outside the Box Navigation with jQuery

Sexy Drop Down Menu w/ jQuery & CSS

A Simple and Beautiful jQuery Accordion Tutorial

Make a Mega Drop-Down Menu with jQuery

jQuery look: Tim Van Damme

jQuery Feed Menus

Create a Good Looking Floating Menu with jQuery Easing

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 12 excellent CSS3 button and menu techniques.

Roll Your Own Google Buttons

CSS3-Only Tabbed Area

Radioactive Buttons

Apple’s Navigation bar using only CSS

How to Build a Simple Button with CSS Image Sprites

Creating Dynamic Buttons With CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS3 Chunky Menu

CSS3 Dropdown Menu

Pretty CSS3 Buttons

jQuery style menu with CSS3

CSS3-only horizontal drop line tab menu