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

Archive for the ‘Web Design’ Category

January 14th, 2009

Web Design in Black & White

Black & White doesn’t have to be boring.  Monochromatic color schemes can be used with just about any color, but some of the most striking are in black & white.  By cutting out color a website relies more heavily on other design elements – such as layout or typography, etc..

So here’s your daily dose of inspiration…30 extremely well-done Black & White websites…

DepthCore

80/20

arsnova Design

Atomised

Authentic Boredom

Back To Help

Brancozero

CRW

ArtWorking

Designing The News

DSGN+DVLP

Expression Tints

Hell-Cat Records

Imagine Boris

Jon Tan

Launch

Mark Wieman

Mojave

Mirificam Press

PostMachina

Rikcat Industries

RedChilli

Romsound

Subtraction

Svenigson

The DECK

XQS

The Old Fashioned

VBG

West Surfing

If you need more convincing check out this post by Youri on Designfeedr: Lose the color! 9 reasons to ditch color

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.

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 5th, 2008

Great Brands with Bland, Boring, or Just Plain Bad Websites

There are a few brands, the crème de la crème, that consistently show up on various “Top 100″ type lists.  You know which ones I’m talking about.  They’re household names and for the most part come out on top because they’ve met and exceeded the expectations of reviewers/consumers/whoever.  They’ve got the best of everything (insert famous ad tagline here) and they’re usually not hurting too badly financially.  So when I stumbledupon the latest “Top 100 Brands” list here I took a look at some of the companies’ websites guessing I was in for an overdose of inspiration…

I was wrong.  A few were great, most were fine, and some were pretty bad.  The bad ones are here…enjoy!

Duracell

For a site with upwards of 80,000 visitors per month its amazing how dated Duracell is, and the slow-to-load, amateur-ish flash intro doesn’t help.

UPS

Yes, its bad – but I was going to let this one slide because it was UPS.  That was until I checked out compete.com and found out they average over 12 million visits per month! I am truly speechless.

FedEx

Better than UPS…but not by much.

Colgate

AH my eyes!! Bad color choice and much too cluttered.

Ferrari

Cars this cool deserve a better website…’nuff said.

BMW

Granted it gets better as you delve into the site – but you don’t want this to be the first thing people see. Boring.

Merrill Lynch

I know its ‘professional’, and that a website probably isn’t a high priority for them right now…but come on, this looks like they haven’t upgraded since 1998.

McDonald’s

I’m not lovin’ it. The black background could look cool, but they have so little content on the page it ends up being overwhelming.  The navigation is hard to use as well.  They made it super interactive, problem is that when you move your mouse inadvertently what you were reading can disappear.

Nestlé

Where’s the yummy food?  Seriously…not one chocolate chip? I realize they are a huge company, but it seems like they’re taking themselves a bit too seriously with this extremely corporate-feeling site.

BP

With second quarter earnings this year of $4.98 billion you’d think they’d be willing to drop the $5K or so it would take to make their site modern and maybe a bit better looking.

Avon

Avon’s business is looking pretty…they should know better.

Accenture

The biggest/best consulting firm around and this is all they’ve got? Tired design with hardly any navigation to speak of doesn’t convey the image they’re probably going for.

Marriott

Some useful features, but the site doesn’t have a very welcoming feel – why would I want to stay here? I think not having any pictures at all is a lost opportunity for any site trying to sell accommodations.

Canon

Know any other great brands whose websites don’t quite live up to your expectations?  Let us know in the comments!

October 20th, 2008

Brewery Websites: Creative Design with Beer in Mind

21 of the most well designed brewery and micro-brewery websites we’ve come across…getting thirsty yet?

Rolling Rock

Bell’s

Bridgeport

Left Hand Brewing Co.

Red Hook

Blue Tongue Brewery

Half Moon Bay Brewing Co.

Leinenkugel’s

Pilsner-Urquell

Stella Artois

Landshark Lager

Samuel Adams

Long Trail Brewing Co.

Malt Shovel Brewery

New Belgium

Guinness

Sierra Nevada

Widmer Brothers Brewing Co.

Budweiser

French Broad Brewing Co.

De Dolle Brouwers

October 15th, 2008

McCain vs. Obama – Website Wars

With the last debate scheduled for tonight, and with the nation counting down the days till Nov. 4th – AgencyTool has decided to review each candidates’ website, putting all political biases and issues aside, and declare a winner!  We’ll be evaluating the candidates’ respective websites on 4 major features…

Feature #1 – Landing Pages

Both campaigns feature their slogan of choice and cliche graphic of the ticket name prominently.  Obama’s landing page has a simple design with a single family portrait style image.  There’s an option to sign-up with your email address, but it’s pretty easy to get straight to the main homepage via the skip button.  McCain’s landing page has much more content, featuring several videos set to play on repeat and four different options on how to get involved with the campaign.  And the winner is…

Obama                               McCain

We’re going with McCain on this one.  Each landing page is equally easy to navigate through, but McCain’s offers more in the way of information and opportunity to get involved.

Feature #2 – Home Pages

Both sites have focused on recruiting for volunteer efforts in the area above the fold, have news and events sections below the fold, and have similar top navigation.  They also both feature video feeds prominently, although the content differs.  McCain has one video per day, while Obama has several different videos available.

Obama’s site has a cleaner look and still manages to display more total content.  It feels more Web 2.0-ish (we realize this is not a technical term) with interactive maps, blog feed, and social media options directly on the homepage.  McCain had a feature we got excited about – a choose your position bar (choices were supporter, undecided, or unregistered voter).  However, after testing it out by having several different people pick different options we were disappointed to find out that the site doesn’t change at all in response to your selected viewpoint.  Round 2 goes to…

Obama                             McCain

While the pages were more similar than not, Obama’s more up-to-date look and extra content gives him the advantage.  Not to mention that McCain gets downgraded for having a potentially great tool that doesn’t work, or is just there to record IP addresses.  On a sidenote: Google awards a PR8 to both candidate’s sites, and according to this post from ZB Blog Obama’s site pulls in much more traffic.

Feature #3 – Use of Blogging/Social Media

Again, more similarities here than differences.  Each site has a blog with RSS feed, and does a great job of getting different types of content included – both make use of video, news articles, and candidate activity update type posts.  Interestingly, both blogs steer away from commentary on the issues.  On a positive (somewhat surprising) note, the comments section of both blogs doesn’t seem to be too heavily moderated.  There are negative comments on each candidates blog – props go to both camps for not censoring the public.

As far as social media goes, McCain has the basics – links to MySpace, Facebook, and YouTube.  Obama on the other hand, covers a wider range with a total of 16 social media options, those on McCain’s site plus twitter, flickr, linkedin and more.  Obama’s site includes these links on the sidebar of every single page on the site, while McCain’s are on one page only.  McCain has another interesting feature here – awarding points to users based on recruiting friends, posting pro-McCain comments on blogs, attending events, etc.

Obama                             McCain

Though its close, we give the edge to Obama.  We’re excited that both camps have recognized the importance of social media and are actively engaging with it, but Obama’s site makes it easier to use and has a fresher looking blog with a greater variety of content.

Feature #4 – Issues Page/Store/Targets

This last section is a sort of catch-all for the rest of the aspects of the two websites.  Each candidate’s site does a great job with their respective ‘Issues’ pages.  Both are organized into clear categories (i.e. Education, Economy, Homeland Security) and the information given is – for the most part – a clear and concise summary of the candidates position and plan of action.  Indeed the official websites are one of the few places you’ll get a straight answer from either campaign.  It was also nice to see that both sites had links on how to register to vote, and an “En Espanol” button that made the websites visible in Spanish.

In true E-Commerce spirit, both sites also had online campaign stores.  They had similar products available at similar prices, and the only real difference was that McCain’s store was operated independently.  Proceeds from the McCain store “do not benefit McCain-Palin 2008 and should not be considered campaign contributions” where as Obama’s campaign gets 100% of their store’s proceeds.

A final component of the candidate’s we’re taking a look at is the targeted information areas (for lack of a better term).  McCain calls his “Coalitions” and they include Americans of Faith, Arab Americans for McCain, Bikers for McCain, etc.  Obama calls this section “People” and the topics include People of Faith, Students, Small Business, etc.  We took this a different approach to the same thing and each did a good job of pulling group-appropriate content together.

Obama                           McCain

Yeah, this one’s an even draw.  Without getting into specific political issues and looking at these features from a strictly design/content perspective each of the candidates’ sites is exemplary…Job well done!

Final Score:

Obama’s Site: 3

McCain’s Site: 2

While it wasn’t a landslide, Obama’s site is the clear winner based on our criteria.  Think we missed an important feature of either candidate’s site?  Don’t agree with the results?  Leave a comment and let us know.

September 30th, 2008

Review my site…please? Best Places for a Free Website Review

There are companies out there who will gladly bring a critical eye and professionally review your website…for a fee. A few design agencies price this service upwards of $1500 but some as low as $250, and you generally get what you pay for. Many give you a written report, an SEO suggestion and some sort of follow up meeting with them. Great if you’ve got the means, but not exactly within the budget of an amateur web designer or someone looking to get started. Let’s assume you’re looking for some honest feedback or advice. Where do you go?

Option #1 Forums

The first answer shouted out by the google search “review my website” is a forum. Proceed with caution my friends. Unless you are already an established member of said forum, your innocent request for guidance may be interpreted by other members as “spammy”. Don’t get me wrong, forums can be a great (did I mention 100% free) place to get a wide range of opinions and tips for your site. But only as long as you play by the rules, and even then some forums are more welcoming than others. Follow some general rules and you should be OK:

  1. Take a second and read the forum rules/guidelines. They may have a minimum number of posts needed before you get access to certain areas or would be able to post a link to your site for review purposes.
  2. If there is a minimum post requirement don’t DON’T cruise around the forum for 10 minutes and leave 15 random posts in your wake. If you establish yourself as a legitimate member first people will be more likely to take an honest look at your site when you do post it. This may take a few days or even a few weeks, look for threads where you can contribute something valuable, or bring a different perspective to the discussion.
  3. Post your site for review once and only once, and make sure its in the appropriate category.

Some forums are more likely to constructively review your site than others. The ones listed here are good to try, but beware the ’spam’ label…it will get you booted at them all.

Young Entrepreneur Forum Webmasterworld.com Forum
Site Owner’s Forum SEO Refugee Forum
Digital Point Forum

Option #2 Gallery Sites

Another completely free option is submitting to a few of the countless gallery sites out there. There are literally hundreds that take submissions. You may not get a plethora of constructive feedback from this method, but people leave comments here and there and getting selected is a good indicator that your site is on the right track.

DesignShack CSS Vault Style Gala
CSScilp The Daily Slurp Web Design File
CSS Import CSS Reboot

Option #3 Cozy Up to a Blogger

Reach out to a blogger for a review. It can be mutually beneficial, you get a trained eye to critique your site, and the blogger gets a great post out of it. When you are looking for a blogger to send your review request to make sure you actually read through a few of their more recent posts to make sure the relationship will be a good fit. You’ll get a feel for what kind of topics pique their interest and their opinions on issues, you don’t want to send a website about great leather and fur products to an animal rights blogger, for example.

Do your research first, then send out an email to the individual blogger you’d like to review your site – an email sent out to thousands of bloggers is too general to be taken seriously by any of them. Your email should do a few basic things: Introduce yourself and explain your website, show some respect by detailing why exactly a review of your site might turn into a good post for their specific audience, and give them all the information they could possible want or need about your website. If you don’t hear back its fine to send a follow up email – but only one! If you do hear back make sure to keep in contact with the blogger throughout the review and afterwards. A blogger may gear his review to appeal to the audience, so ask him for private feedback as well…you may learn more. Last but not least, don’t get mad if the review isn’t great. When you get a blog review its public and there’s an inherent risk that you could get some bad publicity out of the deal. You’ll make it worse by getting angry or lashing out in retaliation, so take the hit and ask the blogger how you could have done better.

Several bloggers have really embraced this method. Jackie Baker has started Site Clinic, a weekly column-style blog that takes submissions and chooses one each week to write an in-depth review on.

Option #4 Do it Yourself

So what if you’re not an expert, there are plenty of tools out there to test the quality of your website for you. Here are a few good ones:

  • The Trifecta Tool Set – measures the overall strength of your site number of links, number of times your brand is mentioned on the web, and the amount of traffic your site receives
  • W3C Markup Validation – checks the validity of the code on your site
  • Website Grader – measures the marketing effectiveness of your site
  • SEO Scores – analysis of SEO tools/keywords

September 16th, 2008

The Evolution of Apple.com, 1997 to Today…

Note: Click the easel icon in the bottom right for Full Screen mode which makes it easier to see detail.

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 HammerPlease 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.

SEARCH BLOG
DreamTemplate - Web Templates     Host 6 Domains on 1 Account

Graphics.com/Learning    

Website 120x60 Logo    
ARCHIVES

SUBSCRIBESubscribe
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!
 

 

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!