I’ve seen many developer created websites and skins with very similar mistakes lately. They all lack of knowledge about principles in web design. In my post about the truth of DotNetNuke Skinning, I mentioned that skinning is not a skill; it takes a bit of knowledge and understanding of the DotNetNuke framework as well as aesthetic design. Many seems to master the first part, however, they all missed the second. By learning how to use Photoshop doesn’t make one becomes a graphic designer.
To assist with future skinning approach, here are the five principles of building a DotNetNuke site or to design a skin. These principles are of course extended to web design and development in general, but the lack of implementation in DotNetNuke community intrigued me to put them together. I hope you all enjoy!
All website design should follow the simple principles below.
- Easy to Read
DotNetNuke provides a generic cascading style sheet—you’re right, it’s the default.css (that you shouldn’t be using); by making small changes to override the typography on the default.css, we improve the readability for your users dramatically. It’s not just about the readability alone; it’s also a site usability aspect. Text can also be treated as UI. If we provide proper contrast to a site’s content, we create a clear separation between content and its presentation, it'll help visitors to scan the content quickly.
Stay away from using obnoxious font colors or sizes, it just gives visitors the unpleasant feeling when browsing the site and, of course, very hard to read the content.
Hyperlink is also an important element that should be treated wisely. Make sure to provide a distinct color for hyperlinks to separate it from regular text and links. Site links, visited as well as hover state should assist visitors in recognizing and be familiar with your site at first glance.
An example of low-contrast vs. high-contrast text and background design. It will be more pleasant to read the content on the low-contrast column.
- Easy to navigate
I’m sure everybody has read Don’t Make Me Think by Steve Krug (if not, I strongly recommend that you grab a copy and read it yourself) and understood the principle of “removing the question marks”. I’m also pretty sure many understand the concept but failed to apply it to your everyday projects.
Site navigation is one of the most important factors that help engaging users to trust. The trust factor is crucial in all online business today because “your competitor is only one click away”. It is true if you’re confusing visitors, it's hard for them to come back and visit. And you can forget about trying to sell them anything.
Use global navigation to create a solid foundation of trust. It means that your navigation should be visible to visitors to navigate from all pages. Also make sure the important information is presented clearly.
Look at this site’s navigation; let me know if you can’t find a way to contact me or find out who’s behind this. It seems like a “duh” statement, but you’ll find sites out there have About and Contact pages buried elsewhere.
DotNetNuke also provides breadcrumb token (although it’s not perfect, but still serves the purpose), use it to assist visitors along with “You are here” or “Currently viewing” tagline. This little token has a strong usability value to your site visitors. - Easy to find
If you’ve traveled abroad before, you’ll know this. In most international airports, they use universal icons to assist travelers of all cultures. Those icons are easy to understand at first glance. They tell you where the public bathrooms are, where to pick up your bags, where to get a taxi, and where to access to pubic phones...
Take this principle and apply to your site. Make it easy for visitors to find information by use of simple icons or facilitating text. Use read, yellow, and green to help visitors associate with the errors, warning, and success text messages.
The CSS selector .CommandButton in DotNetNuke doesn’t make much sense to visitors unless it’s actually a button. Make sure you use a real button when you mean “Click here” in your applications. It triggers users to click on the buttons instead of a link. Maybe we (as developers) have been spending too much time with the framework; many things started to make sense now, but not to your visitors because they most likely don’t know what DotNetNuke is.
Does this image make you want to click on the button at first scan?
Beside visual assistance to help visitors find information better on your site, using semantic markup to design your site (skins) will also help to gain findability advantage. Apply certain techniques to simplify your code and get better search ranking and a meaningful website to multiple browsers and devices. Better HTML markup equals search engine friendly. - Follow the KISS rule
Less is more. We all nod our heads and respond that we understand it. However, how many of us really keeping it simple?
Take a look around the Internet for DotNetNuke design; many tend to put more things to fill up space (‘cause we don’t understand the white-space principle). Some created graphics to accommodate the emptiness, others embedded graphical background images to show creativity, but often done wrong, ultimately decreases visitors’ readability. After all, the rule of simplicity has been forgotten.
It is important to keep it simple. By following the KISS (keep it simple stupid) rule, you’ll accomplish something valuable in design that others don’t.
And the difference is in detail, not graphics. Remember, "simplicity is the ultimate sophistication"—Leonardo Da Vinci. - Consistency
Consistency is one thing that almost all DotNetNuke designers and developers have ignored. It’s not that they don’t understand how to make modules and skins consistent. It is the habit that when a project gets more complex, they often forgot to go back and do a little “quality assurance” task.
Not having a consistent design will confuse visitors with their browsing experience on your site. You might be asking why everything has to be done right. Who cares about a little small thing in module development or skin design?
Because it is what set us apart from others. The philosophy at Apple Inc. taught many of us a valuable lesson: no detail is too small.