The Silicon Underground
  Welcome to Dave Farquhar's Silicon Underground Sunday, November 22 2009 @ 07:46 PM CST  
Theme Changer
Change the look of the site by selecting a theme below:

What's New
STORIES
No new stories

COMMENTS last 48 hrs
  • Why don't wins co...

  • LINKS last 2 wks
    No recent new links

    Google Ads

    User Functions
    Username:

    Password:

    Don't have an account yet? Sign up as a New User

    Firefox


    Basic design principles   
    Wednesday, November 13 2002 @ 07:16 PM CST
    By David L. Farquhar

    Steve DeLassus asked me for some tips on design for a site he's building. Since that's fairly general-interest information, I figure I might as well make a post of it.

    The most important thing to remember is that there are basic rules of design that you can follow and be a good designer, even if you have zero ability. Great designers know where to break the rules. (And for the record, if I were a great designer, I'd be an art director for some magazine somewhere. I'm not.)

    Fonts. General rule: Serif fonts are easier to read on paper than sans-serif fonts. The opposite is usually true onscreen, which has lower resolution than paper. You can play it safe by specifying fonts like Verdana, Lucida, and Georgia, which are specially designed for screen displays.

    Use Lucida or Verdana if you want to look modern. Use Georgia if you want to look traditional.

    Specify Times as a secondary font for Georgia, and Helvetica and Arial as secondaries for Lucida or Verdana, but those fonts are so common that I'd avoid them for primary use. As an experiment in college, I stopped using Times and Arial on my papers and susbstituted other, less-common fonts. My grades improved. Being a little bit distinctive can help. I suspect Georgia and Verdana may one day become as common online as Times and Arial, but that day isn't here yet.

    Colors. Use a high-contrast scheme like black on white. People are used to light backgrounds and dark text, so be prepared for complaints if you use a dark background and light text, even if you believe (as I do) that dark backgrounds are easier on the eyes. People in their teens and 20s (and possibly early 30s) are likely to be more forgiving on this than people who are older.

    I've run into people who are militantly opposed to dark backgrounds. I've never run into anyone militantly opposed to light ones. So play it safe.

    Color schemes. Follow the rules of the color wheel unless you know better. And remember: Any color will look fine with black or white, and very nearly any color will look fine with some shade of gray. Limit funky color schemes to your navigation bar; keep your main body text close to the classic black and white.

    Keep in mind what you want to convey. A funky, hip site might mix orange and blue or orange and green. A more conservative site will drift towards blue and yellow.

    And a very safe choice: Black, white, and red. Anything you do with those three colors will look just fine.

    An easy way to play with color schemes is to visit this site.

    Backgrounds. The in thing seven years ago in Web design was to use a background pattern. Today that's generally a no-no, at least if you're overlaying text. Place your text against a solid color. Limit background usage to your margins. Busy backgrounds are distracting.

    Animation. I have animation turned off in all of my Web browsers. Animation is distracting. You can look very professional if you never use animated GIFs, Flash, or Javascript. It is extraordinarily difficult to use animated GIFs, Flash, and gratuitous Javascript and not look amateurish.

    Think about it for a minute: Our most basic instinct is survival. And out in the wild, movement could mean a couple of things. Something that moved might be lunch. Or something that moved might think you're lunch. So you naturally pay more attention to something that moves than to something that doesn't.

    On most professionally designed sites, the only thing that moves is the ads. There's a big reason for that.

    Existing media. If you have art you intend to use, make sure your site goes with it. Better yet, design your site around it. I designed this site around the montage of photos along the top. Steve had a family crest. It's an elegant, attractive design. Almost as attractive and elegant as my family crest. Steve's crest utilized a blue and a gray that seem to go really well together, so I suggested Steve use those colors as the principal colors in his site. The gray will be well-suited for the background of the text portion, so the natural place to use the blue is in his navigation bar.

    Rule breakage. The exception to virtually every rule here is your page title. When you blow text up really big, you can get away with almost anything. So if you're going to get daring, get daring on your page title. And even if you don't get daring, most fonts look terrific really big. So blow your page title up really big.

      [ Views: 2106 ]  


    Basic design principles | 4 comments | Create New Account
    The following comments are owned by whomever posted them. This site is not responsible for what they say.
    Jeremy Hendrickson
    Authored by: ImportedComment on Thursday, November 14 2002 @ 08:38 AM CST
    http://www.U2.com has an animated intro which is very slick. But seeing how the rest of us are not the media giants that U2 is, we should definitely avoid animations. The rest of their animations tend to be anoying once in their site. Eric Meyer's css edge site has serveral examples of using backgrounds behind text. http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html
    Both of these are good examples of when it is okay to break the rules, but only because the rule breaking is not annoying or distracting from the users experience.

    [ Reply to This ]

    Dave Farquhar
    Authored by: ImportedComment on Thursday, November 14 2002 @ 12:11 PM CST
    Note how Eric Meyer uses the image--it extends only about 12 characters into the text, and it's blended way into the background color. It's a very, very far cry from a GIF background in FrontPage.

    If you have Eric Meyer's skills, then by all means go for it and beautify your site. If your skills are limited to what FrontPage will let you do, you're a whole lot better off sticking to solid colors.

    As far as the U2 site, I can't visit it since I don't have Flash installed and don't want it installed. One-time Flash intros are slick, but that's exactly what they are. Slick. They don't really add value to the site. Other than a slick intro, does U2's site offer anything the typical fan-run U2 site doesn't? I last visited their site a year or two ago and if I remember right they had a few photos posted from the set where they shot their "Beautiful Day" video, and I think you could watch one of their music videos in one of the popular streaming media formats. But if you were after a band biography, interviews, and song listings, you'd have been much better off going to a fan site. So I don't know how many repeat visits they actually get. I doubt it's a lot.

    Thanks for the examples.

    [ Reply to This ]

    Mark Odell
    Authored by: ImportedComment on Thursday, November 14 2002 @ 08:19 PM CST
    useit.com: Jakob Nielsen's Website

    Philip and Alex's Guide to Web Publishing

    [ Reply to This ]

    Jeremy Hendrickson
    Authored by: ImportedComment on Friday, November 15 2002 @ 04:35 PM CST
    Yeah their site is broken w/ mozilla, you have to access it with ie, go figure. The do have complete song listings as well as lyrics, quite a few videos, and some images. Couldn't find a bio, but didn't look to hard. Probably will only visit, if I want to look up lyrics. BTW I am reading an interesting book about the spiritual journey of U2, it is Walk On by Steve Stockman.

    [ Reply to This ]

    What's Related
  • color wheel
  • this site
  • More by DaveF
  • More from Design

  • Story Options
  • Mail Story to a Friend
  • Printable Story Format


  • Calendar
    November 2009
    SuMoTuWeThFrSa
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    1
    2
    3
    4
    5
    Click on any day to see postings and events for that date.

    Referrals

    Top 10 by Comments
    Story TitleComments
    Cheap laptops from Sotec 253
    An untrustworthy vendor 164
    Upgrading an eMachine 125
    eMachine upgrade advice 99
    Why I dislike Microsoft 51
    Upgrade diary: Gateway G6-400 35
    And we're live 30
    The day after the Columbia 22
    How to pray 22
    CD-ROM troubleshooting under Windows 9x 20

    Top 10 Read
    Story TitleViews
    eMachine upgrade advice 74324
    Upgrading an eMachine 63075
    How to view a blg file in Windows 2000 50593
    Cheap laptops from Sotec 32792
    Upgrade diary: Compaq Presario 7360 19994
    Upgrade diary: Gateway G6-400 19866
    CD-ROM troubleshooting under Windows 9x 15545
    Finding an open-source alternative to Ghost 14288
    Big trouble 13810
    Salary cap? Baseball needs something 11796

    Topics
    Home
    Apache (2)
    Baseball (63)
    Book reviews (2)
    Business (1)
    Christianity (57)
    Cooking (1)
    Copyright (16)
    Curmudgeonry (1)
    Design (7)
    DOS (6)
    Games (4)
    Genealogy (11)
    General (507)
    Hardware (168)
    Health (13)
    Human Interest (9)
    Humor/Satire (19)
    Investing (4)
    Journalism (1)
    Linux (93)
    Macintosh (22)
    Model Building (3)
    Music (33)
    net.culture (40)
    Personal (88)
    Photography (6)
    Politics (3)
    Retro Computing (26)
    Saving money (72)
    Servers and Networking (18)
    Society (49)
    Software (55)
    Spam (13)
    St. Louis (23)
    This weblog (14)
    Toy trains (74)
    Troubleshooting (7)
    Useless Trivia (1)
    Vendors (6)
    Video (21)
    Viruses (12)
    Windows (120)
    Writing (16)

    Older Stories
    Wednesday 30-Sep
  • 401(K) Paperwork (0)

  • Sunday 27-Sep
  • First impressions: HP Mini 110 (1)

  • Saturday 26-Sep
  • Getting more screen real estate in Firefox (0)

  • Wednesday 23-Sep
  • Barfy. (4)

  • Monday 21-Sep
  • Why I quit my job (2)

  • Saturday 12-Sep
  • Slimming down Windows XP for SSDs and nettops (0)

  • Thursday 10-Sep
  • And... bailing out. (3)

  • Friday 04-Sep
  • End of the innocence (0)

  • Monday 31-Aug
  • Installing Windows off USB (1)

  • Friday 21-Aug
  • Diving into real estate (0)

  • Who's Online
    Guest Users: 10

    Syndicate!
    Get your RSS/RDF fix here.

    List of all stories
    Click here for a list of all the entries on this site


    Created this page in 0.97 seconds


     Copyright © 2009 Dave Farquhar's Silicon Underground
     All trademarks and copyrights on this page are owned by their respective owners.

    Powered by GL 1.3.x