I keep a running list of CSS galleries that I peruse daily to keep up with the latest trends, designs, usability, and so forth. I think it’s fabulous to see these types of site designs, and more than happy to share!
> CSS Remix
> Screenalicious
> CSS Reboot
> CSS Dump
> CSS Designed
> Designsnack.com
> CSS Liquid
> CSS Based
> Twodecember.com
I wrote this for the VU designers blog, but not sure who’s manning the blogs, so I’ll just put up this post here. Enjoy!
As a web designer, developer and online marketer, it’s really cool (and at times interesting) to see how other web designers create their web sites and web applications. In visiting other sites, you can tell that there are some people who know their stuff very well when it comes to design and aesthetics, and their usage of best practices is clearly visible in their work. While it is great to see the aesthetic concepts being produced, I oftentimes find myself thinking a series of thoughts and questions related to that site; questions such as “Why was this element placed here rather than here?,” “What purpose does this creative (or functional) element serve in the overall scheme of the site?,” and “If I was someone who does not know anything about this [site], how do I get the information I need, where do I go to get it, and how fast can I get it without being lost and/or confused?” I’m sure I have asked more than those three, but you get the picture. And in asking those questions in mind, I end up going back to the same foundational questions that I ask myself consistently: What are the fundamentals that are evident in this design, and what are those that are lacking such fundamentals? And as I ask those questions, I use the following guidelines and rule of thumb in mind:
Business is Business
The way I approach design stems from the principles of online marketing. This isn’t probably your normal web designer perspective, nor am I the only person that views design from this point of view (at least I hope not!). In web design fundamentals, the creation, development, and implementation of a web site stems [partly] from the business functions to which that site is going to play a role in. In an online marketing perspective, web sites stems further into the business functions and more towards the basic fundamentals of business and marketing: the bottom line. In other words, what can a site do to increase whatever goals that the site is supposed to achieve that affect the bottom line: revenue, ROI (return on investment), conversions, leads, sales, networking, market share, net worth, brand loyalty, brand recognition and exposure, extracting contact information, newsletter data aggregation, yield, article interest, etc. How to define a site that is geared towards that/those goal(s) will determine the success and productivity of the site, which can be reflected by the metrics and analysis of those metrics.
A Call to Action
With such goals in mind, a web designer can then be able to complete design concepts that address the specific issues and goals based on strategic business and marketing initiatives. How do you do this? By analyzing what the specific calls to action are that are needed to bring those goals out front for the users to “act upon.” Any element that will call a user to submit an action to your site is a call to action element. For example, if a site is an ecommerce site soliciting buyers to buy an entity, that web site will have call-to-action initiatives to expose the needs of that site for the buyer to act upon, which is to buy that product or entity. The primary call-to-action initiatives/elements could be an “add product” button, a “download sample” button, or “purchase me” button. From an SEM standpoint, the call-to-action elements could be the contextual links within the contents that lead the user to a call-to-action page (such as a download page, freebie page, product cart page, etc). You can even say that a secondary call-to-action initiative/element could be a “signup for email newsletters” button, “see more samples” button, or “compare other products” button. Call-to-action elements need to be visible, visually associated to its respective content, and aesthetically appealing to be recognized in and of itself. Using call-to-action elements will help generate the necessary actions that the user needs to take based on the design that you have created, but also help build a positive experience and positive ROI.
Positioning is Key
As call-to-action elements are considered strong factors in generating positive ROI, it is the placement and positioning of these elements and other key site elements that really show a strong fundamental use of web design. A primary call-to-action element, say a “REGISTER HERE” button (assuming there is only one button), isn’t going to be effective when that element is isolated at the bottom of the page or footer of the design, while the contents associated with this button is near at the top. Simultaneously, the contents associated with the element will not be as effective when it is not positioned within the vicinity of that element. They all have to be continuous and tied together in order to be an effective call-to-action element. Similar to placement of call-to-action elements is the positioning of your menu and navigation system. How visible, functional, categorical, and well-placed your navigation system is will determine the functionality and usability of your whole site, define the positioning of your call-to-action elements, and will ultimately decide the level of experience your user will be getting.
Content is King… with a little help
Content will always be king, within the realms of online marketing and beyond. But the content will not be as effective if 1) the infrastructure of the design is not made to provide well-positioned content in relation to well-positioned call-to-action elements, 2) the content is not written primarily and effectively to induce a sense of action from the user, and 3) the content is not optimized effectively to engage in user interactivity. What’s more important is that the level of productivity the content has will depend on other elements of the site. That includes design, functionality, usability, positioning, and graphical elements, to name a few.
Following Through
Nothing breaks a great web site than when a user leaves the site without being engaged by the site and without fully completing the goals to which the site was built to do. This is where your metric analysis comes into play. Your metric analysis will provide a more detailed and analytical version of how your site performs from an everyday basis, and is a great source of contemplating the productivity and value of your site and each of its design and call-to-action elements. Even with sites that are more informative and more educational, it is still good best practice to design sites that implement a sense of engagement and user involvement while educating and informing your user. It is a strong best practice to analyze your site, using the data to be able to improve on how well or worse your site is doing based on the goals that was provided for that site to achieve, and how to shift priorities to encourage better metrics to produce the best possible (and positive) ROI for your specific goals.
Ever since I came back from my conference, I have had no time to play and lots of time to really reflect on my freelance business. One of the things that I knew I had to do was to re-establish my site and re-create everything from the ground up. For one thing, I had to re-evaluate the CSS to ensure that what I have created is going to be compatible, accessible, and be fully supported by the W3C. Second, I had to revamp the look and design to make it more “professional” but still be creative enough to appeal – doing it all on my own terms. These two alone is enough to get really busy, and trust me it was a big investment on my part to overhaul everything.
Why do it? Because I knew creatively and professionally that it needed to be done. Just like any creative person, I am my own worst critic and my own worst client. There doesn’t seem to be enough leverage to really assess the value of one design over another, of one initiative over another, simply because the reasonings and push behind one doesn’t necessarily match the long-term mentality behind the push. So, when creativity gets sidelined, things fall apart and I get sick of the current styles to focus on new ones.
All this to say, that I I feel confident on the creation that I made for my own business. I feel that it is much cleaner and sharper than what I previously had, while not sacrificing too much on the design flow. Thankfully, I can still be able to add certain design creativity without being TOO avant garde, and still be presentable professionally.
Let me know what you think! Post your comments and let me know what you want/don’t want to see on my site, and… I’ll think about it :)
