Top 10 Graphic Design Mistakes - Part 4
1-10 of 34
Top 10 Graphic Design Mistakes Part 4 By Marlon Sanders www.designdashboard.com
911: Quick Fixes... Mistake #3: Using more than 4 colors on your site. Quick Fix #3: Plan out a new color scheme. Example: Use red for your headline(s), dark blue for your sub headline(s), yellow for highlighting, black text and a white background. Use red bold fonts here and there on your page for important things, like drawing attention to your guarantee or bonuses. Use light grey or the SAME yellow you used for the highlighting to add some focus to your tables. www.designdashboard.com
911: Quick Fixes... Mistake #4: Using more than four different types of fonts on the same page. Quick Fix #4: Plan out a new font scheme. It’s good to use a nice bold font for your headline, such as Tahoma size 16 points or 24 pixels in BOLD. Then use Verdana size 10 points or 12 pixels for the body text. For sub headlines you can use Arial Bold, Size 14 points or 22 pixels. www.designdashboard.com
911: Quick Fixes... Mistake #5: Displaying your sales “message” on a dark colored background! Quick Fix #5: If your sales letter is anything but black text on a white background then it’s too hard for anyone to read it. So keep it simple. Black text on a white page background. How to format the layout of your features and benefits without creating hard those messy and hard to control bulleted lists: www.designdashboard.com
911: Quick Fixes... If you want to jazz it up a bit, dry putting a graphic bullet before each benefit or feature, like this: This is an example of using a graphical bullet. If you don’t have any graphical bullets then at least use this type. Just hold the ALT key down and type 0149 on your keyboard number pad to create them www.designdashboard.com
911: Quick Fixes... Mistake #6: Using “annoying” javascript codes on a business site that do “neat” or “cool things” (I ended up listing this as one of the mistakes but didn’t get a chance to do a review of any site that was breaking this rule.) How to make sure you’re not driving your visitors to distraction: www.designdashboard.com
911: Quick Fixes... What I’m talking about here are those annoying Javascript codes that people often add to their web pages just because they think it looks “cute” or “neat” or “just because they can”. www.designdashboard.com
911: Quick Fixes... Example: The “CURSOR TRAIL EFFECT” Using one on a personal home page is fine. But this type of thing should never appear on a business site. Ever. The biggest problem I have with the cursor trail effect (and every other variation of this sript) is that the end user cannot choose to turn it off. www.designdashboard.com
911: Quick Fixes... Last week I was on Ebay looking at an auction and the Ebay seller had one of these scripts following me around the page EVERYWHERE. It was so annoying to constantly see this swirly twirly thing following my every move around the page that I ended up leaving without even bidding. www.designdashboard.com
911: Quick Fixes... Quick Fix #6: First, take a look at your web page in Internet Explorer and ask yourself, is there anything on my web site that could potentially annoy someone? • Is there looping background music with NO way to turn it off? Or looping music at all? • Are you using ANY variation of the cursor trail effect,or any script that serves absolutely no purpose? www.designdashboard.com
911: Quick Fixes... If so, right click on your page to VIEW the SOURCE CODE and immediately strip the javascript off the page. Also check the <body> tag for extra code like “onload” tags and remove any that are relevant to the scripts you’ve just removed. www.designdashboard.com
911: Quick Fixes... Mistake #7: Cramming way too much content into too small of a space. (Not enough white space.) Quick Fix #7: If you’ve got a lot of content to display on one web page think about creating a “portal” design, similar to the way CNN lays out their content. www.designdashboard.com
911: Quick Fixes... Mistake #7: Cramming way too much content into too small of a space. (Not enough white space.) www.designdashboard.com Quick Fix #7: If you’ve got a lot of content to display on one web page think about creating a “portal” design, similar to the way CNN lays out their content.
911: Quick Fixes... That way you can separate the contents and still have an adequate amount of white space on the page. If you go to www.milcers.com/articles you’ll see how I’ve taken more than 20 different articles and photos and organized them into a page that’s easy to read, nicely laid out and contains plenty of white space. How to balance out heavy graphics or text box content so you don’t end up with the teeter-totter effect: www.designdashboard.com
911: Quick Fixes... The screen capture on the next page shows you how you can organize content for large sites into different text boxes. Of course that example uses plain old text boxes, but you can use any sort of graphic design you want. As long as your content boxes aren’t too close together you can get away with putting a LOT of content into a small area. www.designdashboard.com
911: Quick Fixes... The one thing you want to be careful about is how the page looks after you’re done. If you don’t plan out the page in advance you can end up with a lopsided page effect. (See the screen capture on the previous page for evidence of this.) This PARTIAL screen capture shows you the Milcers Article page that I set up with over 20 different “content boxes” on one page. It’s got a non cluttered look. www.designdashboard.com
911: Quick Fixes... www.designdashboard.com Mistake #8: Using “busy” or “watermarked” background patterns. Why you never want to use a patterned background behind your sales letter text and why it’s not okay to use heavily watermarked images on your page. While there’s nothing really wrong with a NICELY watermarked background image, I too often see ones that don’t tile correctly, are too visible or have images that are just too large.
911: Quick Fixes... www.designdashboard.com Here’s an example of a page with a pretty decent watermark on it.
911: Quick Fixes... www.designdashboard.com Mistake #9: Specifying fonts that are TOO SMALL or too light in color to easily read! There’s nothing more frustrating than visiting a web site (or blog) and not being able to read the information there because the fonts are too small. Here’s an example of the DEFAULT view of the average web page fonts, set to a decent size that pretty much anyone can read:
911: Quick Fixes... www.designdashboard.com Now take a look at this screen capture. It shows the font size using the same DEFAULT view, only they’ve specified a font that’s simply too small so even the default view doesn’t work. Everytime I want to read that page (it’s actually a blogso I read it daily) I have to go to the top of my browser, click VIEW > TEXT SIZE > MEDIUM
911: Quick Fixes... www.designdashboard.com Quick Fix #9: If you’ve used a font color that’s too light OR a font size that’s too small and you need to replace it, here’s a quick trick to getting it done: Step #1: Open up Dreamweaver. Step #2: Open your web page. Step #3: At the top of the program click on EDIT. Step #4: Then choose FIND/REPLACE. Step #5: In the “find” section, choose SOURCE CODE.
911: Quick Fixes... www.designdashboard.com Step #6: Now enter in the RGB code for the font color you’ve used (the one you want to change) then enter in the RGB color you want to change it to. Step #7: Then enter the font color you want to use from here on. Click the submit button to do a GLOBAL find/replace on the font color that’s too light.
911: Quick Fixes... www.designdashboard.com Dreamweaver will find all instances of that color used on your page and will swap one code for another. Then just save the page and it’ll automatically update all the font colors. You can do the same thing with the SIZE of your fonts. If you’re using actual font sizes, not CSS, then you’ll end up with font tags that look like this: <font face=”Verdana, Tahoma, Arial” Size=”-2”>
911: Quick Fixes... www.designdashboard.com Size “-2” is too small, so you need to do a global find/replace on that and change it to size “-1”. Just follow the steps above, but change the text to: <font face=”Verdana, Tahoma, Arial” Size=”-1”> The program will automatically change all the font sizes for the body text.
911: Quick Fixes... www.designdashboard.com If you’re wondering why you don’t just highlight all the text on your page and change it that way, the problem with that is, you’ll end up changing the font size for everything on the page. Including headlines and subheadlines which are usually different sizes than your body text. To change only one specific tag from one size to the next it’s easiest to do a global FIND/REPLACE.
911: Quick Fixes... www.designdashboard.com Did you know you can make these types of changes on MULTIPLE documents at once in Dreamweaver? If your website has 200 pages and all of them need to be changed, you don’t do 1 at a time. When you’re setting up the FIND/REPLACE options you tell the software to look at ALL pages in a predefined folder, versus the active page that’s open.
911: Quick Fixes... www.designdashboard.com Here’s what the settings look like: Essentially what you’re going to be doing is telling the software not to edit just one page. You choose FIND IN: FOLDER and it’ll make the changes to ALL the pages in the folder at one time. CAUTION: When you make global changes like this, be careful. Unless the document is active and open in Dreamweaver, you won’t be able to “undo” the changes you’ve made.
911: Quick Fixes... www.designdashboard.com Mistake #10: Not clearly identifying what it is you’re selling from your web site! How to “double check” your web page headline to make sure it passes the test -- or run the risk of your visitors passing right by it... sight unseen: This is a problem I’ve seen on a few websites. You land on the web page, browse around for awhile and just can’t figure out what the site’s all about.
911: Quick Fixes... www.designdashboard.com If the visitor has to struggle to figure out what you’re selling then your HEADLINE isn’t doing it’s job. The best thing you can do is CLEARLY IDENTIFY your offer by including it in the HEADLINE. Example: http://www.pushbuttonletters.com “Just fill in the blanks, click a button and out pops a killer sales letter!”
911: Quick Fixes... www.designdashboard.com Example: http://www.gimmesecrets.com “How to create products fast and roll them out successfully via simple 2-page web sites practically anyone can create.” Quick Fix #10: Write down exactly what your product is, or does in 10 words or less. Then incorporate that into the headline on your page.
911: Quick Fixes... www.designdashboard.com Read the headline back to yourself, or ask someone to read it for you (try an online forum so you can ask someone you’ve never met before what their honest opinion is) and then get them to tell you what they think you’re selling. I know it sounds extremely simple, but it’s often the simple stuff that trips you up.
911: Quick Fixes... www.designdashboard.com For example: Let’s say you sell back up hard drives that people use to store data. They use them in case of emergencies or system crashes. Or they use them to transfer their files from one computer to another. All their critical data is held on the back up hard drive. Here’s the sample headline to illustrate the problem with NOT clearly identifying your offer:
911: Quick Fixes... www.designdashboard.com “At XYZ Computers we’ll make sure you never lose another file” So read that headline and you’d think... what? Would you actually know the company is selling back up hard drives? Of course not. What it sounds like to me is that they’re selling a software program like Google’s Desktop search, that you can use to find any file on your computer in just a few seconds. Or some other organizational software program.
911: Quick Fixes... www.designdashboard.com So run your headline past a few people that don’t know you or your company and ask them to give YOU feedback on exactly what they think you’re selling. One last thing: If your headline contains the words “Welcome To....” then you need to change it immediately. You can welcome your visitors elsewhere on the page. Or in your “about us” page contents.
911: Quick Fixes... www.designdashboard.com The first thing on your page MUST be a headline. And it must be one that clearly identifies what you do, or what you sell. If you’re in a pinch, use what I call a “How To” headline. The formula for writing a “how to” headline is simple: How to get X benefit or How to avoid X problem
911: Quick Fixes... www.designdashboard.com Make certain your benefit statement is specific. For example: “How to save money on your phone bill every single week.” But go one step further than that whenever possible, because just saying “how to save money on your phone bill” isn’t as powerful as something like this:
911: Quick Fixes... www.designdashboard.com Make certain your benefit statement is specific. For example: “How to save money on your phone bill every single week.” But go one step further than that whenever possible, because just saying “how to save money on your phone bill” isn’t as powerful as something like this: “How to save $39 a week on your phone bill just by dialing a few extra digits.”
Marlon Sanders’ Design Dashboard Copyright © 2010 by Higher Response Marketing Inc. For your web design needs. www.designdashboard.com and For more free web design tips, go to www.designdashboard.com/blog
by marlonsand2 | Added: 2 years ago
Language: English | Topic: Internet
| 2 Views | 21 Downloads | 1 Embeds |
Summary: How to Avoid the Top 10 Graphic Design Mistakes in Landing Pages, Mini Sites, Affiliate Pre-Sell Pages and Sales Pages
| URL: |
No comments posted yet
Comments