ASP.NET Web Design - Beyond CSS

I haven't really searched for ASP.NET web design ideas and styles but I certainly have not come across anything through my casual reading of online articles. You can find plenty of material on the technical aspects of themes, ASP.NET 2.0 CSS Friendly Control Adapters, master pages, and skins but nobody applies any actual design to their examples. I've been researching many web design sites but their focus is entirely on CSS. Web designers don't seem to concern themselves with anything except the CSS while developers totally avoid applying the eye candy. This leaves being visually creative with ASP.NET an uncharted territory.

One of the things I would like to get from participation in the developer community is some feedback on my design efforts. I would also appreciate any tips and tricks that I could use. Ideally, we could use a community site that brings developers and designers together but I don't see that happening.

Here is an example of my typical web site design for code experiments. It does not get any plainer than this. All I use is a header tag and a horizontal line tag.

And here is my latest effort at a more inspiring design for my experiments. I borrowed the page layout from Microsoft Expression Web. The layout is based entirely on CSS and does not use any tables. However the original design was very boring and boxy so I added some rounded corners to the masthead and the main content area. I tried various methods of applying rounded corners but the method that worked best was something I actually found through the ASP.NET Weblogs. Check out Josh Stodola's blog post on how to create fluid-width rounded corners using divs. I like how the corners are partially transparent PNG graphics that take on the color of the background without requiring me to create new images. Although you cannot see it in this image, there is a striped background that is specified in the CSS. You can generate background stripes using an online tool at: http://www.stripemania.com/ There is also a shaded border around the center content which is applied dynamically through JavaScript. I found that at http://www.ruzee.com/blog/

My recent design effort was to improve the look of my tables. I found a great web site, CSS Table Gallery with a gallery of table styles you can use. The design that really caught my eye was UV Green which seems to make the rows pop visually. I created a GridView using the Northwind products table and applied this table style to the GridView without setting any of the web control styles. Since the page layout does not use a table I am free to style tables as I want. This page is using a "Green Theme" with a different background stripe and color scheme. You can see the shaded border better in this image.

I also have a blue theme so I needed to create a blue version of the UV Green table style. To find a harmonious color for the table rows I used an online color scheme generator http://www.colorschemegenerator.com/index-black.htm

 Another table style that I liked was Media Groove and it was easy to replace my previous table design but I did not bother to create a theme with a similar color scheme.

The ASP.NET logo with the reflection was created in Adobe Illustrator. You can find a detailed tutorial at http://www.bittbox.com/illustrator/tutorial-web-20-logo-reflection-in-vector-format-with-illustrator/

My next project will be to try different button designs with web controls. Most of my experiments have involved CSS because that is all you will find on web design sites.

When you get really good at design you can rename your business to "web development boutique". It sounds more frilly.