Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

HTML5 is gathering more and more momentum, and is looking very likely to be, in the near future, the language of choice for developers, replacing Flash. As such, in todays news round-up we focus on some fresh HTML5 resources, articles and tutorials for you to enjoy. Here they are:

The HTML5 Roadmap, Past and Present

The most publicized reason for the push to build web apps in HTML5 is that Flash is not allowed on the iPhone and the iPad, but the reasons go deeper and more technical than that. This article gives an insightful overview of how HTML5 has rapidly progressed in the last few years.
The HTML5 Roadmap, Past and Present

Build a HTML5/CSS3 Website Layout Without Images

In this tutorial you will learn how to build a decent-looking HTML5 & CSS3 website that doesn't to rely on any images for the layout elements.
Build a HTML5/CSS3 Website Layout Without Images

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, you’ll take a look and see what you can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. You’ll also use jQuery to handle the effects and add the finishing touches.
How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

The State of HTML5 Apps

The State of HTML5 Apps

HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

By Paul Andrew (Speckyboyand speckyboy@twitter).

Within web design there are a multitude of solutions and techniques that cover the same problem. No solution is entirely correct, and none are entirely wrong. That is the beauty, and sometimes the agony, of web design.

Sometimes you just want the most basic and simplest technique to solve a popular problem, and that is what today’s Design Reviver Answers question covers: How do you create a nice drop down menu effect?

You can leave a comment below or you can leave your solution on the original posted question on Answers.

How do you create a nice drop down menu effect?

This question was originally asked by Elisabett Monroy, and you will find the favorite (as voted by Answers users) solution below:

Answer from Rubacode:

…and here is the code for the menu:

Now the CSS for Styling:

ul.topnav {
    list-style: None;
    padding: 0 20px;
    margin: 0;
    float: Left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: Url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: Left;
    margin: 0;
    padding: 0 15px 0 0;
    position: Relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: Block;
    text-decoration: None;
    float: Left;
}
ul.topnav li a:hover{
    background: Url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: Left;
    background: Url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: Center bottom; cursor: Pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: None;
    position: Absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: None;
    float: Left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: Both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: Left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

And a little bit of jQuery:

$(document).ready(function(){

    $("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

This solution is pretty straight forward and very easy to implement, do you have a better solution? We would love to hear about it.

You can leave your solution below in the comment section, or you can leave an answer/solution here: How do I create a nice drop down menu effect? on Answers.

Unanswered Answers

Can you help with this weeks unanswered questions?

1. Is it possible to Change the Google Maps API Key Dynamically Using JavaScript?
2. Need to get the XML content of a node as a string?
3. What Do I Need to Parse Content With Regular Expressions Using jQuery?
4. How Can I Convert HTML Entities to Unicode Character In JavaScript?
5. What's a Good Way to Refresh/Load a Web Page for Every 10 Seconds to View Updated Information?
6. Does Anyone Know of Any Browsers that May Have Problems Caching XMLHTTPRequest Responses?
7. How Can I Get a Div to Automatically Adjust to the Size of the Background I Set for it Without Setting a Specific Height for it?
8. What's a Good Way to Test Connectivity in PHP?
9. How Can I Keep a Centered Background Image from Breaking the Layout If the Browser Window is Resized?
10. What File Permissions Should Be Set for Uploaded Files?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

There has been a tidal wave of buzz recently about all the new CSS3 features and properties. Just what exactly do these new properties mean for web designers, though? Well, CSS3 is pretty cool, no longer will you need to rely as much on graphics or Javascript, and more importantly it allows for better control over HTML elements, allowing you to create more flexible and even more complex web sites. Really, whats not to love about it all?

For today’s news we have collected the best articles that focus on CSS3 tutorials, and give you a little insight to what all the buzz is about.

Understanding The Basics Of CSS3

In this article,the author talks about some of the more popular features of CSS3 that have recently been spotted out in the wild among several popular websites. While most of these are only visible in some of the more modern web browsers (Mozilla, Chrome, Safari) it’s important to go ahead and get a grasp of exactly how they actually work.

Understanding The Basics Of CSS3

50 Excellent Tutorials for Web Development Using CSS3

In this emerging roundup they mphasis on some of the latest techniques: text-shadow, rounded box, box sizing, opacity handlers, multiple backgrounds, border images and also support for multi-column web layouts.

50 Excellent Tutorials for Web Development Using CSS3

Basic CSS3 Techniques That You Should Know

This article, from Six Revisions, takes a look at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment.

Basic CSS3 Techniques That You Should Know

15 CSS3 Navigation and Menu Tutorials and Techniques

Please bare in mind that for the most part all of these menu tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.

15 CSS3 Navigation and Menu Tutorials and Techniques

By Paul Andrew (Speckyboy and speckyboy@twitter).

You could have the best website in the world with the best content ever, yet without a decent navigation system it would all be worthless. There are certain criteria you need to follow when designing your menu – it needs to only stands out and be obvious of its purpose, it also needs to match the style of your sites design and most importantly it needs to be usable, meaning your visitors can understand it and easily use it.

For today’s news we showcase the best in web design navigation and menus for your inspiration.

40 Creative Navigation Menus

In this article from ProBlogDesign they have pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you some ideas to enhance your own navigation.

40 Creative Navigation Menus

25 Mega Menus for Your Design Inspiration

Mega menus are a current popular web design trend that take drop down menus a bigger step forward in an attempt to make it easier for visitors to navigate through a larger site.

25 Mega Menus for Your Design Inspiration

A Showcase of Website Navigations with Serious Click Appeal

In this article you will find a showcase of websites that successfully achieve "Navigations with Serious Click Appeal" in a very stylish way.

A Showcase of Website Navigations with Serious Click Appeal

CSS Menu Samples

With over 100+ menus on display in this showcase, in every possible conceivable format (CSS, Javascript, Flash…), in almost every possible style (vertical, horizontal…), you are practically guaranteed to find inspiration.

CSS Menu Samples

For the last few years jQuery has been the jewel in Javascripts crown. Its rapid rise in popularity not only reflects how powerful a tool it is but also how relatively easy it is to work with. It is because of these two factors that developers have been churning out plugins and new techniques at a phenomenal rate.

Thanks to all of those developers for making our life easier!

30 Stylish jQuery Tooltip Plugins For Catchy Designs

Tooltips can be an important factors on a web site,although little and not always visible, they do offer so much. Although important, they also happen to be a very badly misunderstood and a poorly implemented component.

30 Stylish jQuery Tooltip Plugins For Catchy Designs

45 jQuery Navigation Plugins and Tutorials

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands.

The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article they’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable.

45 jQuery Navigation Plugins and Tutorials

25 jQuery Plugins for Working with Forms

Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post they feature 25 useful plugins that you may be able to use in your own work with forms.

25 jQuery Plugins for Working with Forms

By Paul Andrew (Speckyboy and speckyboy@twitter).

CSS is a very important element of what we call a “structurally sound” web design. CSS turns strips of code and interactive features into a working design. This is especially true for CSS based menus. Giving your users a creative way to interact with pages, categories, and other aspects of your site is a great way to keep them coming back. Not only that, but your navigation will be easily accessible since it will stand-out. Your users won’t get lost, they’ll always know how to get to where they need.

If you want to find out the different CSS features you can incorporate into your navigation, it’s important that you view other menus as inspiration, and you know how they work. Below we’ve hand-selected 30 Best CSS Techniques for a Unique Navigation that are sure to bring creativity to your menu.

Advanced CSS Menu

An in-depth, creative navigation tutorial.

Create Vimeo-Like Top Navigation

A top navigation tutorial on virtually the same menu as Vimeo.com; structure wise. When you hover over the search box, a drop down menu appears and it gives you a few customizable options.

Overlapping Menu

With this tutorial you’re able to create a menu that overlaps. It’s a pretty nice effect for a unique site.

Centered Tabs with CSS

If you’re looking for an alternative to the sliding doors method, then this centered tab css tutorial is just what you need. It fully centers the tab in you navigation menu, and eliminates those left or right aligned mishaps.

Scalable CSS Based Breadcrumbs

With this navigation technique the usability of your menu can increase. The code is simple and it only uses 6 CSS styles.

CSS Drop-Down Menu Framework

This menu seperates HTML from CSS, and categorizes CSS types. You can create a nice drop-down effect.

Turning a list into a navigation bar

Turn your menu list into a navigation bar with a background image structured through CSS.

Advanced CSS Menu Trick

You can shift the focus of the user’s attention to the menu items you’re not hovering over. It creates a nice blur effect.

JavaScript Dropdown Menu with Multi Levels

This multi-level drop-down menu allows you to define several different sub navigations.

Hidden Tab Menus

This is a simple hidden tab menu that onfolds when you hover over the menu icon.

Inverted Sliding Doors Tabs

Here you’ll find a creative sliding doors technique that lets you work with inverted tabs. Inverted tabs means that the bottom tab of the one you would currently be onis lower and is left or right aligned.

Son of Suckerfish Dropdowns

This is a easy to install and completely accessable dropdown navigation menu. Your menu can also have multiple-levels as well.

MenuMatic: Vertical Menu Example

MenuMatic is a MooTools class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.

Circular Menu with Sub-Menus

Nice tutorial for a circular menu that lets you add a sub menu level of smaller icons. It adds a smooth effect to the navigation process.

Sexy Drop Down Menu with jQuery and CSS

With this tutorial you’ll learn how to create a “sexy” drop down menu that will use CSS and jQuery to create a drop down effect.

CSS Sprite Navigation Tutorial : Ehousestudio

This tutorial will help you build a succesful CSS navigation using sprite images. You’ll be able to enhance the load time of your menu as well.

Rounded corner CSS navigation bar with jQuery

You’ll learn how to add some nice round corner effect to your anchor elements with jQuery, for your navigation, without using any image.

Designing the Digg Header

This menu contains a fluid width, and enables you to develop a smooth drop-down effect where you can place emphasis on important sub-menus.

Mac Style Dock Menu Navigation Bar in CSS

This more for those Mac fanatics or if you have an Apple themed site and wish to enhance the look of your site by implementing a menu that fits your overall design.

The Menu menu

This a great CSS menu that “comes to life” after hovering over a menu item, this automatically reveals a sub-menu.

CSS Navigation with Glowing Icons

Here you’ll find a beautiful CSS menu technique for creating glowing icons.

Woody CSS Menu

Woody is a CSS menu that’s simply ready to use and has been tested on several browsers such as Internet Explorer and Firefox.

CSS Block Navigation Menu

This CSS menu technique allows you to develop a navigation menu that has item with descriptions.

CSS Hover Button

Create CSS button-style navigation menu by checking out this excellent tutorial.

Matte CSS Menu

Matte is a simple CSS menu with rounded corners using two small images only from 13styles.

Fancy Sliding Tab Menu

Beautiful navigation technique that brings down the menu you’re currently on by hovering over the next one.

Aplus ADxMenu

This technique is a pretty basic example of an organized and well designed menu tabs.

DOMTab

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface.

Drop Down Menu with Nested Submenus

Create your own drop down menu with nested sub-menus using CSS and a bit of JavaScript.

Nicely Organized Tabed Menu

Example 4 of these menus is a simple, well organized menu that would better fit a solid color layout.

Being able to communicate effectively and convey key information in a clean and solid matter is parallel to great website design. Designing a corporate website is none the less challenging and requires one to break barriers of communication while steering clear of cluttered designs. When you have a corporate client in mind, you need to make sure that you website can capture the necessary attention and leave a lasting impression on its customers.

The layout, graphics, brand identity, url, and colors are essential to the design and must be carefully thought out and chosen. Corporate websites must attain a higher level of readability, clear presentation, ease of function and accessibility. Below, you will find 30 Incredible Corporate Website Designs that reflect creativity, beauty, simplicity, and great usability. We know there are hundreds more out there, so if we’ve missed any, please let us know!

Elements of a Good Corporate Website

Being Clean, Well Organized and Engaging on a Visual Level

When a customer visits your site, they should notice that the site is attractive, the layout is clean, and the content is visible.

Attractive and Usable Navigation

Designing a site that revolves around simple and easy to find navigation takes some work. However, this could be the difference between a visitor and an actual customer.

Direct, to the point Content

Don’t use overly complicated and highly sophisticated words. We all know you’re smart, but truthfully, not everyone of your visitors will understand or care for everything you write. For example, the content on your site should be easy enough to read that 4th grader could skim through it with very little problem. When visitors read the content on your site, they usually only pay attention to key words and headlines.

Informative and Resourceful About Us Page

Your about us page isn’t all that makes up your site, but it does hold an important place on your site. This is where your potential customers will go to get acquainted with you. Make this page count!

Faster Load Times

You definitely wouldn’t want to keep potential customers waiting an unnecessary amount of time for pages to load. This will drive them away.

Sprinkle Penny

LemonStand

Royal Bank of Scotland

Bloglines

NewsGator

Freckle

Litmus

GLUE Interactive Media

LePush Mail

Campaign Monitor

Campfire

Checkout.App

ActiveCollab

Capuccino Wbe Framework

Squarespace

Saturized

Socialite

Versions

Water CMS

Krop

Office VP

Clear Spring

Business Catalyst

Newsberry

Gist

Onehub

Reinvigorate

Lifejacket

Light CMS

Play in Traffik

Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content. Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design. A simple wireframe displays the location of a header, main content, footer, sidebars, ad placement, and navigation.

Coming to Terms with Wireframes

Wireframes are usually created using a variety of software applications geared towards design. Most developers find good use of Photoshop and Visio stencils because they allow you to save layers and libraries of commonly used shapes and elements. Once you’re able to develop your wireframe prototype, this will allow you to interact with your client in a variety of ways such as getting an up-front view of their sites design or redesign. This also means that the developer has a clear understanding of what technologies (i.e. JQuery, Ajax, etc..) need to be used for specific elements on the site.

A large portion of these common elements are absolute needs, and if not included then this can cause your visitors to experience, leave, and express a great deal of frustration towards your site. No one wants to visit a site that offers an unclear purpose, seems way to crowded, and neglects the need for vital elements such as navigation to be labeled and easy to find.

Vital Steps to Effective Wireframing

One of the biggest mistakes you can make as a designer on a development project is failing to plan. When you wireframe this is one of the very few vital steps you need to take v.s. the other 100 or so. This is where the conceptualization of an idea starts to take shape and form to allow interaction between the sites design and back end development. Below you will find a few tips that will enable you to make not only effective but better wireframes.

Functionality Contra Superficial

Many times the way you design your wireframe depends on the tools readily available. However, it should always be more about function rather than form at some point. Once you focus on function, form will start to take place. In other words, this means that you not need to create the best looking wireframe, just one that has promising function and form. A good wireframe would include the most important of elements such as boxes, buttons, dropdowns and more.

Spending Too Much Time on Wireframes

Your wireframe has nothing to do with design. Therefore try to avoid spending large amounts of time on making your wireframe “pretty”. If you add too much design then you will end up shifting your client’s focus onto un-important aspects.Wireframe is part of the development process, just remember that design should be left to designers.

Organizing Your Wireframe

As obvious as it is, sometimes it’s easy to forget how important it is to have a well organized wireframe. You can start organizing by splitting the sections that need to be separated such as news, products and user account/registration. Once you’re able to break up your wireframe correctly, then this will bring you one step closer to a more attractive and usable design.

Choosing the Right Tools

For most designers, the pen and paper is utilized as the canvas unto which creativity is transferred on. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept becomes much more then that. As successful designers it’s important that you use tools that you’re most comfortable with. This would increase the chances of raising the quality of work. A few tools used besides Adobe Photoshop and Microsoft Visio would be PM PowerPoint, and Designers Adobe Fireworks.

Color a Plus or Negative?

There are a few things one should avoid when designing a wireframe, one of those things would be to use too much color in your design. Our human eyes are captivated by components that posses any sort of color. We naturally begin to analyze the color scheme behind most of the things we see on a daily basis. Simply put, a wireframe with an exaggerated amount of color will more than likely distract you (or the client) from chief elements.

Although, greyscale is the standard for wireframing, it’s not always a horrid idea to use a VERY light touch of darker colors (black, navy blue, etc..) to separate your sections. However, if you utilize any form of color, it’s possible that your client could have a mal-reaction, i.e. questioning the actual colors of the site. This could easily become a set-back, or it can all together end the clients interest in using you for their sites design. Most designers limit the use of colors to links or elements that may not be included on every page. If you feel the “need” to use color, this wouldn’t be a bad idea.

Clean Examples of Wireframes