Five Useful Design Techniques and Coding Solutions For Web Designers

As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don’t have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. We do need to be able to code to some extent and be able to build a design around a structure of code. Yet, with these complications comes an opportunity for unique functionality, interactive effects and better user experience.

In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. All of these solutions enhance a website’s design, not just the code. These solutions affect the user interface and the user’s interaction with the design, and they can make for a more usable and interactive website.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

1. Bar Graph Effect For Multiple Items

This effect (pictured below) can be a great way to add some oomph to a Web page, and make it more user-friendly. Its functionality goes beyond just being a cool trick, though. By organizing any set of items on a page — such as tags, categories, comments, product count — a designer can enhance user interaction, provide useful content clues and improve usability. By seeing a count of items such as tags and product types, the visitor can quickly get an idea of what the website mostly consists of. This is a great way to make quick connections with targeted visitors.

For comment counts, visitors can quickly see where the discussions are at. Highlights on highly commented posts can reinforce user-to-user interaction.

Pictured below are two examples of this design. The left organizes tags, and the second ranks the most commented posts on a blog. Be sure to visit both websites to see the full functionality and CSS effects.

Left, Dribbble (number of tags). Right, Engadget, (most commented posts).

Read More