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

Archive for the ‘Design Tips’ Category

February 24th, 2009

Creative and Fun Site Navigation

Navigation is one of the most important elements of a website design.  It provides your users with a road map and guide to your site and gives them a sense of direction.  Therefore, well-designed sites tend to have navigation menus and bars that are simple.  But as we’ve seen before simple doesn’t have to be boring.

The sites below have succeeded in creating nav menus that are creative and fun, while not confusing (and thus probably losing) their visitors.

Design Jobs on the Wall

Jobs on the Wall

Hug My Mac

hugs

Sarah Hyland

sarahhyland2

Simple Art

simpleart

Jilly10

jilly10

Kukral

kukral

Mint

mint

Waters Media

watersmedia

MB Dragan

mbdragan

Our Memory Of

Our memory of

Tasty Planner

tastyplanner

Apple

apple

February 16th, 2009

Designer’s Block – Tips for getting out of a Slump

Some days you kick out great work like it’s nobody’s business.  Some days you can do nothing right and feel like you’ll never design anything worthwhile ever again.  Everyone has been there, and its incredibly frustrating – especially when your deadline is looming. So next time you’re wrestling with a bout of Designer’s Block, try a few of these tips and strategies that AgencyTool gathered from a few fellow sufferers.

1. Sketch it Out
Go old-school and pull out a pencil and paper or whiteboard.  If you find yourself stuck do some brainstorming sketching first.  If you are completely stuck just doodling can help to get the creative juices flowing.  If you have a vague glimmer of a plan formed you can cross out, change, and put fresh ideas down faster than with any of the design programs out there.  This way if you suddenly don’t really like how the design is going it will take you all of 2 seconds to scratch it out and start again.  Voila, no “but I’ll lose all the progress I’ve made” dilemmas.

2. Just Let it Go
Say you make some type of kick-a** component, an awesome button, icon – whatever.  But this great piece of art just doesn’t fit into the design you’re currently working on.  You spent so much time and effort making your icon that you find yourself trying to change the entire design (and possibly getting stuck)  just so you can include it.  Words of advice from great designers…’Just let it go’.  Save your glorious button for another day and get your focus back.

Also under the ‘let it go’ category – don’t be afraid to step away from a design that’s just not working.  Let it go for a few hours/days then come back to it.  Then, if you’re still stuck, consider just letting it go altogether.  Instead of forcing something that isn’t quite right you’ll open up to ideas that might work better.

3. Switch it Up
Don’t use the same techniques over and over again.  When stuck, people have a tendency to fall back on tried and true components, resulting in a design that looks like everything else you’ve done before.  Force yourself to branch out and create something that looks different from your previous work.  Experiment with color, technique, layout or change locations by getting out of your office – just switching up your routine may be enough to get you out of the slump.

4. Take a Look at Galleries
There are a lot of gallery inspiration sites around, set aside an hour or so and just take a look through them.  Sometimes all you need is a kick in the pants.  Just be careful not to cross the line between being inspired by someone else’s work and stealing it.

5. Ask for Input
Ask people whose opinions you trust and who will be able to give you specific feedback and constructive criticism.  Steer clear of people who don’t have any design experience or tell you that ‘it just doesn’t feel right’, you’ll end up spending hours trying to figure out what’s wrong and how to fix something that may be perfectly good.  This can be a bit tricky – see the  SEOmoz blog on this topic: How to Ruin a Web Design

6. Relax
It’s cliche to use the batting average example but it does fit.  You’re not going to knock one out of the park every single time you sit down to complete a design.  It might be a good thing to lower your expectations just a bit – not everything you produce is going to be great.  Once you take the pressure off and realize that even the best designers run into this wall you’ll be over it in no time.

photo from icanhazcheezburger.com

February 10th, 2009

5 Common Mistakes Made When Designing a Website

There are some pretty bad websites out there.  In fact, there are sites dedicated solely to pointing them out (webpagesthatsuck.com).  Most of the ‘bad websites’ out there (excluding the truly horrific) are labeled so because they made a handful of very common mistakes during the design process.  These are some of those mistakes we see the most often.

Having design elements that look like ads – There is absolutely nothing wrong with having a reasonable amount of advertisements on your website.  However, you must realize that because of the sheer volume of advertisements on pages, most users have developed selective attention.  They’ll ignore everything that looks like a banner, pop-up or any other type of typical ad – so its not a good idea to have important design elements or information displayed in any of these formats.

Jamming 10 pounds of stuff into a 5 pound bag – Whether you go overboard on content or flashy design elements, cramming too much onto a site is a common mistake.  The result could be a busy layout, a wall of text, side scrolling, very little white space, etc.  Each of these things makes a website difficult to read and making your visitors work for information is never a good idea.

Having confusing and unclear navigation – Clear navigation is one of the most important factors for a site’s usability.  Users should have no questions about how they are supposed to move around the different areas of your site.  It’s a good idea to make your links change colors once a user clicks on them, knowing which pages they’ve already visited helps prevent users from unintentionally landing on pages they’ve seen before.  Also, your users shouldn’t have to jump through hoops to find the content they are looking for – make sure that every single page is within 3 or 4 clicks of your homepage.

Looking amateur-ish – Sure this is a bit vague, but there are certain features/missteps that web designers make that scream beginner.  For example, avoid saying “Welcome to ____” on your homepage.  There are other ways to make your visitors feel welcome.  Similarly, test to make sure your page looks good in all browsers instead of taking the shortcut “Best viewed in ____”.

Using overly wild or bright color schemes – Everyone loves creativity, and this doesn’t mean that you should shy away from using color in your design.  However, when colors are too bright or you use too many colors on the same page it can look unprofessional.  Also make sure that your background color and text color compliment each other, keeping your text easy to read and scan.

So next time your designing a site, take a minute to step back and review.  If you avoid these common errors you are probably safe from having your site end up on one of the many “Worst Website” lists.

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