Designing a Web User Interface - And Doing It Right


The web, as it is today, is full of web sites. No surprise there. Some are popular, some aren't. Some make money, while others don't. And some of them, are made by people who think florescent teal text on a neon green background won't make your eyes bleed. Unfortunately, there's no easy way for us to just run all of these people off the web; so instead, we publish educational e-zine articles to help make sure these things don't happen.



At the risk of being completely clich, the basic layout of a web site is crucial. Personally, I like to first make some sketches before I even start implementing a design. Regardless of your strategy as the webmaster, you'll want to identify some basic web site segments such as areas for a logo, menus, page content, sponsored text links (if applicable), and whatever pretty stuff will be needed to balance it all out. However simple it might seem, this simple process is a major pitfall for even experienced designers - and not an affordable mistake to make.

The Navigation System

Your navigation is perhaps the most crucial piece of your site if people can't find your pages, they may as well not even exist. Many studies on graphical user interface (GUI) design suggest that the average person scans web page in an "F-shaped" motion, scanning twice across the top of the page, and once down the left. With this in mind, I shouldn't need to say that your menus belong on the left of your page, the top, or in both places; and on all pages.

A menu should be as categorized as possible. If lots of deep-level pages exist, it's a good idea to use a 'tree-like' structures along the top of each page as seen in big web directories which will not only help visitors find their way around your sites, but also search spiders. There's no one agreed-upon number of links for a menu, but personally, I would say that more than 6 is too many, so try to organize as much as you can.

The Content

The content area of a web site should be just that. A grayscale watermark here and there can be neat, but the key is that content stays enjoyable to read, so crazy effects in this area should be kept to a minimum.

The average surfer's attention span is about that of a circus monkey so web content is always best delivered in short fast-paced paragraphs. Whenever possible, bold, italics, horizontal rule tags, images, or whatever else can be devised to break from that chore of reading for the average person, will be appreciated, whether consciously or not. Studies show that sponsored advertising works best within your content, but don't make it so your poor visitors in 480x640 resolution are forced to essays of 2cm-wide text.

The Other Stuff

After the two key features of our site are squared away (this being a menu, and content, in case I lost your attention), you can begin thinking about the pretty stuff. Colors, shapes, and symbols all have their own subconscious interpretations the extent of which stretching far beyond the scope of this article, but careful consideration should be made.

Try sticking to no more than 3 basic colors that fit well together, and collectively deliver the message you want your site to have. Consider, is your site a "round site", or a "square site"? Both styles of layout have their place and will deliver a very different message to the surfer.

Conclusively, this is just a starting point to begin in your journey of web design, but it's important nonetheless. A good basic layout will place your site miles ahead of the average site, and once it's decided upon, it's not always easy to change, so design wisely.

Corey Northcutt works with a provider of affordable web hosting known as Ubiquity Hosting Solutions (http://www.ubiquityhosting.com); where he derives extensive experience in working with other webmasters as a community leader.

Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > Web Development > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction