Toolbox Blog: resources, tips, tricks & info for creative professionals

Archive for the ‘Design Tips’ Category

December 18th, 2008

The 10 Most Valuable Web Color Resources

Color Inspiration

Screenalicio.us - Browse thousands of websites sorted by color.

Colour Lovers - Ratings on thousands of user submitted color palettes. They even have a feature to find stock photos that match a certain color.

Color Selection

Color Palette Selector - Color palette and blending selection tool.

Color Blender - Another excellent tool for color matching and blending.

Color Harmony Selector - Find color complements for your RGB colors.

ColourMod Dashboard Widget - Free Apple dashboard widget for color selection.

Color Resources

Color Code Matching Chart - If the color matching tools listed above aren’t your thing, try this chart instead. View and compare hundreds of colors at once. (Pantone, CMYK and RGB hex).

Official RGB Color Names - Listing of all of the named RGB colors.

Color Grabbers

Palette Grabber Firefox Extension - One-click to download a website’s colors to an Adobe, Flash or Paintshop palette.

PagePainter - Grab colors directly out of your web browser.

December 11th, 2008

Wonderful Web Fonts Resources for Designers

Typography is an integral part of any web design - and can be notoriously tricky to master. So in an attempt to make it just a little easier we’ve assembled some of the best typography/fonts resources on the web. Enjoy!

Font Articles

How to Apply Typographic Style to the Web - Listing of best practices for using type on the web.

CSS Font Reference Sheet - Reference sheet for using CSS.

Font Collections

1000s of Free Font - Enormous collection of free fonts.

Fonts for Flash - Collection of pixel and super pixel fonts designed to look clear in Flash at small sizes and low resolutions.

Pixel Fonts - Collection of pixel font for use with Flash.

Font Tools

TypeTester - Compare website font sizes and settings.

Font Styling Wizard - Choose your font settings, click a button and you’ve got your CSS font code.

What the Font? - Upload an image of a font and What The Font will help you figure out where it came from.

Bitfontmaker - Software to create your own font.

Lipsum - Lorem ipsum dummy text generator.

December 9th, 2008

We’re Flattered. Sincerely

They say imitation is the sincerest form of flattery…

But it’s still slightly annoying when someone blatantly copies a design element from your site - and even more annoying when they link to said copied element and cause you bandwidth problems.

I guess AgencyTool has come into it’s own because a certain site, who shall remain nameless (unless they turn out to be difficult), has hijacked a link layout from us.

vs.

Now, I realize that these are somewhat branded images of those sites, but at least save the images to your own files, or switch up the order, or use a different style or put them in a different area of your site - something, anything!  We could have done something like this but we decided to take a somewhat less harsh approach by just switching out the images.

Moral of the story - don’t steal other people’s work!!  If you do, at least be smart/sneaky enough not to link to the images directly.

December 3rd, 2008

Stop Spreading Lists Over Mulitple Pages!

It’s been out for a while now, but this morning I was all excited to go check out what time.com considers the 50 best websites of 2008.  I’m greeted by the headline “The Best in the Online World” and, with building anticipation, I click enter…only to realize that in order to see these 50 sites I will have to click through 51 pages.  Putting aside the fact that this math doesn’t seem to work out right, I’m immediately put off and slightly annoyed.

And I know I can’t be the only one to feel this way.

Now I have to read a paragraph, and wait for my browser to load, read a paragraph, wait, etc. It’s a definite time killer, and more likely than not my browser will crash at some point down the list.  Plus it makes browsing over the list quickly impossible.  I realize that I will miss the witty commentary about each site - but sometimes I just want a quick glance over.

This trend has gotten so bad that people on social bookmarking sites like Digg have started to post the actual list in the comments section - with captions like “save your time, here’s the list:” or “great list, but takes forever to load - here it is:” or they get annoyed too and take this route:

Now, I’m not talking about 50 item lists spread over 3 or 4 pages, that is completely reasonable - it actually decreases loading time of the page and browsing the list is still a valid option.  Its the 1:1 ratio of item to page that is the problem.

In theory I understand the reasoning behind the decision.  You stand to bring in more advertising revenue by placing different ads on each page, and they may get a boost in the search engines because each page is getting lots of traffic.  But these “benefits” come at the cost of usability and in my opinion no site should be willing to sacrifice that.

November 17th, 2008

5 Great Pieces of Advice for Aspiring Web Designers

From the obvious points to the light-bulb-over-the-head moments, there is a lot of advice floating around out there for aspiring web designers.  Here are 5 pieces of advice you’ll get from anyone with experience:

Plan it out! Congrats, you’ve landed the project and now your just itching to go start the build.  But you’ll save time in the long run by having an overview of your design.  It just makes sense to do a site diagram in Visio or, if you’re old school, pick up that pencil and paper.  You’ll catch the obvious mistakes/problems early on and will be able to fix them before its too late.  As an added bonus, it gives clients something tangible to look at while you explain your ideas.

Practice, Practice, Practice. Once you’ve got the basics down practice.  Volunteer (aka do work for free) at first to find your style and build up a portfolio.  Do a site for your church/favorite local pub/barbershop quartet…whatever.  Build up and maintain a few sites of your own - people will generally be more impressed with what you can do rather than where you went to school etc.

Be a “Jack of all Trades”. Web design is a competitive market, so don’t expect to be able to learn the basics and immediately land freelance jobs.  Make yourself attractive to potential clients by learning HTML, XHTML, PHP, SQL, CSS, and Javascript.  Its unrealistic to become an expert in every single one of these - but it pays to be familiar with them all.

Get Inspired! Take a look around the Internet for examples of good design (there are countless galleries around that were created for this purpose).  Find out who designed your favorite sites and seek out their other work.  Don’t steal their designs - but pay attention to the fonts, color schemes, and techniques they are using.  Pay attention to things outside the world of web design as well; posters, menus, art, even graffiti on the street can be great sources of inspiration when your stuck.

Last but not least…

Go the extra mile! Experiment with new techniques and try things that would normally fall outside your comfort zone.  Be available to your clients - this doesn’t mean you have to answer when they call you at 3am (unless your up anyway of course) but being approachable will make the relationship more successful.  While you’re at it back up their site for them, clients will love you if you’re able to give them back lost material if/when something goes wrong.  In short, do everything in your power to continue to grow as a designer and foster great relationships with clients - their recommendations are often the most direct route to your next project!

Any other bits of advice you’ve heard over the years that were particularly helpful?  Let us know!

November 10th, 2008

10 Most Valuable Logo Design Resources

Here they are - the ten most valuable resources for logo design on the Internet…

Logo Design Articles

What Makes a Great Logo - Four principles that constitute a great logo design.

Ten Tips to Logo Design - 10 tips on creating a professional company logo.

The Philosophy of Logo Design - Thoughts on how best to approach the design of company logo.

Logo Design Trends - Eleven of the latest trends in logo design.


Logo Design Examples

LogoPond - Huge gallery of logos. Perfect if you need some inspiration

Collection of Hundreds of Web 2.0 Logos - Over 400 Web 2.0 logos in one image. If you need logo design inspiration, look no further.

Free Logo Designs - Collection of free logos in case money is tight.


Logo Design Tutorials

Web 2.0 Logo Design Tutorial - Tutorial on making a Web 2.0 style logo.

50 Logo Design Tutorials - Collection of various tutorials showing all the steps taken to design a certain logo.

Using Letters to Design a Logo - PDF that shows how you can design a logo with letters.

August 25th, 2008

The Good, the Bad and the Ugly of Brands on Twitter


Most people use various apps to interact with Twitter, but there are still those that visit the profile pages. Now, admittedly, Twitter doesn’t offer a lot in the way of design on a profile page, but for companies using Twitter their profile page represents their brand. Some do it well, while others aren’t quite there leading us to the good, the bad and the ugly of brands’ Twitter profiles…

The Good

Marvel - Spidey, Iron Man and it looks cool. A+


Quicken Loans - A modern, fun design that fits in perfect with Twitter.


Revision 3 - A clearly well-thought out design as it integrates well with the Twitter interface and looks great.


Firefox - Looks great, easy to read and easy to use.


M & Ms - Ms. Green dishes out the latest M&Ms news.

A Few Others
JetBlue - Not the greatest since I had no idea what the HJ meant, but its still a lot better than most.
Detroit Pistons - Not a company, but its our home town team and dang it looks so good.
MC Hammer - Please Hammer Don’t Tweet ‘Em. Ok also not a company, but we couldn’t resist plus the profile page looks good.
FastCompany - A great example of how easy it can be to brand your Twitter design. All companies listed below, give Fast Company a peek…

The Bad

Companies who for some reason chose not to put in all 15-30 minutes of the time it would take to customize their Twitter page a bit more than just adding a logo. This list could be huge, here’s just a few of the names that we’re surprised chose to be so plain…

Web 2.0 - A web 2.0 company should be sharp enough to brand their involvement on another 2.0 site.
Pandora
Digg
Technorati
SixApart
LinkedIn

Consumer Brands
British Airways - Plain and only 4 tweets in 5 months?
Wine Enthusiast - Pleeeease change that profile logo.
Blackberry - Could use a new (not blurry) profile logo.

Media
Wall Street Journal - White on white, plus a pixelated logo. Come on WSJ…
The Onion -Witty enough people to do something smart with their Twitter account.
Fox News - Their Twitter profile might be the only thing that Fox tones down.

A Few Others
NASA - Just put a nice hi-res picture of outer space on there…instant improvement.
Monster - At a minimum, change the color scheme.
NPR - Same as Monster.

Note to all “bad” profiles: A plain Twitter page is much, much better than an ugly one… (see examples below)

The Ugly

HP - Wait…so you chose the standard HP wallpaper delivered on all of your PCs, made it smaller and then thought that would be a good background on Twitter?


Travel Channel - A stock map tiled as the background? Off all the hi-res images available to the Travel Channel, they picked this?


Popeye’s Chicken - First of all, I can’t believe Popeye’s is on Twitter, secondly I can’t believe that they like the way this looks.


BBC - Not certain, but the background image looks like a screen grab from a BBC TV show. Adding insult to injury, the image is even tiled poorly.


American Cancer Society - Great cause, bad Twitter profile. Logos all over the place and a black on blue sidebar?


Luxor Hotel - Not the worst out there, the logo looks ok but the pic is pretty low-res and completely hidden by the updates. Also, what’s up with the random bikini girl profile logo?


Forrester Research - That crappy looking background image might be really interesting, but we can’t see it without Right-Click, View Background so it might be time to scrap it and clean the page up.


SouthWest Airlines - Not horrible but the background image is gigantic…as in, unless you’ve got a freakishly high resolution you never even see the Southwest plane in the bottom right corner.


Carnival Cruises - Same problem as SouthWest, the picture is too big and speaking of the picture where’s the cruise ship? A couple walking on the beach with a sailboat in the background doesn’t exactly scream (or even whisper) cruise.

A Few Others

Zappos - They use Twitter well, but the design of the page is just weird.
Blip.tv - Weird blurry background of something.
San Diego Chargers - If their team is run anything like their Twitter account is designed then its gonna be a tough year.


Know of any other companies that should fit in the Good, Bad and Ugly? Let us know in the comments.

Special thanks to FluentSimplicity for making finding companies using Twitter a bit easier.

August 13th, 2008

11 Signs That its Time for a Website Redesign

There are ALOT of sites out there that, well to put it nicely just aren’t very good. We’ve all gotten a good laugh when we come across a truly horrific design…but what if that site was yours or your business’? Not so funny now. The ever increasing quantities of websites, plus our rapidly decreasing attention spans, make good web design more important than ever.

As a public service, here are a few signs that you might want to think about a redesign:

#11.
Your Site Makes No Attempt at Engaging a Visitor

Your site is a wall-flower. One-way information flow is old and tired. With all the social networking and bookmarking sites (Digg, Stumble Upon, and Facebook just to name a few) people are connecting in new ways every day. These users will become frustrated if they can’t interact with your site. Blogging is a great way to make your site feel more social and up-to-date, as long as the blog is relevant. An added bonus is that the consistent new content will attract a crowd of “regulars” and makes your site more appealing to the search engines. At the very, very least make sure your email is easy to find. Remember, if people like you they’ll tell their friends.

Exemptions: Some sites intentionally designed to be informational (and informational only) may get a pass on this, but there’s really no excuse for not engaging a site visitor.

#10.
Your Homepage Makes People Shudder

You’ve got a cluttered first page. Too many graphics, links every other line, ads on every side, not to mention all your text, etc. Its enough to make the casual viewer’s head hurt! For example, I stumbled across this page and my stress level shot up instantly. The most up to date advice is to keep it simple.

Exemptions: No one. There’s no excuse for a homepage that leaves people not wanting more.

#9.
Your Site Makes Any Sort of Noise

Music, unless it is very relevant to your site content (i.e. you are a record label’s website) its probably a better idea to leave it off. Keep in mind where people may be when they come across your site…at work, school, in a library, etc. - all places where a loud burst of music may be less than welcome. Another factor to keep in mind is that not everyone may share your obviously superb taste in music (shocking I know). If, after you put some serious thought into it, you still decide to have a musical background please PLEASE design it so I will be able to turn it off.

Exemptions: Obviously, any music or video websites and also the very, very few websites that tactfully use sound on the site.

#8.
Your Site Has Content No One Can Read

No one can read your copy. Having too many colors on the page or choosing bad color palettes/backgrounds can lead to a site that is very hard for a user to read. The same goes for using really tiny text or a hundred different fonts. Anyone can get carried away during the design process, but let’s remember that first and foremost your website must be readable. If people can’t read the information you want to give them your website is essentially useless - no matter how pretty you think it is.

Exemptions: No excuse for tiny text or anything hard to read.

#7.
Your Site Involves the Use of a Horizontal Scroll Bar

The site has horizontal scrolling. We’re all used to scrolling up and down, making us scroll sideways is awkward and annoying. Please don’t do it, nobody likes awkwardness.

Exemptions: Blue Vertigo who has a resource list in the same vein as our Dashboard gets an exemption cuz their list is so useful, but it would be equally useful vertically. No one else gets a pass on this one though.

#6.
Your Site is Ugl-IE

Your site works and looks great in Firefox but is a train wreck in Explorer. Make sure your design works well with all browsers, you don’t want to lose people before you even get started.

Exemptions: None and its time to fire your previous web designer.

#5.
Your Site Leads People To Nothing

There is no focal point to speak of. Check out this site - sure our eyes flock to the red circle in the middle but after that its a free for all. It’s important to know how people’s eyes read a page and factor that into the design. You can influence how people view your site by creating a flow that is ordered and makes sense.

Exemptions: None, unless your going for that complete chaos look.

#4.
Your Site is Either All Text or Has No Text

Your site is all text, or for that matter your site has basically no text. Designing a successful web site is walking a fine line in this respect. Too much text looks busy, and people simply won’t read all the way through it. On the other hand a site with all pictures is confusing and hard to navigate, not to mention that having no text makes it much harder for the search engines to index/find your pages. For example, I dare you to try and find your way around the bow-wow books website

Exemptions: Craigslist (all text at its finest).

#3.
Your Site Opens with a Ridiculously Long Flash Intro

You have a ridiculously long flash intro. In theory its a great idea - visually appealing, fun to watch unfold, unique - but in reality it can go very wrong. These designs are now commonplace and people won’t sit through long intros, especially without a skip button. Granted, some flash intros can be very cool, but a common opinion among the best designers is that the intros are just another obstacle for potential visitors to overcome. Deciding to put in a skip button itself can be a catch-22, you allow the visitor to get right to your site but you are also effectively saying ‘my intro isn’t important why don’t you skip it’. In that case why do you have an intro in the first place? Its a debated issue and it basically comes down to personal taste. A flash intro is not an inherently bad design technique, but when abused it can hurt you. A general rule of thumb is any more than a few seconds and you start losing people. Here is an example for you - its obviously not meant to be a legitimate intro but you get the point.

Exemptions: Any site purposely trying to drive visitors away…so no exemptions here.

#2.
Your Site Induces Seizures

The website has text that blinks/scrolls too fast/flashes neon colors at you or contains any other activity likely to cause a seizure. Along these same lines continuous animation is also a no-no. Take a look at this site, the spinning globe animation and flashing text not only look bad but also make the design very dated, circa 1995. Too much movement on a website is like the little kid inside the store screaming ‘Look at me!’, its bound to get some attention - almost none of it positive. You have to go to this website to get the full effect, trust me (and what’s with the random cat running backwards at the bottom).

Exemptions: The band M.I.A. who’s user base loves flashing colors.

#1.
Your Site’s Navigation Confuses Users

The absolute #1 sign it is time for a new web design is if your site has unclear navigation. How users get from one page to another on a site should be obvious. Make sure you have some sort of menu on every page - people get frustrated when they have to hit the back button a thousand times. But be careful, let them hit the back button if they want to, there is nothing more annoying than getting redirected to the page you are on when all you want is the page you just left.

Exemptions: No excuses for a website that can’t be navigated by an everyday user. (more…)

SEARCH BLOG
ABOUT AGENCYTOOL At its core, AgencyTool exists to serve as a resource for creative agencies, whether they be into web design, print, advertising or anything else. Here on the AgencyTool Blog you'll find a mish-mosh of resources and thoughts that we think are worth sharing.

Feel free to comment on a post or drop us a note if you've got something to say. We love comments, so we don't use nofollow, but we do moderate - you've been warned!
ARCHIVES
SUBSCRIBESubscribe
 

 

How is AgencyTool.com different from other web directories?

  Quality Listings. We're selective. We take the time to individually review each submission, so you know the companies listed with us are legitimate and of the highest quality. If you list with us, you know your brand will be associated with the Nation's Premiere Creative Agency Directory. Always above the board, and always there for you... Get Listed Now!