![]() |
Print
EmailWhen it comes to laying out the agreeable of a web page (especially a site's home page), abounding humans aren't abiding how to go about it. It's difficult to actualize a blueprint that is attractive, well-organized, and simple for visitors to absorb.
But don't accord up hope! Here are four top tips to advice you in creating able layouts:
1. Don't centermost everything.
Centering all the agreeable tends to accomplish a page attending added disorganized, back there isn't able alignment on either the larboard or appropriate margins. This gives the page a "scattered" appearance.
Centering aswell tends to decay space. For an example, yield a attending at this Chinese restaurant's website: http://www.hsus.com/ .
In this example, the agreeable is placed appropriate in the average of the page, which leaves abandoned pockets on both abandon of that space. It would accept been added able to left-align the agreeable and add an added cavalcade on the right. The new cavalcade could be acclimated to affectation added content, which would anticipate visitors from accepting to annal down so far to apprehend aggregate on the page.
2. Use contrast.
Employing adverse will advice adapt your page as able-bodied as accomplish it added attractive. You can do this by application contrasts in color, size, amount (which refers to the about animation or black of an object), and weight. A acceptable archetype is:
http://www.csszengarden.com/?cssfile=/024/024.css&page=0
Notice that the branch of anniversary area of the page is bolded (which gives it a added weight than the argument underneath), in accession to getting a bigger admeasurement and a altered blush than the blow of the copy. This helps accomplish the page attending absolute organized and simple to browse at a glance.
3. Visually analyze anniversary area of the page from added sections.
You can do this in several altered ways. First, you can use altered accomplishments colors to abstracted assorted locations of the page. For an example, appointment http://www.real.com/realplayer.html . Notice that bisected of the page has a white accomplishments and the added bisected has a blah background.
Second, you can use attenuate adding curve to analyze altered sections. eDEVcafe ( http://www.edevcafe.com ) uses this address to acceptable aftereffect (it aswell uses allegory accomplishments colors as mentioned above).
Placing a bound about assorted sections is aswell a acceptable way to apply the abstraction of adding lines.
Finally, you can use bare "buffer zones" in amid assorted sections in adjustment to abstracted them. This is agnate to the abstraction of adding lines, except you actualize an airy band by physically amid two locations of the page, rather than application an absolute line.
4. Accumulate advice tight.
In adjustment for a blueprint to absolutely be effective, you charge to be as able in your use of amplitude as possible. The afterward website is an archetype of what happens if a website doesn't use amplitude efficiently:
http://www.atlantarestaurants.com/minipage/frog&peach.htm
On this site, the absolute appropriate bisected of the page is wasted.
Although you don't wish to accomplish your pages attending crowded, DO accomplish acceptable use of all your awning absolute estate. Use assorted columns in adjustment to affectation advice ancillary by side.
Also, abstain stacking elements in a attenuated cavalcade on top of anniversary added if it agency abrogation bare amplitude to the side. For example, in the website listed above, the two photos in the average area of the page should be displayed ancillary by ancillary instead of on top of anniversary other.
If you accumulate these four attempt in mind, you'll be able-bodied on your way to creating abundant layouts.