Structured UI
A lot of developers nowadays rarely take the time to structure UI. With advent of technologies like CSS, image-editing tools and WYSIWYG HTML Editors, developers favor productivity rather than structure of UI. Also, a lot of hype has been focused on improving the middle tier. Now hear me first, there's nothing wrong with putting most of your of effort there in fact it should be one of the priority. But it wouldn't hurt for you to take some time not to only make your UI look good but also structured. Why bother? Well, two words: Performance and Maintainability. In a web application, the usual elements in UI are styles, images and the page itself. I'll be discussing such scenario.
CSS
The creation of Cascading Style Sheet has opened a lot of areas for developers. One of them is the ability to centralize styles. So manageability and control was taken a step further. However, most developers have taken this another step further. Most developers tends "dump" everything in centralize style sheet. And make it worst by making this "centralized" style sheet linked to every page of the application. Why is this bad? First, your style sheet will now lose its structure since all of the styles from different pages are located in one single file. Second, if this style sheet is linked to a page that does not need all of the styles, it will be a burden. Solution? Organize and Localize. Prepare how to implement your styles. I always look at implementing style in a hierarchical manner. I will start by indentifying which styles are needed be centralize and which are not. Use the style tag and inline attribute to 'localize' the style. If a CSS class will only be use on a particular page, pin it there. Also, splitting your style sheets logically is a good idea. For example, if your application consists of several modules, then creating a separate for each will be a good idea. If a particular class targets only specific tag, then declare it on the style sheet (e.g. TD.myclass). This will make your intention for the class clearer.
Images
Photoshop married Dreamweaver long time ago. They're like page-popping machine! Draw your image in Photoshop, slice it, and toss it to Dreamweaver then voila! You now have an instant page. But what's wrong with this picture? No time to optimize the page and the images. I will take the page later, let's start with the image first. Slice wisely. Take time to determine which of these images can be tiled, which one can be replaced by a background color or can be substituted by styles. Solid colors can be obviously replaced by background colors. Gradients can be tiled. Strokes can be implemented using CSS. Doing this will make your page clean and breathing. Also, take some time to choose between image formats. Compare file size for each image format and you'll save some valuable performance.
Page
I understand why a lot of people are frustrated when using tables. That's because they don't know how to use it properly. I know that there much has been drive to promote DIV tag and I'm not against it. But for complicated design I still run to tables. Table gives me the control that I need to tame page elements. I always see table as the basic unit of a page. Nest tables. That's where its power resides. Nest but not complicate. Avoid too much use of colspan and rowspan by nesting tables. These attributes are the usual cause for page layout to break. It also makes page harder to maintain and troubleshoot.
All in all making a structured UI is relatively easy. Following some steps will benefit your application performance and reward you manageability.