You’re going on a hot date tonight, what should you where? He’s really into sports, so maybe a Dallas Cowboy jersey. He likes tall girls, so maybe a dress with heels. But his favorite color is green, so maybe that nice new sweater you just got for Christmas. Whatever the case may be, you must dress to impress, right? It’s a no brainer.

Just like with any other type of attention you are trying to receive, treat your website with the same amount of fashionista advice. Luckily, most top names in the game know all the tricks, but do you? Have you ever looked at your website and thought, “Am I appealing to the right crowd?” Do you sell soccer balls and have a hot pink polka site, or own a floral shop with a black site? You may take a step back and consider your target audience when deciding on what stripes or stars you want, when branding your companies new website.

First, the basics, man vs. woman. The biggest rival of all, since the beginning of time. Clearly, if you’re going for a more feminine approach you aim for nice, bright colors. Your pinks, purples, pastels. Now for a more masculine site you darken things up a bit. Go for bold, with greens and blues. Not that this is the law or anything, you just want to grab their attention, as quickly and easily as you can.

Next subject, age. Are you appealing to a child or your grandma? From graphics to text, you need to make sure you’re sending the right message. Children want to see a multitude of colors, cartoon characters, and big glossy rainbow buttons. Your grandma might need less graphics, nice big text for her to read without a microscope, and very clean and simple to navigate. The children of today can easily find their way around the most complex of website layouts, but grandma may need a little more direction.

Now let’s take personal interests. An athlete will have a different take on appeal then a librarian. A person looking for a massage therapist needs something soothing. A customer looking for fine dining wants to see pictures of the delicious food you have to offer. So you want to make sure that whichever it is that you’re appealing to, they understand the message you are sending as soon as they enter your site. A wrong message could send your user in a different direction.

So now we go straight to the source… the internet… to see how a couple companies do it best.

Now this site may just be the #1 example of all time, but it proves a point on a lot of levels. Nike.com doesn’t play around when it comes to branding. They appeal to the athlete. From the grassy background to the dark color scheme, they clearly know who their audience is.

Cartoons, games, videos, oh my! Nickelodeon doesn’t think twice when considering who to appeal to. From the background, to the navigation, to the simple colors, and fairly busy layout, I’d say its clear who this site is for.

Edgey, trendy, hip. MTV appeals to the modern day crowd. Age group is 20’s – 30’s that are fairly up-to-date in culture. Their website says a lot about who they are. Once a music station, that was taken over by a slew of reality TV and raunchy programs, their image reflects what they’ve turned into. My favorite part of their site… keep hitting refresh to get different backgrounds.

What better a way to entice the female viewer then throwing the latest line of inventory at them upon arrival? Coach knows the way to my heart, and probably every other lady that goes there too. From the vibrant colors, to brilliant imagery, they have no doubt what audience is going to their site. How do you not buy something?

Hungry? Well good, because there’s only one option of where to go when you check out Outback’s site. The neutral, yet bright color scheme, and the delicious steak that then transitions into a piece of carrot cake, grabs the consumer instantly. They don’t pick sides, they appeal to everyone! I know where I’m going for dinner.

Looking to relax? This spa site really appeals to the female viewer looking for a day of Zen. From the soothing colors, to the modern layout, it’s very inviting.

Is your website sending the right message?

We’ve covered programmer types. Now it’s time we flip the coin and pidgin-hole designers.  I’ve come up with four types of designers I’ve come across.  I’m sure there are more so feel free to put your own in the comments.

Pablo Picasso
This first group is made up of artists who like the idea of a paycheck. At heart they are in it for the art, but web design pays the bills. They approach each design as a commissioned piece of art rather than a composite for a working site. Each piece is meticulously crafted into what is often a stunning work that could very well be found gracing a wall somewhere. The designs this group produces display balance, consistency, and visual appeal. However, these designers are artists at heart so as a Picasso painting doesn’t really give you any clue to who it’s a portrait of, their designs favor ascetics over usability and strong conversion points. Also, since these designers view their work as art, they take feedback and criticism personally resulting in a half hearted effort with revisions.

If you ask them to produce a big red button you might get this:

John Wayne
This second group shoots from the hip. They are not artists, they are visual gun slingers who find inspiration and run with it. Like the “Duke” they design with a swagger, using bold ideas that often break the “rules” of design. This blatant disregard for the color wheel often produces designs that are exciting, attention demanding, and innovative. They usually involve more consideration for the user experience and an emphasis on conversion points is second nature. Unlike the “Picasso” designer, this group loves feedback, as it just adds to their arsenal of ideas. However, the designs they produce tend to be cherry picked ideas the designer likes and integrates regardless of whether it fits the design or not. And since they love innovation so much they also tend to try to create a “new” way of doing things, which can be confusing to users. The end result can end up a bit jumbled and inconsistent.

If you ask them to produce a big red button you might get this:

June Cleaver
This designer LOVES it when things are clean, tidy, and in their proper place. They don’t feel a passionate need to create a masterpiece and neither do they worry themselves with re-inventing the rules for how a site should be designed. Their designs are consistent, usable, and easy to navigate. These designers create layouts that enable the user to easily find their way around. The design is pragmatic and almost always fits the type of site being designed to a tee. Ecommerce sites look like an eCommerce sites. Brochure sites dispense information in a no-nonsense manner. All in all there are no surprises and no inconsistencies. They also tend to be boring. While they pass information to the user cleanly and clearly, they don’t inspire them or demand their attention.

If you ask them to produce a big red button you might get this:

The Economics Teacher in “Ferris Bueller’s Day Off” (Ben Stein)
“Bueller… Bueller… Bueller…”, Ben Stein’s ultra dull drone embodies what every high school student has experienced: the dull ecconomics/math/accounting teacher. These teachers have zero people skills and are not looking to gain any. Their design counterparts are not much different… and they are known by another name: programmers. Sadly, many design firms make the home page look good and leave the rest of the design to the programmer who is doing the nuts and bolts of the site. While some programmers excel in the design realm many, many, MANY programmers do not. They are responsible for clunky, boring, and uninspired designs. The only reason I include them in this list is because for some reason they are responsible for so many designs on the internet, many times in rather significant places (go dig down into a large corporate site, the design tends to get worse the deeper you go). There is no upside here. Just dull, unattractive, and hard to navigate non-designs.

If you ask them to produce a big red button you might get this (God help us):

Conclusion:

Every desginer has the place where they pull from to produce a design.  Some pull from the artistic force within, some from the need to innovate, and others choose a pragmatic path.  Some should not be allowed to design… ever.  I’ve found the best designs come from someone who is willing to go beyond their strengths and stretch into new areas.  Most often this takes practice, hard work, and lots of mistakes along the way.  So to all the John Waynes, June Cleavers, and Pablo Picassos out there make every effort to widen those horizons.  To the Economics teachers, make friends with a designer.

One of my favorite things to play with in this creative industry is fonts! There are so many of them out there, thousands I’ve never even seen before, but I try to be aware of as many as I can. Here are a few free resources to use, if you’re looking to expand your font library.

1. 1001 Free Fonts - Simply put, here is a source giving you 1001 fonts, free of charge!
2. Font Freak - Whether you use Mac or PC, font freak has many cool fonts to choose from.
3. Urban Fonts - If you’re into curly, funky, stencil or anything else, they have lots to choose from.
4. Da Font - Many font styles to choose from, such as groovy, horror, medieval and graffiti.
5. Font Squirrel - Choose from their latest features or a slew of other great categories.
6. Abstract Fonts - Looking for different and unique? This the perfect source to step outside the box!
7. Font Space - You’re sure to find what you’re looking for whether it is trendy, spacey, handwriting or anything else.
8. Font Cubes - For the most up-to-date font styles, this should be your first stop. Check out their dingbats collection as well.
9. Fonts 101 - Thousands of more fonts to choose from. Allows you to type in your text, to try out the font before you download!
10. Jabroo - Want to preview your text, choose a color, and background color. This font engine is sure to help you pick the right one.

Do you have any other font sites you frequently visit?

Everyone gets inspired differently, no matter if you’re a developer or designer, or even if you’re a painter or sculptor. The element we all have in common is the blank canvas we start our days with. To start off I’m going to talk about my second favorite way that I personally get inspired. My number one way is basically staring at the computer waiting for an idea to pop into my head, and seeing as that doesn’t give me much material to write about, we’ll skip that and go onto the next mode of inspiration. If you are about to design a site, with a specific look and feel in mind, chances are, that someone else has done it, and a pretty good chance that a million other people have done it. So the best thing to do is to check out what’s out there online.

Get Inspired, Tip 1:
Surf the web for comparable sites

First of all think of the “style” you’re looking to achieve or the “subject matter”. If it’s a particular audience you’re going for, such as athletes, look at sports sites such as, ESPN.com, Nike.com, NFL.com, NBA.com. They must be doing something right, so why not take a few pointers from the best in the biz. However, when looking for a very specific style, look and feel, I go straight to the answerer of all my questions, the search engine. For this latest design we completed at lifeBLUE we were going for a very retro/vintage look. So we typed phrases like “retro websites”, “vintage web design”, something along those lines. And we got hundreds of design examples, websites showcasing these styles, portfolio’s reflective of what we were looking for, etc. The sites became endless. Here are a handful of examples we found most appropriate for the look we were trying to accomplish:

Now, it’s a matter of pulling from elements you admire in the design, adding your own touch, and piecing together your design ideas. Simple as that, right? Well maybe not “that” simple, but just by scoping out other site designs, you have managed to spark that creative fire and create a foundation for you to start designing from. If anything, it starts you off on the right foot and gives you a good boost!

And for the curious ones out there, here is what the final project looked like for lifeBLUE:

So, just take a few minutes (or this can sometimes turn into hours) and check out what’s out there. Maybe a trend you’re unaware of, a new design technique, or a simple tip or trick to try. The possibilities in this industry are endless, and change every day, so we’ve got to keep up. It doesn’t hurt to venture out and see what others are doing. Above all else, if you see an idea you like, just aim to make it better!

What websites get your creative juices flowin?

It’s a design standard: place your important and/or often-used design elements in the upper right corner of your design. Take a look at the home page of some of your favorite sites. You’ll notice convenient links to maps, contact us pages, search boxes, login/logout fields, and more — and most of these elements are in the upper right corner of the page.

It’s become so familiar that most of us know instantly that when we want to search or login, our eyes immediately check the upper-right hand corner first. Instead of going into the psychology of why that is, here’s the reason I think a change is coming.

On the iPhone, your navigation is done through a touch-based system. To activate the home-screen, you hit a conveniently-placed home button on the bottom-center of the phone.

It’s round and concave–perfectly (and intentionally) suited for thumbs, big and small. That being said, most people cradle their phone such that their thumb is always hovering near the home button. The iPhone is 4.5″ tall. If you have a thumb that’s long, congratulations on your pro basketball career. But if you have an average-size thumb like the rest of us, you’ll have to move your thumb from the bottom of the screen to the top, or use a finger to do the same.

My thumb’s range can comfortably cover the bottom 2 or 3 out of 5 rows. So, for convenience and speed, I’ve reorganized my icons so that the most-used ones are near the bottom of the iPhone’s screen. Apple does this too, with “Phone,” “Mail,” “Safari,” and “iPod” organized by default as the bottom-row on all their iPhones.

This is quite a bit different design pattern than what we are traditionally used to: placing often-used elements at the bottom of our designs. As touch-screens rapidly appear on our phones, and will eventually make their way to our laptops and desktops, we will see different design paradigms that shift the focus of icons, elements, input fields, and more to the bottom of our screens, rather than the top.

Look around the web and you’ll usually notice three things:

1. A good site will have good user management.
2. There are a lot of poorly designed sites out there.
3. Someone is blabbing about it on Facebook.

We’re here to help you with all three. You already know we can design great sites – but did you know we can make user management for your site a breeze too? If you’re a developer, you know that implementing user management can be a pain. Even something as simple as creating an account for a user to login and store basic credentials can eat a few hours out of your precious budget.

For example, to create a user, you not only will have to figure out if the username or email address is taken, you will have to figure out if the password meets certain requirements on length or complexity. You also have to wonder if the “user” really is some automated robot that’s about to create 1,000 accounts and send an infinite amount of Xanax discount coupons or personal enhancement ads to your friends and family — all from a fake user account with your nice upstanding company name tacked onto the end — which could create some tense moments between you and Grandma at the big summer BBQ. (Grandma just got her first email account, and thanks to you, her first piece of inappropriate spam).

So, you’ve figured out ways around that with some nice validation checks and maybe a free captcha generator that prints out those nice squiggly letters that surely no robot could ever figure out, right? But, once Grandma finally gets her account set up, you’re going to have to worry about her forgetting her password — or wanting to change her email address or username, and then you’ve got a whole other set of problems to worry about.

What about social networking? Won’t you want your Grandma and her knitting group to help you build the popularity of your site by forging friendships with other users on your site, and talking up all the great points and usefulness you’ve provided them? As a developer, you might typically need to set aside a good week of hardcore programming to turn out some sort of respectable social networking, and by that point, you’ve spent one week of your two week budget just on user management and social networking.

This was life before Facebook Connect.  If you haven’t heard, Facebook Connect lets you allow users to login to your site using their Facebook username and password:

What that means to you is that you’ve now got a bonafide login system, password retrieval system, and one of the best social networking engines available — all with about 5 minutes of your time and just a few lines of code. Users can now interact with your site just as they normally would, except they have the built-in convenience of not having to create a new account just to be on yet another site.

Facebook’s Developer pages make it really easy to get started. I could explain it all here, but I won’t waste your time when their instructions are every bit as good as mine. Just follow the short, simple steps and you’ll be well on your way. If you want to see it in action before you integrate it into your site, checkout this nice little demo that Facebook provides: http://www.somethingtoputhere.com/therunaround/

Some of the dingiest diners and dives serve the best food on the planet. We’ve got a few places in our neck of the woods that fit the bill - nondescript or even crumbling on the outside but a mind-blowing culinary experience within.

That brick-and-mortar atmosphere can work for some small businesses. But it’s a recipe for disaster online.

The appearance, functionality and overall feel of your website is so crucial to success. Visitors form an instant impression about your business or your brand upon arriving to your home or landing page. Unfair or not, that impression will color their opinion of your credibility and your ability to deliver quality products or services.

You might make the best widget on the planet, but it’s tough to inspire potential consumers to action if they can’t get past your circa-1997 Web site. There are a host of simple templates companies can rely on to spruce up their aesthetics, but those do present some limitations.

While looks are everything, there’s a bit more to consider when thinking about your online presence and web design - boosting your standing in the search engines. On this note, we cede the floor to search optimization guru Aaron Wall, who has addressed the importance of quality design multiple times on this blog (SEObook):

“As spam continues to spread across the web, investing in a unique design helps set your site apart from most other sites. The difference between “spam” and what is worthy of subscribing to is often not much more than good content formatting, clear writing, and a strong site design.

Making a site accessible, usable, and professional looking might cost you $10,000 or more by the time you are done with it. If you are low on funds, it might make more sense to spend that money on brand building and marketing, but if you want designers and high authority webmasters to read your site and link at your site it is much easier if your site looks professional.

Off the start I did not believe that coding errors or design mattered that much, but if you want web designers and developers to link to you, then your site has to pass the sniff test. That consideration is much more important if you write a tech blog than if you run a fairly static e-commerce site.”

We can’t stress it enough - credibility is key. Not just for your potential customers, but for independent experts, technicians, bloggers and others who can vouch for your reputation, point prospective clients your way and generally help serve as reference points to your site.

We at lifeBLUE have built our reputation on crafting intelligent, beautiful and intuitive web design. Our team of expert programmers, designers and content creators understands the vital importance of functional, awe-inspiring design. You can check out some our handiwork in our portfolio.

Usually I stick with web development when it’s my turn to blog, but for this week, I’m gonna step out of my usual role and touch on some web design for a change. First and foremost, Photoshop is probably one of the coolest pieces of software out there; you can basically accomplish anything and everything in it. For web designers, graphics designers and just plain ole “designers” in general, Photoshop is life. With all the capabilities it has and endless amounts of graphical possibilities, there’s no possible way to ever really know everything it has to offer. So it basically comes down to trial and error, stumbling upon a cool tool and trying to figure out how to use it, or simply finding a tutorial online and testing it out for yourself.

All that being said, when thinking of a cool tip or trick to blog about, I asked myself what I personally use a lot when designing, and one of the first things that came to mind were masks. Whether it be to create a fade, an outlined shape, deleting without actually “deleting”, or just revealing only certain amounts of an image, masks are used in most (if not all) things graphical. So let’s think “outside the box” and take it a step further to something not as commonly done. When you think masks you think basic shapes, gradient fades, and possibly using them to erase portions around an object you are trying to cut out of its original image. But what about text? You can do really cool text effects as well by simply using a mask. Whether used in a banner to show a skyline, or taking a picture of a person and masking it with their name to use on a personal blog, using text as a mask can turn out really cool. And it is super easy…

1. Open up Photoshop and start with your blank canvas. (For mine, I used a 500px wide canvas with a black background.)

2. Select the text tool and write your text on a new layer. When selecting a font, take into consideration the amount of room the font is giving you to reveal the image behind it. Thicker fonts will allow you to show more, while scripty or thin fonts will not allow as much. You could also use “bold” to show more as well.

3. Bring in your image (drag and drop) that you want to use, and place it on the layer above your text. You can resize and move around once we’ve applied the mask so don’t worry about placement and adjustments at the moment.

4. To apply the mask to the image, within the layer window, hold down ALT and click the line between the two layers. When you press ALT and rollover the area between the two layers, you will see your mouse turn into an icon of an arrow and two circles. That icon is your indication you can click to create the mask.

5. This takes the bottom layer and masks the top layer behind it, spelling out your word with the image. Now that your mask is created, you can then adjust the image how you want, click the image layer and move around, resize, adjust as needed. The text layer does not move, allowing you to get your masked image in the right position.

6. To make your text effect more readable, play around with your blending options on your text layer. To do so, right click layer and go to blending options. Add a stroke, shadow, glow, whatever you think gives it that “cool” factor.

End Result:

Name Example: