The Tridecadal Korean (astralblue) wrote,
The Tridecadal Korean
astralblue

Couple of Entreaties to Those Who Design Own Webpage

See, when you design a webpage, you're a designer, not an HTML/CSS/Javascript/Photoshop technician.  So, please, for the love of God, and for the sake of other people's eyes, take a note of certain design rules:

~ Alignment Is the Key ~

Your webpage will look ugly and disorganized no matter how beautiful graphic elements (like your Photoshop works) it contains, if they are not aligned properly and tightly to one another.  Please pay attention to the top/left/bottom/right edges of the things on your webpage, and by all means make sure they share common guidelines that touch their edges or go through their horizontal/vertical center.  Even when there is no visible guidelines, human eyes automatically recognize the alignment, which creates visual stability.

Please note, absolutely nothing that appears on your webpage is exempt from this.  Every GIF/JPG/PNG, every paragraph of text, every table, even those one-liners in small print at the bottom of the page.

Okay, all right, there's one exception.  That is, a design where you intended complete chaos either in a part or in the entire page.  The latter case -- the entire page -- it's okay.  However, the former case...  Please do introduce a clear boundary between the area of chaos and the rest of the page.


~ Vivid Background Is Not Cool ~

Okay, you like color.  Each of us has a favorite color.  But no, that doesn't mean you have a license to make your page background in solid red, green, blue, cyan, magenta, yellow, etc.  That is, unless you're feeling sadistic. XD

Furthermore, that favorite pop artist of yours -- if you really really have to use her face as the page background, please do us some favor and lower the contrast of the picture by a lot, so the face doesn't prevent us from reading the text on top of it.  You see, the text is there to be delivered, and there's no need to make it harder for your poor readers.  And you know what?  If your idol's face is interfering with the text, vice godforsaken versa -- the text is mangling your favorite star's face.  It's a lose-lose scenario, period. ;_;


~ A Webpage Is Not a Font Showcase ~

My goodness, seriously.  Using 1734817638 different fonts of the same class (serif, sans-serif, cursive) doesn't make your page look cooler.  It just confuses and disrupts the visual order and stability of the page.  You're forcing your readers' eyes to adapt themselves to each and every font that you threw into the webpage, and trust me, from reader's POV, it ain't fun at all.  Readers want to focus on what the text says, not the shape of the individual characters!

My rule of thumb is not to exceed three fonts per page, four at very most.  Or sometimes even two, if I use a lot of font variants (differing weights and styles, like normal/oblique/italic).


~ Contrast Is for Accents ~

Study some webpages immaculately and artistically designed, and you'll probably notice what you perceive as black on white is not really #000000 on #ffffff.  More often than not, they use #111111 or #222222 as the text color, and in some cases even the background isn't solid white, but something like #f8f8f8 or #f4f4f4.  Just a difference of level 8 or 12 out of 256 in the background, would that make a difference?  Why yes, it does.  Look at this page layout that you're viewing now.  The main text area uses #f4f4f4 as the background, and the surrounding page background is solid white.  See the difference?  Yes, that's the power of 12 out of 256, less than 5%.

And you know, if you reserve extreme colors, you get a nice bonus of being able to use them for truly high contrast for strategic purposes, like highlighting.  You use #222222 on white for normal text, and for that one particular phrase or kind of design element (like section headings) that you want to emphasize, blam, you put them in #000000, instead of whoring out those bold or italic fonts yet again!  And people go like Whoa, this black is blacker than the other black!  Fresh!  Win-win.  End of story.

...  Oh, and let's not forget that those subtle differences in foreground/background colors can also give your page a novel and softer look compared to other's carelessly designed pages!


~ Monopoly Is Bad ~

Last but absolutely not least!  Please do keep in mind that there are people who use different web browsers than you do, and please do your best to make your page look good on those browsers as well.  IE users -- please install Firefox and proof your pages there too.  MS haters -- please have your IE-using friends to test-drive your page for you and tell you what they see wrong there, and try and fix them.  If you can't really make it work on both browsers, well, you at least tried, and we all understand the world is not perfect...  But really, please do try and make it as user-friendly as possible!

Oh, and yeah, be on guard when you copy and paste that fancy HTML, CSS or Javascript code from <insert your favorite code vault website here>...  Not all of them are exactly considerate about browsers that they don't normally use...

I've stumbled onto at least 10 webpages today alone that annoyed the hell out of me by ignoring these basic rules and principles...  And no, they weren't some random 16-year-old kid's Xanga; they were corporate homepages and online storefronts!  See, there must've been some web designers *rolls eyes* who are supposed to be on a professional level *rolls eyes again* that worked on those pages.  My goodness, it's just... Sad.  Really sad.  To see the level of standards out there.

Can't really imagine how bad they can get?  Let me finish this post by introducing the homepage of Gem and Lapidary Dealers Association, a decades-old organization that holds annual jewelry trade shows with hundreds of vendor booths every year.  Jewelry, hmmm...

[ Must be classy, eh? ]

Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 3 comments