|
Web
Design Elementals:
|
Design Elements: Pieces of the Puzzle | |
|
The goal of actual webpage design is to provide users with an exciting presentation that facilitates their quest for information. The best designed websites have a unified look, they catch and hold our interest, they are intriguing but not bewildering to navigate, they are simple to use, and they are well maintained without spelling and other errors. Well-designed websites showcase their content, not bury it. There are five essential
design elements anybody doing any type of design should consider, but
often do not. Remembering these concepts when designing your site will
improve your design, period. You simply cannot go wrong when these key
elements are all done correctly, although getting everything correct is
always a challenge, as people always have their own opinions of how to
do things! Visual Flow Setting up the elements of your page so that the eye of the user flows from one point of interest to the next is a great way to make sure that he or she sees what you want them to and will probably find what they are looking for. Poor layout confuses the eye, buries critical information, and generally makes the webpage difficult to get through. Two
useful ways of making your pages more dynamic include movement and a balance
between symmetry and asymmetry; they are discussed in detail below. Before
we start with that, I have just one caveat: in any webpage, it is slowly
becoming an accepted practice to scroll down to find more information,
but never, ever make a webpage that forces a user to scroll horizontally.
This ranks up there with flashing text as one of the most annoying things
that can be done on a webpage.
Symmetry
and Asymmetry: Nothing is more eye-catching than a symmetrical
and an asymmetrical shape in contrast to each other. Set up your page
with unequal ratios and use images and white space for balance. Symmetrical
designs, like text all on one side, epics on the other, are often pleasing
to the eye, but get boring quickly. Asymmetrical designs grab our attention
in a more active manner, but can quickly confuse and tire the eye if overdone. White Space What you can do with lines to set borders and to order or group your information, you can usually do with the appropriate amount of white space and keep your page from becoming cluttered or all marked up with lines. Generally, if you need lots of lines to show people the delineation between your various groups of information, your page is too cluttered. Another important use of white space is to give the eye rest. The empty area that constitutes white space makes no demands on the eyes to do work.
Color is a powerful tool for showing relationships and dividing areas of a webpage.When use correctly it adds consistency to your website and can help a user recognize your site. The Menu: Although the state of monitor technology has improved over the past years, there are still only 216 colors that can be trusted to reappear as you want them to. New monitors can display a virtually unlimited palette of color, but there do exist old monitors with poor display abilities and a limited color palette. While even basic monitors support at least 256 colors, there exist only 216 that look the same across all computers. These limitations makes color choice critical. You do not want to make a site with colors that look great on your new monitor, but turn to pea green and chartreuse on grandma's monitor. Color vs. Color: When picking a color scheme for your site, it helps to know a little color theory: how colors work together and set mood. Be creative in mixing colors and black and white. A site with every color under the sun will look way busy and will stress out the eye. The basics (white, black, gray) can add some balance to the excitement that other colors bring, and should be used if your color palette becomes large or saturated.
Another thing to remember about color is that it can set the mood of your webpage. A site that is primarily black will give a more subdued aura than one that is orange, which better relates energy. Monochrome sites are good for setting moods. Color surprise: A site that is primarily black and gray may look formal, but a "splash" of a bright color can both liven it up and add interest to a color scheme that may otherwise be flat. Adding a color surprise is an effective way to keep your webpages dynamic without complicating your color palette. See how different color combinations can affect contrast and readibility with this java applet!
Type on the Internet is generally limited by one factor: the font on your computer may not be the font on my computer. What does this mean? Well, assuming you build your website using a font that you downloaded off the Internet and think looks really cool. If it is a non-standard font, any user who tries to view your webpage will not see the same page as you. Instead, their web browser will choose the default font to display all your text. Why? They don't have your font. Because of this, it is generally a good idea to simply stick with the basic font styles for web pages. These include Times, Georgia, Arial, and Helvetica. By using these fonts in your design, you need not worry that your design will fall apart on another computer somewhere. Another thing about fonts is the characteristics of the font. Fonts like Times and Georgia have serifs: basically hooks and tails and feet, added on to them. These items add shape to the letters and make them easier to read, which is why they are better for large bodies of text (like novels). Sans-serif fonts, ones which exclude the feet, are generally better for display text, like titles and short pieces of text (like magazine covers). This page is written using Times (or another serif font) as the font, notice all the characteristics of the font. This sentence is written in Arial (or another sans-serif font). Notice the difference.
One last note. When you write for the web, remember that people do not like to read from their monitors. To facilitate this, make your text concise, and broken into small chunks that are easy to read. A large block of text essentially turns into a gray block on the computer monitor, and only those people new to the Internet are likely to take the time to read it. Remember that when people are on the Web they are looking for information. As a designer, you need to make that information easy to find and easy to digest. Try to keep long text concise. To do this, remember two things. First, attempt to break text into four to five line chunks so that the user is not assaulted by a big block of words. Second, do not place text across the entire screen, but instead try to limit it to only a part of the whole width. Text that is spread across an entire monitor is also difficult to read. And one more note. If you produce pages that a user is likely to want to print, heed the color combination of the page and make sure that the printed page remains legible. Another option is to have a print-friendly version of your webpage that a user can go to if they want the content in a paper-friendly version. See how closely you
were paying attention by taking a java
applet test.
|
|