With Lesia Design, I recently launched Christianson & Company at http://ccevent.com/. I'm really proud of not only the design but some of the technical aspects to it. It even got a little attention on Twitter in the DNN community.
Will had a grand idea so I've decided to write a little bit about some of my methods for making beautiful DNN websites.
Employ a web designer.
This one is really obvious but the most important. A beautiful design will inform the technical aspects and push your skills. Being a front-end developer and working with designers regularly, what I produce is constantly being reviewed by the designer to make sure her vision is executed well. I emphasize web because I think it's extremely important to have a designer that really understands how things play out on the web. Work with somebody who knows that every image has a filesize and that the website will be viewed on many different devices so it needs to be flexible.
Build your HTML, CSS, and JS locally first.
Now that you have a great looking PSD, build the designs locally and don't even think about DNN yet. Perfect the front-end offline before you create a DNN skin package.
Turn off Copyright Credits.
It's a small one but I still think it's important. This setting can be found under the Host: Host Settings page and it removes the credits in the source.
Use DnnJsInclude and DnnCSSInclude.
From a technical perspective, this is extremely important. If you don't load your resources with the Client Resource Manager, then you won't fully benefit from the composite and minification settings. Smaller file size, less HTTP requests, and simpler code in your skins are great reasons. Ever open up the source of a WordPress website lately? It's a nightmare filled with tons of CSS classes and WAY too many JS and CSS files loading.
Enable Composite Files and Minification (at the end)
It's a simple setting and very self explanatory. You can find this setting in the Host: Host Settings as well. Do this at the end so you don't have to constantly clear cache if you're still working on the skin.
Every single website that I develop uses this module. It's an invaluable tool. Download it from http://stylehelper.codeplex.com/. One of the best tricks with this module is removing the default.css stylesheet when it's not needed. It will always vary depending on your needs, but for many of the websites I build, the only people who need default.css are administrators who edit the website. Here's the code that I typically use:
<fortyfingers:STYLEHELPER ID="STYLEHELPERBODYCLASS" runat="server" AddBodyClass="True" />
<fortyfingers:STYLEHELPER ID="REMOVEPORTALCSS" runat="server" RemoveCssFile="portal.css" IfUserMode="None,View" />
<fortyfingers:STYLEHELPER ID="REMOVEDEFAULTCSS" runat="server" RemoveCssFile="default.css" IfUrl="!Login,!Register,!UserProfile" IfUserMode="None" />
Use 2Sexy Content.
I hope this little post helps you create more beautiful DNN websites. If I had to end it on a note, I would say this: Get a great web designer - the rest will follow.
Let me know if you have any questions by tweeting @ajplopez. You can always send me an email, too.